Önyükleme Izgarası Örnekleri
Aşağıda, temel Bootstrap ızgara düzenlerinin bazı örneklerini topladık.
Üç Eşit Sütun
Aşağıdaki örnek, tabletlerden başlayıp büyük masaüstlerine ölçeklendirerek eşit genişlikte üç sütunun nasıl alınacağını gösterir. Cep telefonlarında sütunlar otomatik olarak yığılır:
Ö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>
Üç Eşit Olmayan Sütun
Aşağıdaki örnek, tabletlerden başlayıp büyük masaüstlerine ölçeklendirerek çeşitli genişlikte üç sütunun nasıl alınacağını gösterir:
Ö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>
İki Eşit Olmayan Sütun
Aşağıdaki örnek, tabletlerden başlayıp büyük masaüstlerine ölçeklendirerek çeşitli genişlikte iki sütunun nasıl alınacağını gösterir:
Örnek
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Oluk yok
.row-no-guttersBir satırdan ve sütunlarından olukları kaldırmak için sınıfı kullanın :
Örnek
<div class="row row-no-gutters">
<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>
İki İç İçe Sütunlu İki Sütun
Aşağıdaki örnek, tabletlerde başlayan ve büyük masaüstlerine ölçeklenen iki sütunun nasıl alınacağını ve daha büyük sütunda başka iki sütunla (eşit genişlikte) nasıl alınacağını gösterir (cep telefonlarında, bu sütunlar ve iç içe sütunları yığınlanır):
Ö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>
Karma: Mobil ve Masaüstü
Bootstrap ızgara sisteminin dört sınıfı vardır: xs (telefonlar), sm (tabletler), md (masaüstü bilgisayarlar) ve lg (daha büyük masaüstü bilgisayarlar). Daha dinamik ve esnek düzenler oluşturmak için sınıflar birleştirilebilir.
İpucu: Her sınıf ölçeklenir, bu nedenle xs ve sm için aynı genişlikleri ayarlamak istiyorsanız, yalnızca xs belirtmeniz gerekir.
Ö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>
İpucu: Izgara sütunlarının bir satır için en fazla on iki olması gerektiğini unutmayın. Bundan daha fazlası, görünüm ne olursa olsun sütunlar yığılır.
Karma: 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-4</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>
Floatları Temizle
.clearfixDüzensiz içerikle garip sarmayı önlemek için belirli kesme noktalarında kayan noktaları (sınıfla birlikte) temizleyin :
Ö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>
Ofset Sütunları
.col-md-offset-*Sınıfları kullanarak sütunları sağa taşıyın . Bu sınıflar, bir sütunun sol kenar boşluğunu * sütunlarla artırır:
Ö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">
</div>
İt ve Çek - Sütun Sıralamasını Değiştir
Izgara sütunlarının sırasını .col-md-push-*ve
.col-md-pull-*sınıfları ile değiştirin:
Ö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>