Bootstrap Sistem Grid
Bootstrap's sistem grid memungkinkan hingga 12 kolom di halaman.
Jika Anda tidak ingin menggunakan semua 12 kolom secara individual, Anda dapat mengelompokkan kolom sama untuk menciptakan kolom yang lebih luas:
| rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 |
| rentang 4 | rentang 4 | rentang 4 | |||||||||
| rentang 4 | rentang 8 | ||||||||||
| rentang 6 | rentang 6 | ||||||||||
| rentang 12 | |||||||||||
Bootstrap's sistem grid responsif, dan kolom akan menata kembali secara otomatis, tergantung pada ukuran layar.
Grid Kelas
The Bootstrap sistem grid memiliki empat kelas:
- xs (untuk ponsel)
- sm (untuk tablet)
- md (untuk desktop)
- lg (untuk desktop yang lebih besar)
Kelas-kelas di atas dapat dikombinasikan untuk membuat layout yang lebih dinamis dan fleksibel.
Struktur dasar dari Bootstrap Grid
Berikut ini adalah struktur dasar dari Bootstrap jaringan:
<div
class="row">
<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; membuat baris ( <div class="row"> ). Kemudian, tambahkan jumlah yang diinginkan dari kolom (tag dengan tepat .col-*-* kelas). Perhatikan bahwa angka-angka dalam .col-*-* harus selalu menambahkan hingga 12 untuk setiap baris.
Di bawah ini kami telah mengumpulkan beberapa contoh dasar Bootstrap layout jaringan.
Tiga Kolom Sama
Contoh berikut menunjukkan bagaimana untuk mendapatkan tiga kolom yang sama-lebar mulai dari tablet dan skala untuk desktop besar. Pada ponsel, kolom secara otomatis akan menumpuk:
Contoh
<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> Cobalah sendiri " Dua Kolom yang tidak merata
Contoh berikut menunjukkan bagaimana untuk mendapatkan dua kolom berbagai lebar mulai dari tablet dan skala untuk desktop besar:
Contoh
<div class="row">
<div
class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-8">.col-sm-8</div>
</div> Cobalah sendiri " Tip: Anda akan belajar lebih banyak tentang Bootstrap grid nanti dalam tutorial ini.