Apa itu Grid System Bootstrap? Sebagai orang awam atau pemula dalam membuat website menggunakan Bootstrap, kita harus Mengenal Grid System Bootstrap.
Yang belum tahu apa itu Bootstrap, Bootstrap adalah framework dari HTML, CSS dan Javascript yang paling banyak dipakai oleh para web desainer untuk mendesign sebuah website. Di dalam framework Bootstrap itu Grid System dibagi dalam 12 kolom (col-) di setiap barisnya (row) yang diatur dalam 4 ukuran model layar monitor, yaitu xs (extra small), sm (small), md (medium) dan lg (large).
Grid System Bootstrap bukan cuma membuat layout web kita menjadi rapi, tetapi membuat layout web kita menjadi responsive. Apa itu layout web responsive? Layout responsive adalah membuat sebuah halaman web mengikut sesuai model device yang kita gunakan, contoh jika kita membuka web menggunakan web browser di pc atau laptop tentunya ukuran layout web akan mengikuti pc atau laptop nya. Dan jika kita buka web nya menggunakan tablet atau telefon genggam, maka ukuran layout juga akan mengikuti ukuran model device yang digunakan. Mari kita lebih jauh untuk Mengenal Grid System Bootstrap.
Berikut nama-nama class kolom yang digunakan di Bootstrap,
* col-xs-* (untuk ukuran telefon genggam)
* col-sm-* (untuk ukuran tablet)
* col-md-* (untuk ukuran desktop)
* col-lg-* (untuk ukuran layar desktop besar)
tanda (*) diatas itu kita isi dengan angka sesuai ukuran yang kalian mau, yang penting dalam 1 baris (row) itu kolom nya harus 12 ya teman-teman. Misalnya,
Script diatas menunjukkan jika kita mau dalam 1 baris konten terisi penuh dengan ukuran layar monitor desktop.
Dan jika kita mau membuat 3 konten berjejer, di Bootstrap tidak usah lagi menggunakan yang namanya style CSS ‘float:left;’ lagi teman-teman. Dikarenakan sudah terbagi kolom dalam 1 baris. Untuk contoh coba teman-teman ikuti script dibawah dan isi dalam tag <div class=”col-md-4″> nya dengan konten sesuai yang teman-teman mau lalu teman-teman lihat hasil nya,
Penggunaan nama dalam ukuran device juga bisa kita kombinasikan sesuai kebutuhan yang teman-teman mau. Contoh untuk membuat 4 kolom dalam ukuran layar desktop tapi kita ingin buat terbagi menjadi 2 kolom saat kita buka dalam ukuran tablet, mudah saja cukup buat kode nya seperti di bawah,
Cukup mudah juga kan teman-teman untuk Mengenal Grid System Bootstrap, semoga bermanfaat.
Terima kasih
The post Mengenal Grid System Bootstrap appeared first on Kursus Website Terbaik.