22 Aralık 2017 Cuma

BOOTSTRAP GRİD SİSTEMİ


Grid sistemi Bootstrapın temel taşıdır diyebiliriz.Çünkü tüm yapı bu sistem üzerine kurulmuştur.Grid ingilizce bir kelime olup Türkçe çevirisi ızgaradır.Toplamda maksimum 12 satır ve sütun oluştan ızgaraya benzer bir yapı olduğunda grid(ızgara) sistemi denir.



Resimde de gördüğünüz üzere bir satırda toplamda 12 birimlik alan yani 12 birimlik sütun oluşturabilir.Grid sistemiyle site tasarımlarında neyin nerede olacağını daha kolay şekilde ayarlayabiliriz bunun yanı sıra Grid sistemi bizlerin responsive tasarım yapmamıza olanak sağlayan bir yapıdır.

Bootsrap Grid Sistemi 3 ana yapıdan oluşur.Bunlar;

  1. Kapsayıcı(Container) :Bootstrap ızgara sisteminde satırların tam yerleşmesi için bir kapsayıcı elemana ihtiyacı vardır. Kapsayıcı eleman siteye yapısına göre iki farklı sınıf alır.
    • container : sabit genişlikteki sitelerde
    • container-fluid : esnek yapılı sitelerde
  2. Satırlar(Row): Her 12’li kolonu kapsayan bir kapsayıcıdır. Sağdan soldan eksi 15px ile ana kapsayıcının bıraktığı boşluğu doldurur, böylelikle kolonları aralarına konulan boşlukların sondaki kutuyu aşağı atması engellenmiş olur. kolonlar float:left ile yan yana dizildiği için satır aynı zamanda taşan kolonları satır başı yaptırmaya yarar.

  3. Sütunlar(Col): Her kolon 15px’lik sağ ve sol paddingleri vardır. Bu paddingler satır ile olan mesafeleri ayırmak için eklenmiştir. Bu her kolon için aynı etkiyi yapacaktır ve yan yana kullanılan kolonlar arasındaki mesafe 30px olacaktır.




Hiç yorum yok:

Yorum Gönder

WEB TASARIM'DA PÜF NOKTALAR

Web sitesi tasarımınıza başlamadan önce, siteniz ile ilgili bir ön hazırlık yapmanız siteninizin çok daha iyi olmasına sebep olur. S...