En son web geliştirme öğreticiler
 

Bootstrap Grid - Stacked-to-horizontal


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 "