Önyükleme Izgarası - Yığından yataya
Önyükleme Izgara Örneği: Yığından yataya
Daha büyük cihazlarda yatay hale gelmeden önce, ekstra küçük cihazlarda yığılmış olarak başlayan temel bir ızgara sistemi oluşturacağız.
Aşağıdaki örnek, basit bir "yığından yataya" iki sütunlu düzeni gösterir; bu, otomatik olarak istifleneceği (%100) ekstra küçük ekranlar dışında tüm ekranlarda %50/%50 oranında bölünmeyle sonuçlanacağı anlamına gelir:
Örnek: Yığından yataya
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
İpucu: Sınıflardaki sayılar .col-sm-*, div'in kaç sütuna yayılması gerektiğini (12 üzerinden) gösterir. Bu nedenle, .col-sm-11 sütunu .col-sm-4kapsar, 4 sütunu
.col-sm-6kapsar, 6 sütunu kapsar, vb.
Not: Toplamın her zaman 12'ye ulaştığından emin olun!
İpucu: Sınıfı şu şekilde değiştirerek herhangi bir sabit genişlikli düzeni tam genişlikli bir düzene dönüştürebilirsiniz :.container.container-fluid
Örnek: Sıvı kabı
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>