Bootstrap Izgara Örnek: Orta Aygıtları
Bir önceki bölümde, küçük cihazlar için sınıfları ile ızgara örneği sundu. Biz iki div'ler kullanılan (columns) ve biz onlara verdi 25%/75% bölünmüş:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>Ancak orta cihazlarda tasarım olarak daha iyi olabilir 50%/50% bölünme.
Öneri: Orta cihazlar 1199 piksel 992 piksel arasında bir ekran genişliğe sahip olan olarak tanımlanır.
Orta cihazlar için biz kullanacağız .col-md-* sınıfları.
Şimdi orta cihazlar için sütun genişliklerini katacak:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
Şimdi Bootstrap söyleyecek "küçük boyutta olan sınıflar bakmak -sm- onları ve bu kullanın. Orta büyüklükte anda, birlikte sınıfları bakmak -md- onları ve bu kullanmak".
Aşağıdaki örnek, bir neden olur 25%/75% , küçük cihazlarda yarılmış ve bir 50%/50% , orta ile bölünmüş (and large) cihazlar. 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
col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Kendin dene " Not: toplamı her zaman 12 kadar kattığından emin olun.
Sadece Orta kullanma
Aşağıdaki örnekte, sadece belirtmek .col-md-6 sınıfını (without .col-sm-* ) . Bu, orta ve büyük cihazlar bölünmüş anlamına gelir 50%/50% sınıfı ölçekler için -. Bununla birlikte, küçük cihazlar için, bu, dikey olarak monte olur (100% width) :
Örnek
<div
class="row">
<div class="col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
Kendin dene " Bir sonraki bölümde büyük cihazlar için farklı bir bölme yüzde nasıl ekleneceğini gösterir.