Bootstrap Izgara Örnek: Yığın-için-yatay
Biz dışarı cep / tablet üzerinde yığılmış başlar temel bir ızgara sistemi yaratacaktır (small devices) masaüstü yatay olmadan önce, (medium/large devices) .
Aşağıdaki örnek, basit gösterir "stacked-to-horizontal" o otomatik yığını olacak ilave küçük ekran haricinde tüm ekranlarda% 50 /% 50 bölünmesine neden olur, yani iki sütunlu bir düzen (100%) :
col-sm-6
col-sm-6
Örnek: Yığın-için-yatay
<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>
Kendin dene " İpucu: sayılar .col-sm-*
sınıflar div yayılan kaç sütun gösterir (out of 12) . Bu nedenle, .col-sm-1
açıklıklı 1 kolonu, .col-sm-4
açıklıklı 4 sütun, .col-sm-6
vb açıklıklı 6 sütun,
Not: toplamı her zaman 12 kadar kattığından emin olun!
İpucu: değiştirerek tam genişlikli düzeni içine herhangi bir sabit genişlikli düzeni açabilirsiniz .container
için sınıf .container-fluid
:
Örnek: bir 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>
Kendin dene "