Cara Membuat Web Responsive Dengan Bootstrap

Light Bootstrap Dashboard Free Bootstrap 4 Admin Template

Web Responsive dengan Bootstrap

Bootstrap adalah framework yang digunakan untuk mempermudah dan mempercepat pembuatan halaman website. Kenapa mempercepat dan mempermudah, karena bootstrap sudah menyediakan css dan javascript yang siap pakai dan mudah dikembangkan. Maka dari itu sebenarnya Bootstrap ini adalah framework yang dikhususkan untuk front-end.

Pengembangan Bootstrap

Untuk saat ini bootstrap sudah sampai di versi 4. Tapi versi 4 ini masih dalam tahap percobaan dan belum ke versi stable. Jadi di dalam artikel ini yang akan dibahas adalah bootstrap 3. Perubahan yang ada di versi ini dibanding versi sebelum-sebelumnya antara lain:

1. Secara default desain yang dibuat dengan versi ini sudah responsive, karena css responsive sudah jadi satu dengan file utama

2. Perubahan grid, dimana terdapat class grid baru

3. Penambahan class dan elemen baru di versi 3

4. Perubahan nama class

5. Lebih ringan daripada versi sebelumnya

Responsive Web Design

Responsive web design adalah design halaman website dimana design tersebut fleksibel di semua perangkat yang digunakan oleh pengunjung suatu website. Jadi desain website tersebut dapat mengikuti atau menyesuaikan ukuran dari layar yang digunakan pada suatu parangkat. Sehingga konten yang disajikan dapat lebih efektif untuk dibaca dan dilihat di setiap perangkat.

Cara menggunakan Bootstrap

1. Untuk dapat menggunakan bootstrap ini, pertama — tama kita harus memiliki resource file bootstrap yang dapat di download di getbootstrap.com . Setelah file tersebut didownload, extract filenya dengan menggunakan program seperti Winrar atau 7zip.

2. Download JQuery library. JQuery library dapat didownload di jQuery. Fungsi dari library ini adalah agar bootstrap komponen seperti dialog modal, navigation bar dan komponen yang menggunakan bootstrap.js dapat berjalan.

3. Gunakan code editor seperti Sublime, Notepad++ untuk mempermudah dalam membuat code html, css, ataupun javascript

Setelah 3 langkah diatas sudah terpenuhi, saatnya kita mulai menggunakan bootstrap. Tahap — tahapnya sebagai berikut:

1. Buat folder baru, beri nama misalnya ‘coba_bootstrap’

2. Copy seluruh file bootstrap yang sudah diextract tadi ke dalam folder coba_bootstrap

3. Copy file JQuery yang didownload tadi ke dalam folder js yang ada di bootstrap

4. Buat file html baru misal index.html dan sertakan kode berikut :

Uji coba Bootstrap

Setelah keempat langkah di atas sudah selesai. Kita coba buka file html yang sudah dibuat tadi dengan browser firefox, google chrome, safari. Maka akan muncul halaman sbb:

dan berikut untuk tampilan jika diakses melalui mobile :

Komponen/Class — Class pada Bootstrap

Berikut ini adalah beberapa komponen-komponen yang terdapat pada bootstrap :

Form

Dalam membuat sebuah form dengan menggunakan bootstrap class — class yang biasanya sering digunakan adalah :

.form-control : yang biasanya dipakai di tag <input>, <textarea> agar ukurannya 100% menyesuaikan panjang dari form

2. .form-group: untuk grouping tag <label> dan <input>

Berikut contoh penggunaannya :

Button

Untuk menggunakan style button dari bootstrap, kita bisa menambahkan class .btn. Berikut contoh penggunaan class .btn

selain itu button juga memiliki class .btn-group yang berungsi untuk grouping button. Contoh penggunaannya:

Modal

Modal adalah kotak dialog bootstrap yang dapat kita panggil saat event tertentu dijalankan (misal: click).

Contoh script modal :

Alert

Alert dapat dipakai dengan menggunakan class .alert. Class ini biasanya digunakan untuk membuat notifikasi/pemberitahuan setelah anda menjalankan fungsi tertentu (misal: insert data, update data). Alert ini terdiri dari beberapa jenis antara lain :

1. .alert-success : untuk menampilkan pesan dengan warna hijau

2. .alert-danger : untuk menampilkan pesan dengan warna merah

3. .alert-warning: untuk menampilkan pesan dengan warna cokelat

4. .alert-info: untuk menampilkan pesan dengan warna biru

Berikut contohnya:

Tabs

Bootstrap juga sudah menyediakan class css dan fungsi js dalam membuat sebuah tap pada halaman web. Dan tentunya dapat mempermudah dan mempercepat kita saat kita hendak membuat tab pada halaman web kita. Berikut contohnya :

Grid-system

Grid ini berfungsi mengatur ukuran untuk lebar masing-masing komponen, sehingga memudahkan kita untuk mengatur ke-responsivan halaman web kita. Bootstrap memiliki 12 grid yang dimuali dengan yang terkecil yaitu 1 dan terbesar adalah 12. Selain itu bootstrap juga memiliki class grid yang memiliki kegunaan-kegunaan masing-masing yaitu :

1. Col-lg-* : digunakan untuk mengatur grid di layar komputer ukuran besar

2. Col-md-* : digunakan untuk mengatur grid di layar komputer ukuran sedang

3. Col-sm-* : digunakan untuk mengatur grid di layar tablet

4. Col-xs-* : digunakan untuk mengatur grid di layar handphone

Nah untuk penjelasan lebih detail mengenai komponen / class-class pada bootstrap dapat dilihat di situs resminya bootstrap getbootstrap.com