Bootstrap Uygulama Örnekleri-Grid Sistemi Uygulaması

Grid sistemi satır ve sütunlardan oluşmuş bir sayfa düzenidir. Bootstrap grid sisteminde her satır 12 sütündan oluşmaktadır. Fazla sütunlar bir alt satıra kaydırılır. 

Kullandığınız cihaz ne olursa olsun bootstrap, her satırı 12 sütüna ayırıyor. Yani cihazınız 768 px de olsa, 1200 px de olsa her satır 12 sütun olarak tanımlanıyor. 

Örneğin; sayfamız 2 sütünlu olacaksa 8+4=12, 5+7=12, 10+2=12 gibi olur. Yani herhalükarda 12 kolondan fazla olmaz. Aşağıdaki şekle bakarsak bunu daha iyi anlamak mümkündür.

Sayfa 2 sütünlu olacaksa 5+7=12, 8+4=12, 10+2=12 gibi olur. 12 den fazla olursa sütun bir alt satıra kayar.

Bootstrap grid (ızgara) sisteminde 4 sınıf vardır:

• Telefonlar için.......... xs  ....  Kullanacağımız kod: col-xs-
• Tabletler için............sm  ....         "                "  : col-sm-
• Masaüstü için...........md ....         "                "  : col-md-
• Büyük masaüstü için. lg  ....         "                " :  col-lg-

Aşağıdaki örnek de; div telefon boyutuna geçtiğinde 2 birimlik alan, tablet moduna geçtiğinde 4 birimlik alan, masaüstünde 6 birimlik alan ve daha büyük masaüstünde de 12 birimlik alanı kaplasın demiş oluruz. 

<div class="col-xs-2 col-sm-4 col-md-6 col-lg-12"></div>

Her birimin boyutu ise kapsayıcı dive göre hesaplanır. Örneğin; kapsayıcı div (container) 1200 px ise içinde her bir birimin boyutu 100 px demektir.

Örnek kodlar aşağıya çıkarılmıştır:

<div class="container"
<div class="row">
  
  <div class="col-md-1 col">.col-md-1</div>
  <div class="col-md-1 col">.col-md-2</div>
  <div class="col-md-1 col">.col-md-3</div>
  <div class="col-md-1 col">.col-md-4</div>
  <div class="col-md-1 col">.col-md-5</div>
  <div class="col-md-1 col">.col-md-6</div>
  <div class="col-md-1 col">.col-md-7</div>
  <div class="col-md-1 col">.col-md-8</div>
  <div class="col-md-1 col">.col-md-9</div>
  <div class="col-md-1 col">.col-md-10</div>
  <div class="col-md-1 col">.col-md-11</div>
  <div class="col-md-1 col">.col-md-12</div>
  
</div>
<br>

<div class="row">
  <div class="col-md-8 col">.col-md-8</div>
  <div class="col-md-4 col">.col-md-4</div>
</div>  
 <br>

<div class="row"> 
  <div class="col-md-4 col">.col-md-4</div>
  <div class="col-md-4 col">.col-md-4</div>
  <div class="col-md-4 col">.col-md-4</div>
 
 </div> 
 <br>

<div class="row">
  <div class="col-md-6 col">.col-md-6</div>
  <div class="col-md-6 col">.col-md-6</div>
</div>  
 <br>

<div class="row">
  <div class="col-md-4 col">.col-md-8</div>
  <div class="col-md-8 col">.col-md-4</div>
</div>  
<br>

<div class="row">
  <div class="col-md-10 col">.col-md-10</div>
  <div class="col-md-2 col">.col-md-2</div>
</div>  

GÖRÜNTÜLE:

İNDİR:

Bootstrapta grid sistemi uygulamasını aşağıda ki videodan veya youtube kanalımdan görsel olarak izleyebilirsiniz.