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 " Tiga Kolom yang tidak merata
Contoh berikut menunjukkan bagaimana untuk mendapatkan tiga berbagai lebar kolom mulai dari tablet dan skala untuk desktop besar:
Contoh
<div class="row">
<div
class="col-sm-3">.col-sm-3</div>
<div
class="col-sm-6">.col-sm-6</div>
<div
class="col-sm-3">.col-sm-3</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 " Dua Kolom Dengan dua Kolom Bersarang
Contoh berikut menunjukkan bagaimana untuk mendapatkan dua kolom mulai dari tablet dan skala untuk desktop besar, dengan dua kolom (lebar yang sama) dalam kolom yang lebih besar (di ponsel, kolom ini dan kolom bersarang mereka akan menumpuk):
Contoh
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div
class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div> Cobalah sendiri " Campuran: Ponsel Dan Desktop
The Bootstrap sistem grid memiliki empat kelas: xs (ponsel), sm (tablet), md (desktop), dan lg (desktop yang lebih besar). Kelas-kelas dapat dikombinasikan untuk membuat layout yang lebih dinamis dan fleksibel.
Tip: Setiap kelas sisik, jadi jika Anda ingin mengatur lebar yang sama untuk xs dan sm , Anda hanya perlu menentukan xs .
Contoh
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9
.col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3
.col-md-5</div>
</div>
<div class="row">
<div
class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div
class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div
class="row">
<div class="col-xs-6">.col-xs-6</div>
< div
class="col-xs-6">.col-xs-6</div>
</div> Cobalah sendiri " Tip: Ingat bahwa kolom kotak harus menambahkan hingga dua belas untuk berturut-turut. Lebih dari itu, kolom akan menumpuk tidak peduli viewport .
Campuran: Mobile, Tablet Dan Desktop
Contoh
<div class="row">
<div class="col-xs-7 col-sm-6
col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5
col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-8</div>
</div>
<div
class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6
.col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4
col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div> Cobalah sendiri " jelas Mengapung
Jelas mengapung (dengan .clearfix kelas) di breakpoint khusus untuk mencegah pembungkus aneh dengan konten yang tidak rata:
Contoh
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser
window to see the effect.
</div>
<div class="col-xs-6
col-sm-3">Column 2</div>
<!-- Add clearfix for only the required
viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6
col-sm-3">Column 4</div>
</div> Cobalah sendiri " offsetting Kolom
Pindahkan kolom ke kanan menggunakan .col-md-offset-* kelas. Kelas-kelas ini meningkatkan margin kiri dari kolom dengan * kolom:
Contoh
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5
.col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6
col-md-offset-0">
.col-sm-5 .col-sm-offset-2 .col-md-6
.col-md-offset-0</div>
</div> Cobalah sendiri " Dorong Dan Tarik - Ganti Kolom Pengurutan
Mengubah urutan kolom grid dengan .col-md-push-* dan .col-md-pull-* kelas:
Contoh
<div class="row">
<div class="col-sm-4
col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8
col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div> Cobalah sendiri "