Assallamuallaikum Wr Wb ,.
Pada kesempatan kali ini saya , akan memaparkan seidikit tentang System pembagian Grid pada Bootstrap. System grid pada Bootstrap sangatlah penting terhadap suatu tampilab website. Karena system grid adalah yang mengatur tata letak dari isi atau content suatu website.
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
Agar lebih jelasnya di bawah ini gambar script dari pembuatan sistem grid yang saya buat. Dalam pembuatan sistem grid di bawah ini saya mendapatkan sedikit css agar dapat merubah warna dari grid tersebut .
Di atas script css terdapat pemanggilan file dari bootstrap , dalam pembuatan system grid ini file dari bootstrap saya letakkan jadi satu folder dengan file htmlnya.
Dibawah ini adalah hasil dari script yang saya buat saat di run pada browser.
Di bawah ini adalah tampilan pada saat ukuran tampilan pada browser kita kecilkan se ukuran dengan layar smarthphone , maka otomatis grid akan lari ke bawah dan menyesuaikan denga ukuran dari layar smarthphone.
KESIMPULAN
Kesimpulanya adalah penggunaan grid dalam bootstrap sangat berpengaruh dengan tampilan website pada saat di buka pada berbagai perangkat baik dari PC / Laptop maupun pada Gadget / Smarthphone.
EmoticonEmoticon