Bootstrap Grid Contoh: Ditumpuk-to-horisontal
Kami akan membuat sistem grid dasar yang mulai keluar ditumpuk di ponsel / tablet (perangkat kecil), sebelum menjadi horizontal pada desktop (media / perangkat besar).
Contoh berikut menunjukkan "ditumpuk-to-horisontal" tata letak dua kolom sederhana, yang berarti akan menghasilkan / 50% dibagi 50% pada semua layar, kecuali untuk layar ekstra kecil, yang secara otomatis akan menumpuk (100%):
Contoh: Ditumpuk-to-horisontal
<div class="container">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Cobalah sendiri " Tip: Angka-angka di .col-sm-* kelas menunjukkan berapa banyak kolom div harus rentang (dari 12). Jadi, .col-sm-1 rentang 1 kolom, .col-sm-4 bentang 4 kolom, .col-sm-6 bentang 6 kolom, dll
Catatan: Pastikan bahwa jumlah itu selalu menambahkan hingga 12!
Tip: Anda dapat mengubah tata letak fixed-width menjadi tata letak full-width dengan mengubah .container kelas untuk .container-fluid :
Contoh: wadah Fluid
<div class="container-fluid">
<h1>Hello
World!</h1>
<div class="row">
<div
class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Cobalah sendiri "