Bootstrap Izgara (Grid) Sistemi

Bootstrap grid sisteminde üç temel yapı vardır. Bunlar container, row ve col kolonlarıdır.

Container sınıfı bootstrapteki en temel sınıflardan biridir ve kapsayıcı görevi görür. Satırların tam olarak yerleşmesi için bu yapıya ihtiyaç vardır. Container kendi içinde container ve container-fluid olarak ayrılmaktadır. Container sınıfı bootstrapteki kırılma noktalarına yani ekran boyutlarına göre değişiklik gösterir. Containerfluid ise her zaman %100 genişliktedir.

Bir diğer yapı rowlar yani satırlardır. Satırlar, sütunlar için sarmalayıcı görevi görür ve satırların içerisinde içeriğimizin bulunacağı sütunlar yani collar bulunmaktadır.

Bu yapı htmlde kodlandığında aşağıdaki gibi bir yapı ortaya çıkmaktadır.

<div class="container">
  <div class="row">   
    <div class="col">
    </div>
    <div class="col">
    </div>
    <div class="col">
    </div>
  </div>
</div>

Bootstrap grid sisteminde responsive(duyarlı) tasarım yapabilmek için 12’li grid sistemi kullanılır. Her satır 12 parçaya bölünebilmektedir. İsterseniz bu 12’lik kısmı 3-3-6 / 2-2-8 / 6-6 / 1-11 / 1-2-9 şeklinde istediğiniz şekilde parçalayarak kullanabilir ya da 12’lik bir bütün olarak kullanabilirsiniz. Aşağıdaki kod buna örnektir.

<div class="container">
  <div class="row">   
    <div class="col-3">
    </div>
    <div class="col-9">
    </div>
  </div>
</div>

Bootstrap grid sistemi ile ilgili bilinmesi gereken bir diğer nokta ise kırılma noktalarıdır. Bootstrapte 5 adet kırılma noktası bulunmaktadır.

Extra Small noktası telefonların dikey konumda kullanıldığındaki ekran boyutudur. Small noktası telefonların yatay konumda kullanıldığındaki ekran boyutudur. Medium noktası tabletlerin dikey konumda kullanıldığındaki ekran boyutudur. Large noktası tabletlerin yatay konumda kullanıldığındaki ekran boyutudur. Extra Large noktası bilgisayar ve televizyonların ekran boyutudur.

Bir kırılma noktasına uyguladığınız değer diğer kırılma noktası değerlerine de etki eder. Örneğin col-6 olarak verdiğiniz değer large kırılma noktasında da 6 sütunluk yer kaplayacaktır.

Bu kırılma noktalarını tek tek kullanabileceğiniz gibi hepsini aynı anda bir dive uygulayabilirsiniz. Hepsini aynı anda uyguladığınız zaman her ekran boyutu değiştiğinde verdiğiniz sütun değerine göre içeriğiniz şekillenecektir.

<div class="col-4">
</div>
<div class="col-5 col-sm-4 col-md-6 col-lg-8 col-xl-2">
</div>

Furkan Aktaş

Bilgisayar Mühendisiyim. Microsoft MCSA Web Applications Sertifikasına Sahibim. Aktif iş hayatımda Full Stack .Net Developer olarak çalışmaktayım.

Bir cevap yazın

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