Bootstrap Grid (Izgara) Sistemi

Bootstrap İle Izgara Sisteminin Kullanılması

Tasarımını yaptığımız sayfayı diklemesine olacak biçimde parçalara ayırabiliriz. Izgara sisteminde sütunları 12 parçaya kadar ayırmak mümkün hale geliyor. Bu durum bize kullandığımız yapıların sayfada ne kadarlık alan kaplayacağı konusunda büyük fayda sağlar. Örnek olarak içerik ve sidebar kısımlarını ele alalım. Sayfanın ne kadarlık kısmını içeriğe ne kadarlık kısmını sidebar’a ayıracağımıza bu sayede rahatlıkla karar verebiliriz.

Bootstrap’te 12 sütunu ayrı ayrı kullanmak yerine bir grup halinde de kullanabilirsiniz. Bu sayede daha geniş alanlar meydana gelir.

bootstrap grid

Yukarıdaki resim ızgara sisteminin nasıl kullanılacağı hakkında fikir verebilir. Sütunlar ilk satırda 12’ye bölündü ve her biri eşit 12 tane <span> kullanıldı. İkinci satırda birbirine eşit genişlikte üç <span> etiketine yer verildi. Üçüncü satır ise birbirine eş olmayan iki <span> etiketinden oluşmakta. Dilersek son satırdaki gibi ekranın tüm genişliğini de kullanabiliriz.

Izgara sistemi responsive yapıdadır. Sütunlar ekran genişliğine göre otomatik olarak yeniden düzenlenir. Bunun yanında farklı cihazlar için (bilgisayar, tablet, telefon) ızgara sistemini ve genişlikleri değiştirebiliriz.

Grid Sınıfları

Izgara sistemi için 4 sınıf kullanılmaktadır.

  • xs – telefonlar için
  • sm – tabletler için
  • md – masaüstü bilgisayarlar için
  • lg – daha geniş ekranlar için

Belirtilen dört sınıf birlikte kullanılabilir. Örneğin telefonlar için bir <div> elemanına ekranın yarısı kadar genişlik verirken, bilgisayarlar için ekranın tümünü kullanmasını isteyebiliriz.

Izgara Sisteminin Kullanımı

Yukarıdaki örnekte ilk olarak “row” sınıfı ile yeni bir satır oluşturduk. Ardından toplamları 12’yi geçmemek üzere istenildiği kadar sütun eklenebilir. Kullandığımız sınıftaki birinci “*” ile gösterilen alan, grid sınıflarını belirteceğimiz yer olacak. İkinci kısımda ise alacağı genişlik değeri belirtilecek.

Birkaç örnek ile nasıl kullanabileceğimizi görelim. Önce ızgara sistemiyle ekranı üç eşit parçaya bölelim.

<head> etiketleri arasında kullanacağımız dosyaları çağırdık ve üç eşit sütun oluşturduk. sm sınıfının tabletler ve daha geniş ekranlar için geçerli olduğunu belirtmiştik. Bu örneği telefon ekranı genişliğinde deneyecek olursanız sütunların üst üste yığıldıklarını görebilirsiniz.

Bir sonraki örnekte ise telefonlar ve daha geniş ekranlar için geçerli olacak bir yapı kullanalım. İki farklı genişlik değeriyle iki <div> oluşturalım.

Bu örnekte, tarayıcıyı telefon ekranı genişliğe getirdiğinizde dahi aralarındaki oranın korunduğu göreceksiniz.

bootstrap ızgara sistemi

Bir Yorum

  1. Mahmut

Yorum Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

error: