Membuat layout dengan sistem grid bootstrap – Layout merupakan bagian penting dalam mendesain tampilan sebuah web. Ibarat membangun rumah layout adalah kerangka dari rancangan rumah yang ingin dibuat. Dengan menggunakan layout kita dapat mengatur rencana tampilan web dengan rapi dan terstruktur. Bootstrap mempunyai fasilitas untuk membuat layout dengan mudah. Layout yang dibuatpun support pada responsive desain. Dengan menggunakan sistem grid pada bootstrap kita dapat membuat layout yang responsive dengan cukup mudah untuk diterapkan pada website kita.
Rekomendasi Bacaan untuk anda:
- Pengenalan Bootstrap
- Cara menggunakan / implementasi bootstrap pada website
Memahami Sistem Grid pada Bootstrap
Didalam bootstrap terdapat 12 grid untuk keseluruhan halaman. Kita dapat membuat 12 kolom untuk mengisi keseluruhan halaman. Namun bila kita hanya ingin membuat beberapa kolom saja, tentu saja itu bisa dilakukan dengan kolom yang lebih luas pada halaman web tersebut.
Dari gambar ilustrasi diatas saya coba menggambarkan bagaimana struktur layout menggunakan grid bootstrap. Apabila kita ingin membuat kolom dengan span1 maka untuk mengisi seluruh halaman web perlu membuat 12 kolom. Begitu juga bila membuat span kolom 2 maka perlu kita membuat 6 kolom. Begitu juga seterusnya.
Pada umumnya sebuah web mempunyai struktur Header, silebar, konten dan footer oleh karena itu berdasarkan struktur tersebut kita dapat membuat seperti contoh gambar dibawah, nantinya akan kita coba belajar membuat layout seperti ini
Mengenal Class Grid pada Bootstrap
Didalam bootstrap terbagi beberapa class untuk membuat layout menggunakan sistem grid
Grid ClassKeterangancolUntuk ukuran yang sangat kecil, kurang dari 576pxcol-smUkuran kecil, untuk 576px atau lebihcol-mdUkuran medium, untuk 768px atau lebihcol-lgUkuran besar, untuk 992px atau lebihcol-xlUkuran sangat besar, untuk 1200px atau lebihMengenal Class Container pada Bootstrap
Bootstrap mempunyai class container, class ini digunakan untuk menampung setiap elemen grid yang kita buat menggunakan bootstrap. Terdapat dua jenis class container
- Class Container
Merupakan class container default untuk menampung atau bisa saya bilang membungkus grid sistem. - Class Container-fluid
Merupakan class container yang kedua, dengan container fluid setiap grid akan dibungkus, dan diisi penuh untuk seluruh layar.
Apa perbedaan kedua class container diatas ?
Perbedaan mendasar dari class container dengan class container fluid adalah pada penyajian layout container terdapat jarak kurang lebih masing-masing 20% dari sisi kanan maupun kiri layar monitor komputer kita.
Sedangkan untuk Container fluid, kita tau arti kata fuild dalam bahasa indonesia adalah cair dengan demikian bisa kita artikan dengan container fluid akan mengisi semua ruang [karena bersifat cair] yang ada pada elemen layout halaman web kita.
Contoh Class Container
Halaman Web sederhana menggunakan Container
Untuk melihat efek dapat mengecilkan ukuran layar browser, layout akan otomatis mengikuti ukuran layar
Pada contoh diatas perhatikan pada syntax
Contoh Class Container Fluid
Halaman Web sederhana menggunakan Container
Untuk melihat efek dapat mengecilkan ukuran layar browser, layout akan otomatis mengikuti ukuran layar
Perhatikan contoh syntax diatas pada bagian
Belajar membuat layout sederhana dengan sistem grid dan container
Setelah kita belajar teori-teori diatas selanjutnya saya akan contohkan bagaimana membuat layout sederhana dengan sistem grid dan container. Contoh layout yang akan kita buat adalah seperti pada gambar diatas layout sederhana yang terdiri dari header, silebar, konten dan footer dengan implementasi sitem grid dan container. Pada contoh ini saya menggunakan container default bukan container fluid.
Judul Halaman
Silebar
Link 1
Link 2
Link 3
Link 4
Konten
Konten website dapat diisi pada bagian ini
Footer
Dari contoh diatas kita dapat melihat saya menggunakan class container kemudian saya juga menggunakan class row [
Kesimpulan
Dengan membuat layout dengan sistem grid dan container pada bootstrap akan dengan mudah kita buat dan gunakan sesuai dengan kebutuhan desain layout yang ingin kita gunakan. Sistem grid akan membuat pemetaan pada layout website dengan maksimal grid 12. saya tidak menyarankan ketika temen-temen membuat layout dengan grid kurang atau bahkan lebih dari 12 grid. Pastikan setiap baris nilai gridnya harus 12, agar layout yang kita buat sesuai dan tidak berantakan. Dengan kontainer juga kita bisa membuat istilah saya bisa katakan fondasi untuk layout yang ingin kita buat. Demikian pembahasan Kelas Programmer kali ini silahkan komentar anda bisa diisi pada kolom dibawah ini.