Muhammad Aqshol Rifanza - Kali ini kita akan mengenal apa itu system grid pada bootstrap.
Pengertian
Grid System Merupakan pengaturan ukuran yang ditampilkan monitor. Grid System berfungsi untuk membuat pengukuran untuk lebar dari masing - masing komponen web sehingga kita dapat dengan bebas mengatur ke-responsivan dari website yang kita buat dengan Bootstrap. Bootstrap memiliki 12 sistem grid. Bootstrap memiliki beberapa class grid yang memiliki fungsinya masing - masing.
- col-lg-* : Digunakan untuk mengatur grid pada ukuran monitor yang besar
- col-md-* : Digunakan untuk mengatur gid pada ukurang monitor berukuran sedang
- col-sm-* : Digunakan untuk mengatur ukuran grid pada monitor tablet
- col-xs-* : Digunakan untuk mengatur ukuran grid pada monitor handphone / smartphone
Jadi dapat disimpulkan Bootstrap membagi halaman website menjadi 12 grid. Dan dapat menggunakan beberapa grid untuk menentukan lebar sebuah element yang ingin kita buat. Ukuran col-md-1 adalah ukuran yang paling kecil seperti yang dapat dilihat pada gambar diatas. Penggunaan col-md untuk mengatur ukuran lebar pada ukuran monitor yang sedang, dan col-lg untuk ukuran monitor yang besar, begitu juga untuk col-xs dan col-sm seperti yang sudah dijelaskan pada penjelasan tentang class grid Bootstrap diatas.
Contoh sederhananya jika misalnya sobat memiliki dua buah kotak. Dan pada ukuran laptop biasa sobat ingin menampilkan kotak tersebut dengan bersampingan. Maka sobat bisa memberikan col-md-6 pada masing-masing kotak. Dan jika dibuka melalui smartphone misalnya sobat ingin masing-masing kotak tersebut menampilkan ditampilkan dengan lebar penuh maka sobat bisa menambahkan lagi col-xs-12 pada masing-masing element kotak.
Contoh sederhananya jika misalnya sobat memiliki dua buah kotak. Dan pada ukuran laptop biasa sobat ingin menampilkan kotak tersebut dengan bersampingan. Maka sobat bisa memberikan col-md-6 pada masing-masing kotak. Dan jika dibuka melalui smartphone misalnya sobat ingin masing-masing kotak tersebut menampilkan ditampilkan dengan lebar penuh maka sobat bisa menambahkan lagi col-xs-12 pada masing-masing element kotak.
Berikut contoh layout sederhana dengan grid
Kesimpulan
Setelah membaca penjelasan dari mengenal grid system bootstrap dan melihat beberapa contoh diatas diharapkan sobat dapat mendapatkan pemahaman. Dan dengan adanya grid system Bootstrap kita dimudahkan untuk mengatur ukuran website dengan semua resolusi monitor.
Referensi
- http://www.script-kiddies.org
- http://www.malasngoding.com
- http://www.w3school.com
0 comments:
Post a Comment