Halu kawan-kawan masih dengan blog saya, kali ini share materi mengenal sistem bootstrap pada bootstrap.
- Pengertian:
Pada sistem grid bootstrap harus memenuhi syarat yaitu grid tidak boleh melebihi angka dari 12, sebagai contoh :
.col-md-4 + .col-md-4, .col-md-4 jadi jumlah grid tersebut adalah 12.
Tidak boleh seperti ini, ( .col-md-5 + .col-md-5 + .col-md-5 ).
Untuk memasang sistem grid, terapkan kode berikut :
Large desktop,
.col-lg-(jumlah kolom) = 12 kolom
Medium desktop,
.col-md-(jumlah kolom) = 12 kolom
Small devices ( Tablet ),
.col-sm-(jumlah kolom) = 12 kolom
Extra small device ( Android ),
.col-md-(jumlah kolom) = 12 kolom
- Latar Belakang:
- Alat dan Bahan:
- Komputer / Laptop.
- Sublime Text.
- Koneksi Jaringan.
- Maksud dan Tujuan:
- Struktur Dasar Sistem Grid pada Bootstrap:
<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div><div class="row">...</div> </div>Sebenarnya kita tidak usah menggunakan .row juga bisa dikarenakan .row itu hanya mengurangi spasi kiri, cssnya sebagai berikut :
margin-left:15% .
Sebaiknya kita tambahkan class .clearfix pada container atau pembungkus kolom, kodenya akan seperti berikut :
<div class="container clearfix"><div class="col-*-*"></div><div class="col-*-*"></div></div> |
Pada grid bootstrap juga bisa menggunakan sistem Grid ganda, seperti inilah kode tersebut :
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4"></div><div class="col-md-4 col-lg-4 col-sm-4 col-xs-4"></div><div class="col-md-4 col-lg-4 col-sm-4 col-xs-4"></div> |
Dan pastikan jumlah kolom adalah 12 .
- Penutup:
Wassalamualaikum Wr. Wb.