Bootstrap Grid Yapısı

Izgara sistemini bir web sayfasının yatay olarak eşit parçalara bölünmüş hali olarak tanımlayabiliriz. Bootstrap bize varsayılan olarak 12 kolonlu bir ızgara sistemi sunar.

Bootstrap ile kullanabileceğimiz 2 farklı kapsayıcı var.

<!-- Çalışma alanımız ekran genişliğinin tamamı (%100) kadar olacaksa -->
<div class="container-fluid">
	<div class="row">
		...
	</div>
</div>

<!-- Çalışma alanımız Bootstrap tarafından belirlenen miktar kadar olacaksa -->
<div class="container">
	<div class="row">
		...
	</div>
</div>

Bootstrap ile 4 farklı ekran çözünürlüğü (4 farklı cihaz) için 4 farklı tasarım üretebiliriz. Bunun için ilk öğrenmemiz gereken şey HTML yazarken kullanacağımız sınıf ön ekleri. Aşağıdaki tabloda yüzeysel bir biçimde ihtiyacımız olan sınıf ön eklerini görebiliriz.

Bir <div class="..."></div> içerisine 4 farklı monitör için kolon tanımı yapabiliriz.

<!-- xs => 6 + 6 = 12 -->
<!-- sm => 4 + 4 + 4 = 12 -->
<!-- md => 3 + 3 + 3 + 3 = 12 -->
<!-- lg => 2 + 2 + 2 + 2 + 2 + 2 = 12 -->

<div class="row">
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">col-xs-6 col-sm-4 col-md-3 col-lg-2</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">col-xs-6 col-sm-4 col-md-3 col-lg-2</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">col-xs-6 col-sm-4 col-md-3 col-lg-2</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">col-xs-6 col-sm-4 col-md-3 col-lg-2</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">col-xs-6 col-sm-4 col-md-3 col-lg-2</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">col-xs-6 col-sm-4 col-md-3 col-lg-2</div>
</div>

Bazı durumlarda kolonlar arasında boşluklar bırakmak isteyebiliriz. Bize bu konuda yardımcı olacak sınıf ön eki .col-*-offset-*.

<!-- xs => 5 + 2 + 5 = 12 -->
<!-- sm => 5 + 2 + 5 = 12 -->
<!-- md => 4 + 4 + 4 = 12 -->
<!-- lg => 4 + 4 + 4 = 12 -->

<div class="row">
	<div class="col-xs-5 col-md-4">col-xs-5<br>col-md-4</div>
	<div class="col-xs-5 col-xs-offset-2 col-md-4 col-md-offset-4">xs-offset-2<br>md-offset-4</div>
	<div class="col-xs-5 col-md-4">col-xs-5<br>col-md-4</div>
	<div class="col-xs-5 col-xs-offset-2 col-md-4 col-md-offset-4">xs-offset-2<br>md-offset-4</div>
</div>

Kolonlarla ilgili en sevdiğim özelliklerden biri de onları farklı çözünürlüklerde yeniden sıralayabilmek. Kullanacağımız sınıf ön ekleri .col-*-push-* ve .col-*-pull-*.

<!-- Geniş monitörler tamam ama mobilde istediğimiz görüntüyü oluşturamıyoruz -->
<div class="row">
	<div class="col-md-3">sol</div>
	<div class="col-md-6">orta</div>
	<div class="col-md-3">sağ</div>
</div>

<!-- Mobil tamam ama geniş monitörlerde istediğimiz görüntüyü oluşturamıyoruz -->
<div class="row">
	<div class="col-md-3">sağ</div>
	<div class="col-md-6">orta</div>
	<div class="col-md-3">sol</div>
</div>

<!-- Boostrap dokunuşu -->
<div class="row">
	<div class="col-md-3 col-md-push-9">sağ</div>
	<div class="col-md-6">orta</div>
	<div class="col-md-3 col-md-pull-9">sol</div>
</div>