Bootstrap Izgara Örnek: Küçük Aygıtlar
iki sütunlu basit bir düzen varsayalım. Biz sütunlar bölünebilir istiyorum 25%/75% , küçük cihazlar için.
Öneri: küçük cihazlar 991 piksel 768 piksel bir ekran genişliğe sahip olan olarak tanımlanır.
Küçük cihazlar için biz kullanacağız .col-sm-* sınıfları.
Bizim iki sütun için aşağıdaki sınıflar katacak:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>Şimdi Bootstrap "küçük boyutta olan sınıflar için bakmak söyleyecek -sm- onlarda ve bu kullanmak".
Aşağıdaki örnek, bir neden olur 25%/75% küçük (ve orta ve büyük) cihazlarda bölünmüş. Ekstra küçük cihazlarda, otomatik yığını olacak (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> Kendin dene " Not: toplamı her zaman 12 kadar kattığından emin olun.
Bir% 33,3 /% 66.6 bölünme için kullanırsınız .col-sm-4 ve .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> Kendin dene " Bir sonraki bölümde orta cihazlar için farklı bir bölme yüzde nasıl ekleneceğini gösterir.