Bootstrap 4 Grıd Yapısı 2 - Gelişmiş Düzen

Değişken Genişlikli Sütun - col-*-auto

Grid(ızgara) sisteminde değişken genişliğe sahip sütun oluşturmak da mümkündür. Bunun için
col-md-auto etiketi kullanılır, böylelikle diğer sütunların genişlikleri sabit kalırken auto olan sütun içindeki veriye göre genişler veya daralır. auto olan divin genişliği diğer sütunlar ile birlikte 12 yi aşarsa, tek başına bir alt satıra inerek 12 büyüklüğünde bir sütun oluşturur. Diğer sütunlar da konumlarını değişken genişlikli sütuna göre alırlar.

Sütunları Yatayda Hizalama - justify-content-*

Grid(ızgara) yapısında ufak eklemelerle daha farklı sonuçlar elde edilebilir. Örneğin sütun genişliğimiz toplamda 12 olması gerekirken biz 9 kullandık, dolayısıyla 3 genişliğindeki bir alan boş kalacaktır. Bu boş alana göre sütunlarımızı hizalama yapabiliriz. Bunun için row'un bulunduğu div e
div'leri ortalamak için => justify-content-center
div'leri sola yaslamak için => justify-content-start
div'leri sağa yaslamak için => justify-content-end
div'leri genişliğine göre aralarında boşluk bırakmak için => justify-content-between
div'leri genişliğine göre etrafında ve aralarında boşluk bırakmak için => justify-content-around
değerleri verilir.

Sütunları Dikeyde Hizalama - align-items-* / align-self-*

Bootstrap 4'te dikey hizalama işlemleri 2 şekilde yapılabir. İlk yöntem row 'un içine yerleştirilmiş olan tüm sütunları üst orta veya alt değerlerinde dikey olarak konumlandırır.
Sütunları dikey olarak üstte konumlandırmak için => align-items-start
Sütunları dikey olarak ortada konumlandırmak için => align-items-center
Sütunları dikey olarak altta konumlandırmak için => align-items-end
değerleri verilir.
2.yöntem ise tek bir sütunun dikeydeki hizalamasını değiştirmektir. Bunun için istenilen sütuna
dikey olarak üstte konumlandırmak için => align-self-start
dikey olarak ortada konumlandırmak için => align-self-center
dikey olarak altta konumlandırmak için => align-self-end
değerlerini col değerinden sonra yazmak yeterlidir.

Sütunları Etrafında Boşluklar ile Konumlandırma - offset-md-*

offset ile sütunun sol tarafında istenilen genişlikte boşluk bırakılması sağlanır.
Örneğin, col-md-6 offset-md-3
özelliği verildiğinde sol tarafında 3 genişliğinde boşluk bulunan 6 genişliğinde bir sütun oluşturulmuş olur.
Örnekleri incelediğinizde konuyu çok daha rahat anlayabilirsiniz.


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın