Önyükleme Izgarası - Küçük Cihazlar
Önyükleme Izgara Örneği: Küçük Aygıtlar
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Class prefix | .col-xs |
.col-sm |
.col-md |
.col-lg |
| Screen width | <768px | >=768px | >=992px | >=1200px |
İki sütunlu basit bir düzenimiz olduğunu varsayalım. Küçük cihazlar için sütunların %25/%75 oranında bölünmesini istiyoruz.
İpucu: Küçük cihazlar, 768 pikselden 991 piksele kadar ekran genişliğine sahip olarak tanımlanır .
.col-sm-*Küçük cihazlar için sınıfları kullanacağız .
Aşağıdaki sınıfları iki sütunumuza ekleyeceğiz:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Şimdi Bootstrap "küçük boyutta, içinde -sm- olan sınıfları arayın ve bunları kullanın" diyecek.
Aşağıdaki örnek, küçük (ve orta ve büyük) cihazlarda %25/%75 oranında bir bölünmeyle sonuçlanacaktır. Ekstra küçük cihazlarda otomatik olarak yığınlanır (%100):
Örnek
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Not: Toplamın her zaman 12'ye ulaştığından emin olun.
%33.3/66,6'lık bir bölünme için .col-sm-4ve kullanırsınız .col-sm-8:
Örnek
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Sonraki bölüm, orta düzey cihazlar için farklı bir bölme yüzdesinin nasıl ekleneceğini gösterir.