Sistem Grid Bootstrap
Sistem Grid Bootstrap dapat di buat sampai 12 kolom dalam satu page.
Jika anda tidak ingin menggunakan 12 kolom, anda dapat mengelompokan kolom bersama:
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
Sistem Grid Bootstrap adalah responsive, dan kolom akan menyesuaikan secara otomatis berdasarkan ukuran layar.
Daftar Isi
Grid Class
Sistem Grid Bootstrap memiliki empat class:
xs(untuk phones – screens less than 768px wide)sm(untuk tablets – screens equal to or greater than 768px wide)md(untuk laptop kecil – screens equal to or greater than 992px wide)lg(untuk laptop dan desktop – screens equal to or greater than 1200px wide)
Class di atas dapat dikombinasikan untuk menciptakan tata letak yang lebih dinamis dan fleksibel.
Struktur Dasar Grid Bootstrap
Berikut ini adalah struktur dasar kisi Bootstrap:
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
Pertama; buat baris (<div class="row">). kemudian, tambahkan jumlah kolom yang diinginkan (.col-*-*). Catatan: Nomor dalam .col-*-* harus selalu sampai 12 kolom.
Di bawah ini kami telah mengumpulkan beberapa contoh layout grid Bootstrap dasar.
Tiga Kolom yang Sama
Contoh berikut menunjukkan cara mendapatkan tiga kolom dengan lebar yang sama mulai dari tablet dan penskalaan ke desktop besar. Pada ponsel atau layar yang lebarnya kurang dari 768px, kolom akan secara otomatis ditumpuk:
Example
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Dua Kolom Tidak Sama
Contoh berikut menunjukkan cara mendapatkan dua kolom lebar-lebar mulai dari tablet dan penskalaan ke desktop besar:
Example
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Tip: Anda akan mempelajari lebih lanjut tentang grid Bootstrap nanti dalam tutorial ini.
Di tulis oleh: admin
