BootStrap-4 Grid Sistemi

BootStrap 4 Grid Sistemi

BootStrap 4 versiyonu ile grid sistemi de geliştirilmiş ve yeni özellikler katılarak daha işlevsel hale getirilmiştir. 

BootStrap3 versiyonunda 4 ekran modu (xs, sm, md ve lg) kullanılırken 4 versiyonunda 5 farklı sınıf kullanılmıştır. 

col- : Ekstra küçük ekranlar, telefonlar vb. (576 px’den daha küçük ekranlar)
col-sm- : 576 px ve daha büyük ekranlar için kullanılır.
col-md- : 768 px ve daha büyük ekranlar.
col-lg- : 992 px ve daha büyük ekranlar.
col-xl- : 1200 px’ten daha geniş ekranlar.

BootStrap 3'te yer alan xs sınıfının kalktığını fark etmişsinizdir.

Grid sisteminin kullanım mantığı bir önceki konuda anlatılan BootStrap 3 grid sistemi ile aynıdır. Ama ek kullanım yöntemleri de eklenmiştir.

Çeşitli örnekler ile BS4 grid sistemini tanıyalım.

<div class="row">
  <div class="col-sm-4"></div>
  <div class="col-sm-4"></div>
  <div class="col-sm-4"></div>
</div>

Yukarıdaki örnekte 3 div elemanı sm ve daha büyük ekranlarda yan yana yerleşecek ve eşit genişliğe sahip olacaklardır. col-sm-4 ifadesindeki 4 o satırın genişliğinin 12'de 4'ünün o elemana ayrılacağını belirtmektedir. Bunu önceki konumuzdan biliyoruz.

Ayrıca col-sm-4 sınfında belirtilen ekran sınıfı sm olduğunda ve daha büyük ekranlar için birşey de belirtilmediğinden bu sınıf sm'den daha büyük ekranlar için de geçerlidir.

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Yukarıdaki gibi bir kullanım BootStrap 4 ile gelen bir yeniliktir. Div elemanlarına sadece .col sınıfı uygularsak, satır (row) içindeki div sayısına göre hepsi eşit genişlikte olacak şekilde otomatik olarak ayarlanır. 

Örnekte 4 tane div elemanına col sınıfı uygulandığına göre her biri %25 genişliğe sahip olacaktır. Ayrıca ekran sınıfı belirtilmediği için en küçükten en büyüğe tüm ekran genişliklerinde bu aynı olacaktır.

<div class="row">
  <div class="col-2"></div>
  <div class="col-8"></div>
  <div class="col-2"></div>
</div>

Yukarıdaki gibi col-* şeklindeki kullanım da BS4'ün yeniliğidir. xs sınıfı kaldırıldığı için en küçük ekranlardaki yerleşim yukarıdaki gibi ayarlanabilir.

<div class="row">
  <div class="col-sm-6 col-lg-4"></div>
  <div class="col-sm-6 col-lg-4"></div>
  <div class="col-lg-4"></div>
</div>

Yukarıdaki örneğin nasıl çalışacağını tüm ekran sınıfları için ayrı ayrı açıklayalım:

  • Ekstra küçük ekranlar - (576 px’den daha küçük ekranlar): Div'lere bu ekran türü için bir sınıf uygulanmadığı için 3 div alt alta yerleşir. 
  • Sm - small (576 px ve daha büyük ekranlar): İlk 2 div yan yana yerleşip %50 genişliğe sahip olacaklar, 3. div ise alta geçecek ve %100 genişliğe sahip olacaktır. Çünkü 3. div'e small ekranlar için bir sınıf uygulanmamıştır.
  • Md - medium (768 px ve daha büyük ekranlar): 3 div elemanına da md ekranlar için özel bir sınıf uygulanmamıştır. Bu durumda daha küçük sınıfların en yakını için uygulanan sınıf geçerli olacaktır. Yani ilk 2 div yan yana ve %50, 3. div ise altta ve %100 genişlik kaplar.
  • Lg - large (992 px ve daha büyük ekranlar): 3 div'e de lg ekranlar ile ilgili col-lg-4 sınıfı uygulandığı için yan yana yerleşirler ve %33.3 genişlik kaplarlar.
  • xl - extra large (1200 px’ten daha geniş ekranlar): xl ekranlar için bir sınıf uygulanmadığı için col-lg-4 sınıfı geçerli olur ve 3 div yan yana yerleşir.

 

bootstrap 4 grid sistemindeki yenilikler, bootstrap grid sistemi örnekleri, bootstrap 3 ile bootstrap 4 arasındaki farklar neler, bootstrap 4 sayfa tasarım örnekleri

KONU İLE İLGİLİ ÖRNEKLER

Bu konu ile ilgili örnek bulunmamaktadır.



YORUMLAR




706  kez okundu.

Online Kullanıcı Sayısı 100