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.
9856 kez okundu.