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. 

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.

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.

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.

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.

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.

KONU İLE İLGİLİ ÖRNEKLER