Bootstrap Grid Contoh: Medium Devices
Dalam bab sebelumnya, kita disajikan contoh grid dengan kelas untuk perangkat kecil. Kami menggunakan dua divs (kolom) dan kami memberi mereka 25%/75% perpecahan:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>Tapi pada perangkat media desain mungkin lebih baik sebagai 50%/50% split.
Tip: perangkat Sedang didefinisikan sebagai memiliki lebar layar dari 992 piksel ke 1199 piksel.
Untuk perangkat media kita akan menggunakan .col-md-* kelas.
Sekarang kita akan menambahkan lebar kolom untuk perangkat media:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
Sekarang Bootstrap akan mengatakan "pada ukuran kecil, melihat kelas dengan -sm- di dalamnya dan menggunakan mereka. Pada ukuran medium, melihat kelas dengan -md- di dalamnya dan menggunakan mereka".
Contoh berikut akan menghasilkan 25%/75% split pada perangkat kecil dan 50%/50% split pada perangkat media (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
col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Cobalah sendiri " Catatan: Pastikan bahwa jumlah itu selalu menambahkan hingga 12.
Hanya Menggunakan Medium
Pada contoh di bawah, kita hanya menentukan .col-md-6 kelas (tanpa .col-sm-* ). Ini berarti bahwa perangkat menengah dan besar akan membagi 50%/50% - karena kelas skala atas. Namun, untuk perangkat kecil, itu akan menumpuk secara vertikal (100% lebar):
Contoh
<div
class="row">
<div class="col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
Cobalah sendiri " Bab berikutnya menunjukkan bagaimana menambahkan split persen berbeda untuk perangkat besar.