Bootstrap Grid - Perangkat Kecil
Contoh Grid Bootstrap: Perangkat Kecil
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Class prefix | .col-xs |
.col-sm |
.col-md |
.col-lg |
| Screen width | <768px | >=768px | >=992px | >=1200px |
Asumsikan kita memiliki tata letak sederhana dengan dua kolom. Kami ingin kolom dibagi 25%/75% untuk perangkat kecil.
Tip: Perangkat kecil didefinisikan memiliki lebar layar dari 768 piksel hingga 991 piksel .
Untuk perangkat kecil kami akan menggunakan .col-sm-*kelas.
Kami akan menambahkan kelas berikut ke dua kolom kami:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Sekarang Bootstrap akan mengatakan "pada ukuran kecil, cari kelas dengan -sm- di dalamnya dan gunakan itu".
Contoh berikut akan menghasilkan pembagian 25%/75% pada perangkat kecil (dan menengah dan besar). Pada perangkat ekstra kecil, itu akan secara otomatis menumpuk (100%):
Contoh
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Catatan: Pastikan jumlahnya selalu berjumlah 12.
Untuk pembagian 33,3%/66,6%, Anda akan menggunakan .col-sm-4dan .col-sm-8:
Contoh
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Bab berikutnya menunjukkan cara menambahkan persentase pisah yang berbeda untuk perangkat sedang.