Bootstrap Chapter 2 - Bootstrap Grid System
1. Pendahuluan
Saat kita mulai belajar bootstrap sebagai pemula kita akan dihadapkan pada beberapa aturan membuat webdesain salah satunya adalah grid system, grid system adalah
alat yang akan membantu kita untuk membuat layout web agar menjadi
lebih rapi. Di dalam bootstrap, grid system dibagi dalam 12 kolom (
col-*) dimana dalam tiap barisnya (.row) yang diset dalam empat model xs (extra small), md (medium), sm (small), lg (large)
sesuai lebar dari layar monitor, sehingga selain membantu kita dalam
membuat layout web yang rapi, grid system bootstrap juga membantu kita
membuat layout web yang responsive.
2. Tujuan
- Memahami Grid System Basic
- Mempelajari Grid System Basic
3. Pembahasan
Seperti yang telah dijelaskan di atas, grid system bootstrap dibagi dalam 12 kolom dan empat macam ukuruan. empat ukuran tersebut adalah :-
col-xs-*ini digunakan pada ukuran kurang dari 768px atau seukuran mobile. -
col-sm-*ini digunakan pada ukuran lebih dari atau sama dengan 768px atau seukuran tablet. -
col-md-*ini digunakan pada ukuran lebih dari atau sama dengan 992px atau selebar monitor. -
col-lg-*ini lebih dari atau sama dengan 1200px atau monitor besar.
misalkan :
akan membuat tiga kolom apapun ukuran layarnya. sedangkan
akan membuat tiga kolom saat berada di layar monitor seperti laptop tapi menjadi satu kolom saat berada dilayar smartphone.
Selain empat macam ukuran di atas di dalam bootstrap terdapat dua macam class lain yang berguna dalam membuat layout web yaitu
.container dan .rowcontainer membantu kita membuat layout website kita berada di tengah-tengah browser seperti gambar dibawah ini
Tanpa container
dengan container
Dengan container
Tanpa container
row membantu kita untuk membuat baris baru dalam
membuat layout. Selain untuk membuat baris baru layout biasa digunakan
ketika kita hendak menambahkan grid di dalam grid seperti berikut :cara yang BENAR
Cara yang SALAH
Apabila kita menggunakan cara yang SALAH layout web yang kita buat akan rusak terutama saat dibuka di mobile dan layout yang seharusnya responsive justru akan kacau dan ancur.
4. Kesimpulan
Kesimpulannya bahwa, system grid mempermuda jika seseorang membuka situs web, sehingga dengan system grid tampilan dari website itu mengikuti layar dari sebuah Laptop atau handphone.
5. Refrensi
- https://www.onphpid.com/belajar-bootstrap-mengenal-system-grid-bootstrap-3.html
- https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
No comments :
Post a Comment