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

Ramazan Bıyıkcı

Merhaba! Ben Ramazan. Medya Planlama ve Dijital Pazarlama Uzmanıyım. Çağımız medya çağı, hayatımızın bir çok alanı online olmuş durumda. Bu süreçte bende marka ve kurumların dijital ihtiyaçlarını karşılayacak şekilde planlamalar yapmaktayım. Bir çok markanın dijital pazarlama alanındaki online faaliyetlerini sürdürmekteyim. Farklı uzmanlık alanlarında çalışarak halen kendimi sürekli yenileyerek geliştirmekteyim.

Yorum Yap

Ramazan Bıyıkcı

"Merhaba! Ben Ramazan. Medya Planlama ve Dijital Pazarlama Uzmanıyım. Çağımız medya çağı, hayatımızın bir çok alanı online olmuş durumda. Bu süreçte bende markaların dijital ihtiyaçlarını karşılayacak şekilde planlamalar yaparak ve bir çok markanın dijital pazarlama alanındaki faaliyetlerini sürdürmekteyim. Farklı görevler ve farklı uzmanlık alanlarında çalışarak halen kendimi sürekli yenileyerek geliştirmekteyim."