Aşağıda temel bazı örnekler topladık Bootstrap ızgara düzenleri.
Üç Eşit Sütunlar
Aşağıdaki örnek, üç eşit genişlikte sütun tabletler başlayan ve büyük masaüstü ölçekleme için gösterilmiştir. cep telefonlarında, sütunları otomatik yığını olacak:
Örnek
<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> Kendin dene " Üç Eşitsiz Sütunlar
Aşağıdaki örnek, üç farklı genişlikte sütun tabletler başlayan ve büyük masaüstü ölçekleme için gösterilmiştir:
Örnek
<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> Kendin dene " İki Eşit Olmayan Sütunlar
Aşağıdaki örnek, iki farklı genişlikte sütun tabletler başlayan ve büyük masaüstü ölçekleme için gösterilmiştir:
Örnek
<div class="row">
<div
class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-8">.col-sm-8</div>
</div> Kendin dene " İki İçiçe Sütunlar ile iki Sütunlar
Aşağıdaki örnek, iki sütun diğer iki sütunlu, tabletler başlayan ve büyük masaüstü ölçekleme nasıl gösterir (equal widths) (mobil telefonları, bu sütunlar ve bunların iç içe sütun yığını olacak) büyük kolonu içinde:
Örnek
<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> Kendin dene " Karışık: Mobil ve Masaüstü
Bootstrap : ızgara sistemi dört sınıfı vardır xs (phones) , sm (tablets) , md (desktops) ve lg (larger desktops) . sınıflar daha dinamik ve esnek düzenleri oluşturmak için birleştirilebilir.
İpucu: Her sınıf yukarı ölçekler, bu nedenle aynı genişliklerini ayarlamak istiyorsanız xs ve sm , sadece belirtmeniz gerekir xs .
Örnek
<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> Kendin dene " İpucu: Bir satır için on iki kadar ekleyin gerektiğini ızgara sütunları unutmayın. Bundan da öte, sütunlar olursa olsun yığını olacak viewport .
Karışık: Mobil, Tablet Ve Masaüstü
Örnek
<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> Kendin dene " temizle Şamandıralar
Temizle yüzer (with the .clearfix class) belirli kopma noktalarında düzensiz içerikli garip kaydırma engellemek için:
Örnek
<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> Kendin dene " netleştirilmesine Sütunlar
Kullanarak sağa doğru sütunları taşıma .col-md-offset-* sınıfları. Bu sınıflar tarafından bir sütunun sol marjını artırmak * sütunlar:
Örnek
<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> Kendin dene " Itin Ve Pull - Değişim Sütun nolarımız
Ile ızgara sütunların sırasını değiştirme .col-md-push-* ve .col-md-pull-* sınıfları:
Örnek
<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> Kendin dene "