Sistem Grid Pada Bootstrap

Bootstrap saat ini menjadi salah satu framework favorit bagi web designer yang ingin membuat website responsive. Di era saat ini, dengan perkembanga perangkat elektronik yang begitu pesat, memberikan dampak bagi disain website. Kebutuhan untuk diakses dari berbagai perangkat dengan resolusi yang berbeda-beda, kebutuhan informasi yang tepat sasaran, dan tanpa harus repot untuk zoom-in dan zoom-out, menyebabkan website responsive ini menjadi salah satu pembaharuan yang mesti dilakukan dalam pembuatan website.

Pada artikel ini, saya mencoba membagikan kepada anda tentang konsep dari sistem grid pada Boostrap. Secara sederhana, sistem grid dapat diartikan sebagai sistem untuk membuat tampilan website dengan menggunakan serangkaian baris dan kolom. 

Sesuai dengan pengenalan sistem grid dari Bootstrap (dapat diakses pada situs resmi bootstrap: http://getbootstrap.com), terdapat beberapa aturan dari sistem grid yang harus dipahami. Adapun aturan tersebut kurang lebihnya sebagai berikut:

• Class row harus ditempatkan diantara sebuah class container (fixed-width) atau class container-fluid (full-width) dengan tujuan keselarasan dan padding.

• Gunakan class row untuk membentuk grup horizontal dari kolom.

• Konten yang ada harus diletakkan pada kolom dan kolom memungkinkan untuk membuat baris baru.

• Struktur grid yang telah ditetapkan seperti class row (.row) dan class colum (.col-md-4) tersedia untuk mempercepat pembuatan grid layout. Less mixins juga dapat digunakan untuk membuat lebih banyak semantik layout.

• Kolom membuat pembatas antara kolom dan konten melalui padding. Sebagai pengimbang padding diberikan margin negatif di awal dan diakhir kolom.

• Penggunaan margin negatif ini berujuan agar konten yang menggunakan grid berbaris (sejajar) dengan konten yang menggunakan non-grid (tanpa grid sistem).

• Kolom grid dibuat dengan 12 (dua belas) kolom.

• Jika di dalam satu baris (row) berisikan lebih dari 12 kolom, maka sisa dari kolom tersebut akan dibuatkan baris baru di bawahnya.

• Class Grid berlaku untuk perangkat dengan lebar layar (resolusi) yang lebih besar dari atau sama dengan ukuran breakpoint dan menimpa class grid  yang ditargetkan pada perangkat dengan lebar layar kecil. Oleh karena hal tersebut, sebagai contoh dalam menerapkan class col-md-* untuk elemen, tidak hanya akan mempengaruhi styling pada ukuran layar medium, tetapi juga akan mempengaruhi pada ukuran layar besar apabila class col-lg-* tidak disertakan.

Dari beberapa aturan tersebut, saya akan mencoba untuk menjelaskan secara lengkap terkait dengan penggunaan sistem grid berdasarkan kasus-kasus yang pernah saya alami. Di awal anda cukup memahami bahwa di dalam satu barisnya terdapat 12 kolom. Kemudian sekarang terserah anda untuk membaginya, sebagai contoh anda ingin membagi layar anda menjadi tiga bagian, maka anda cukup membagi 12 kolom menjadi 3. Sehingga class yang anda buat untuk membuat layar menjadi tiga bagian yaitu ".col-md-4" sebanyak tiga kali (Contoh 1).

Contoh 1

Anda perlu mengingat aturan sistem grid yang sebelumnya telah saya berikan. Lihatlah Contoh 1, pada gambar tersebut class row (warna kuning) berada di dalam class container kemudian class container memiliki pembatas berupa padding (warna biru) di antara class container dan class row. Setelah itu barulah terdapat tiga class "col-md-4" di dalam class row, dimana masing-masing class "col-md-4" memiliki pembatas terhadap konten yang berupa padding.

Setelah memahami konsep dari sistem grid, selanjutnya saya akan menjelaskan terkait pengaturan grid pada kolom. Di dalam framework bootstrap terdapat beberapa class yang mengatur ukuran kolom berdasarkan resolusi layar. Adapun class yang dimaksud yaitu sebagai berikut:

1. Class col-xs-* digunakan untuk mengatur ukuran layar dalam resolusi ekstra small yaitu resolusi layar dibawah 768 pixel.
2. Class col-sm-* digunakan untuk mengatur ukuran layar dalam ukuran small yaitu resolusi lebih besar atau sama dengan 768 pixel.
3. Class col-md-* digunakan untuk mengatur ukuran layar dalam ukuran medium yaitu resolusi lebih besar atau sama dengan 992 pixel.
4. Class col-lg-* digunakan untuk mengatur ukuran layar dalam ukuran large yaitu resolusi lebih besar atau sama dengan 1200 pixel.

Dengan memanfaatkan class-class di atas, maka anda dapat membuat website yang responsive sesuai dengan kebutuhan tampilan yang anda inginkan di setiap resolusi perangkatnya.

Demikian pengenalan dari sistem grid yang dapat saya berikan, semoga apa yang saya bagikan dapat memudahkan anda dalam memahami grid sistem pada bootstrap. Apabila anda menyukai artikel ini, anda dapat membagikannya.

Artikel Terkait:

Mohon untuk membaca Kebijakan Privasi sebelum mengambil data dari blog ini atau sebelum berkomentar.