Bootstrap 4 Izgara Yığından yataya
Bootstrap 4 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">
<div class="row">
<div class="col-sm-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-warning">
<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ütuna .col-sm-4yayılır, 4 sütuna
.col-sm-6yayılır, 6 sütuna yayılır, vb.
Not:
Toplamın 12 veya daha az eklendiğinden emin olun (mevcut 12 sütunun tümünü kullanmanız gerekmez):
İ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">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Otomatik Düzen Sütunları
Bootstrap 4'te, tüm aygıtlar için eşit genişlikte sütunlar oluşturmanın kolay bir yolu vardır: yalnızca sayıyı kaldırın ve sınıfı yalnızca belirli sayıda
col öğesinde kullanın . Bootstrap, kaç sütun olduğunu tanıyacak ve her sütun aynı genişliğe sahip olacaktır. Boyut sınıfları, sütunların ne zaman duyarlı olacağını belirler :.col-size-*.col-size
<!-- Two columns: 50% width on all screens, except for extra small (100%
width) -->
<div class="row">
<div class="col-sm">1 of
2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four
columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3
of 4</div>
<div class="col-sm">4 of 4</div>
</div>