Bootstrap Grid Contoh: Perangkat Kecil
Anggaplah kita memiliki tata letak sederhana dengan dua kolom. Kami ingin kolom untuk dibagi 25%/75% untuk perangkat kecil.
Tip: perangkat Kecil didefinisikan sebagai memiliki lebar layar dari 768 piksel ke 991 piksel.
Untuk perangkat kecil kita akan menggunakan .col-sm-* kelas.
Kami akan menambahkan kelas berikut untuk dua kolom kami:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>Sekarang Bootstrap akan mengatakan "pada ukuran kecil, mencari kelas dengan -sm- di dalamnya dan menggunakan mereka".
Contoh berikut akan menghasilkan 25%/75% split pada perangkat kecil (dan menengah dan besar). Pada perangkat kecil tambahan, maka secara otomatis akan 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> Cobalah sendiri " Catatan: Pastikan bahwa jumlah itu selalu menambahkan hingga 12.
Untuk 33,3% / 66,6% split, Anda akan menggunakan .col-sm-4 dan .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> Cobalah sendiri " Bab berikutnya menunjukkan bagaimana menambahkan split persen yang berbeda untuk perangkat media.