BootStrap-3 Grid Sistemi

BootStrap 3 Grid Sistemini Tanıyalım

BootStrap 3 versiyonu 4 temel görünüm için özellikler içerir.

• xs: Küçük ekranlar, telefonlar vb. (768 px’den daha küçük ekranlar) (extra small)
• sm: 768-992 px arası ekranlar. (small)
• md: 992-1200 px arası ekranlar. (medium)
• lg: 1200 px’ten daha geniş ekranlar (large)

Bootsrap, ekranın 12 birimden oluştuğunu varsayarak, nesnelerin yerleşimini kolayca yapmamızı sağlar. Ayrıca yukarıda belirtilen her ekran sınıfı için nesnelerin kaplayacağı genişliği ayrı ayrı belirtebiliriz.

Genişlikleri belirtmek için col- ifadesi ile başlayan hazır sınıflar bulunmaktadır. Örneğin col-sm-6 sınıfı, o nesnenin sm ekranlarda sayfanın yarısını (12’de 6’sı) kaplayacağını belirtir.

Buna göre sm ekranlarda iki div elemanını yan yana eşit genişlikte yerleştirmek istersek:

Yukarıdaki örnekte sm ekranlarda bu iki kutu yan yana gelir ve eşit genişlikte yer kaplar. Diğer ekranlar için bir şey belirtilmemiş olduğunda, bu belirttiğimiz genişlikler daha geniş ekranlarda da geçerli olur. Fakat daha dar ekranlarda geçerli olmaz.

Yani yukarıdaki iki kutu sm, md ve lg ekranlarda yan yana yerleşirken, xs ekranlarda alt alta gelecek ve herbiri 12 birim yani ekranın tamamını kaplayacaktır.

Bir nesnenin farklı ekran sınıflarında, farklı genişlikler kaplaması sağlanabilir. Örneğin;

Yukarıdaki div elemanı, xs ekranlarda 12 birim, sm ekranlarda 7 birim, md ve lg ekranlarda ise 5 birim genişlikte olacaktır.

Başka bir örnek;

Bu div ise xs ekranlarda 6 birim, sm ekranlarda 8 birim, md ve lg ekranlarda 9 birim genişliğinde olur.

Örnek: 3 adet div elemanımız olduğunu düşünelim. Bu divler xs ekranlarda alt alta yerleşsinler. Sm ekranlarda 2 div yan yana gelirken diğeri altta kalsın. Md ve lg ekranlarda ise 3 div yan yana gelsin.

*** col-*-* sınıflarının row sınıfı uygulanmış bir div içine alınmaları gerekir. Yani yukarıdaki örneğin çalışan hali şu şekilde olacaktır:

KONU İLE İLGİLİ ÖRNEKLER