GRID PADA BOOTSTRAP

Setelah teman-teman mengenal Bootstrap dan mengetahui cara menggunakannya, selanjutnya kita akan cara penerapan Bootstrap. Dan artikel kali ini kita akan membahas tentang sistem Grid dari Bootstrap.

GRID

Disini kita akan mempelajari aturan dan struktur dasar sistem Grid 12 kolom pada bootstrap serta teknik dan contoh penggunaannya.

ATURAN DAN STRUKTUR DASAR SISTEM GRID BOOTSTRAP

Untuk menggunakan sistem Grid Bootstrap, ada kaidah-kaidah yang harus kita ikuti. Bbberikut ini adalah aturan yang harus kita gunakanuntuk menggunakan sistem Grid Bootstrap :

• Elemen row harus ditempatkan di dalam elemen container (untuk fixed-width) atau container-fluid (untuk full-width). Hal ini bertujuan untuk menyelaraskan alignment dan padding.
• Untuk membuat kelompok kolom secara horisontal, gunakan elemen row.
• Konten harus ditempatkan di dalam kolom dan hanya kolom yang boleh ditempatkan secara langsung di dalam baris (row).
• Kolom menghasilkan gutters (jarak antar konten kolom) melalui padding. Padding disajikan pada baris untuk pertama dan terakhir kolom melalui margin negatif pada class row (.rows).
• Kolom grid dibuat dengan menentukan 12 kolom yang ingin di span. Sebagai contoh, 3 kolom yang sama akan menggunakan sebanyak tiga col-xs-4. karena 3 x 4 = 12, maka penulisan tidak boleh melebihi 12 kolom.
• Untuk layar ponsel (extra small), menggunakan class prefix .col-xs-*.
• Layar tablet atau smartphone (small) menggunakan class prefix .col-sm-*.
• Layar ukuran komputer dan laptop (medium) menggunakan class prefix .col-md-*.
• Untuk layar komputerdan laptop ukuran besar, menggunakan .col-lg-*.
• Saat menuliskan class kolom, menggunakan aturan seperti class="class prefix-jumlah kolom". Sebagai contoh, saat membuat grid, ukuran layar yang anda gunakan extra small dengan jumlah kolom 3, maka tag yang digunakan.

Baca juga artikel lainnya : Mengenal Framework Bootstrap Cara Menerapkan Bootstrap Pada Website Grid / Pembagian kolom Pada Bootstrap

Dibawah ini merupakan gambar yang diambil dari dokumentasi bootstrap mengenai cara sistem grid bekerja di beberapa perangkat.

Untuk mengetahui struktur dasar dari sistem Grid Bootstrap, diberikan contoh baris pertama mempunyai 1 kolom, baris kedua mempunyai 2 kolom, dan baris ketiga mempunyai 3 kolom. Markup kodenya seperti gambar di bawah ini :

1. CONTOH PENGGUNAAN SISTEM GRID
   Setelah kita mengerti aturan dan struktur sistem Grid pada Bootstrap, selanjutnya akan dibahas contoh penggunaannya. Untuk lebih jelas contoh penggunaan sistem grid, ikuti pembahasannya seperti di bawah ini:
   • Stacked-to-horizontal
   • Wrapping Kolom
   • Penggunaan Grid untuk Perangkat Handphone
   • Penggunaan Grid untuk Perangkat Tablet dan desktop
   • Penggunaan Grid untuk Perangkat Ponsel, Tablet dan desktop


2. OFFSET KOLOM(MENGGESER KOLOM), NESTING COLUMN (KOLOM DI DALAM KOLOM) DAN MENGURUTKAN KOLOM
   • Offset Kolom (Menggeser Kolom)
   • Nesting Kolom (Kolom Di dalam Kolom)
   • Mengurutkan Kolom

Silahkan lanjutkan dengan materi selanjutnya :

• Grid pada Bootstrap
• Tipografi pada Bootstrap
• Penggunaan Bootstrap untuk Tabel
• Penggunaan Bootstrap untuk Form
• Penggunaan Bootstrap untuk Button
• Penggunaan Bootstrap untuk Image
• Helper Class dan Komponen Dasar Bootstrap
• Plugin JavaScript pada Bootstrap

Artikel Terkait : Penggunaan Grid Untuk Perangkat handphone Penggunaan Grid Untuk Perangkat Tablet dan desktop Penggunaan Grid Untuk Perangkat handphone, Tablet dan Desktop Membuat Nesting Column/ Kolom di dalam kolom

Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

Author : budayakanberbagi

Share this

Related Posts