1 Yıldız2 Yıldız3 Yıldız4 Yıldız5 Yıldız (1 Kişi oy verdi, 5 üzerinden ortalama puan: 5,00.
Bu yazıya oy vermek ister misiniz?)
Loading...
Bootstrap

Bootstrap Grids

Bootstrap’ın grid(ızgara) sistemi sayfa boyunca 12 sütuna izin verir. Eğer istenirse sayfanın genişliği boyunca 12 sütunu kaplayacak şekilde tek bir sütun oluşturulabilir. Bununla birlikte daha küçük gruplara bölünmüş sütunlar birleştirilebilir. Bootstrap’ın grid sisteminin nasıl oluştduğu ve sütunların nasıl gruplara bölündüğü aşağıda’da görülmektedir.

Bootstrap Grid sistemi

Bootstrap Grid sistemi

Bootstrap Grid sistemi sayfa genişliğini 100% olarak değerlendirip maksimum 12 sütuna bölme imkanı sunan yapıya dayanır. 100%/12 sütun = 8.33 % olmak üzere her bir sütun bu genişlik değerine sahip olur. aşağıda’da görüldüğü gibi .col-12 class’ı atanmış bir elementin genişliği 100% olacak, .col-6 class’ı atanmış bir elementin genişliği 50% olacaktır.

Bootstrap Grid sistemi css

Grid Sınıflar

Bootstrap grid sisteminde 4 class mevcuttur.

  • xs (telefonlar için)
  • sm ( tabletler için)
  • md (masaüstü için)
  • lg (geniş masaüstü için)

Belirtilen classlar daha dinamik ve esnek düzenler oluşturmak için kombine edilebilir.

Bootstrap Grid’in Temel Yapısı

grid-temel-yapisi

Bootstrap grid’in temel yapısı

İlk olarak class=”row” kullanılarak bir satır elementi oluşturulur. Daha sonra istenilen sayıda sütun oluşturulu .col-*-* şeklinde sınıflarla. Bu şekilde tanımlanan sınıfların toplam col değeri her satır için her zaman 12 olmalıdır.

3 Eşit Sütun

Aşağıda’da sayfanın 3 eşit sütuna bölünmesi ile ilgili örnek görülmektedir. Bu örnekte yer alan genişlikler tabletler için başlayarak geniş masaüstüne ölçeklenebilir.
grid-3

grid-3-css

3 eşit sütun örneği

2 Eşit Olmayan Sütun

Şekil-11’de 4 ve 8 ölçekli iki eşit olmayan sütuna bölünmesi ile ilgili örnek görülmektedir.

col-2-sutun

col-2-sutun-css

Eşit olmayan sütun örneği

Yorum Yap