Özgür Özer

Junior full stack developer

Bootstrap: Izgara Sistemi

Bir önceki yazımızda bir Bootstrap projesine başlarken kullanabileceğimiz genel kod yapısını en basit haliyle görmüştük. Bugün ise Bootstrap’in sunduğu özellikler arasında en çok kullanacağımız ızgara sistemini tanıyacağız.

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 ama ilerleyen zamanlarda Customize bölümünden kolon sayısını ve diğer parametreleri nasıl özelleştirebileceğimizi de ayrıca göreceğiz.

Kapsayıcı

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>

Izgara özellikleri

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.

Bu ön ekleri aklımızda tutabilmenin en iyi yolu harflerin açılımlarını bilmekten geçiyor.

.col-xs-* (extra small) - ekstra küçük cihazlar (telefonlar)
.col-sm-* (small) - küçük cihazlar (tabletler)
.col-md-* (medium) - orta boylu cihazlar (netbook’lar)
.col-lg-* (large) - geniş cihazlar (masaüstüler)

Izgara sistemini tek bir çözünürlük için kullanabileceğimiz gibi, 4 farklı çözünürlükte için de kullanabiliriz. Şimdi bazı denemeler yaparak sistemi anlamaya çalışalım.

Geniş monitörler için örnek

Sadece geniş monitörler için bir tasarım yaptığımızı düşünelim. Bunun için seçeceğimiz sınıf ön eki .col-lg-* olacaktır. Sınıf ön ekinden sonra gelen * yerine, HTML elemanımızın o satırda sahip olacağı toplam kolon sayısını belirtmemiz, her bir farklı satır için ise .row sınıfını kapsayıcı eleman olarak kullanmamız gerekiyor.

Bir satırda toplam 12 kolon olması gerektiği için, aslında her satırda sınıf ön eklerinin sonundaki miktarların toplamını 12’ye tamamlamaya çalışıyoruz.

<!-- lg => 2 + 4 + 4 + 2 = 12 -->
<div class="row">
	<div class="col-lg-2">.col-lg-2</div>
	<div class="col-lg-4">.col-lg-4</div>
	<div class="col-lg-4">.col-lg-4</div>
	<div class="col-lg-2">.col-lg-2</div>
</div>

<!-- lg => 3 + 6 + 3 = 12 -->
<div class="row">
	<div class="col-lg-3">.col-lg-3</div>
	<div class="col-lg-6">.col-lg-6</div>
	<div class="col-lg-3">.col-lg-3</div>
</div>

<!-- lg => 8 + 4 = 12 -->
<div class="row">
	<div class="col-lg-8">.col-lg-8</div>
	<div class="col-lg-4">.col-lg-4</div>
</div>

Sadece geniş monitörleri baz aldığımız için tarayıcının boyu küçültüldüğünde her bir kolon genişliğinin ekranın tamamını (%100) kapladığını görüyoruz. Hem geniş monitörler, hem de orta boylu monitörler için 2 farklı kolon düzeni oluşturmak istersek <div class="..."></div> içerisine 2 farklı tanımlama yapmamız gerekir.

Geniş ve orta boylu monitörler için örnek

Geniş monitörlerde bir satırda 4 kolon, orta boylu monitörlerde ise bir satırda 2 kolon göstermek istediğimizi düşünelim.

<!-- md => 6 + 6 = 12 -->
<!-- lg => 3 + 3 + 3 + 3 = 12 -->
<div class="row">
	<div class="col-md-6 col-lg-3">col-md-6 .col-lg-3</div>
	<div class="col-md-6 col-lg-3">col-md-6 .col-lg-3</div>
	<div class="col-md-6 col-lg-3">col-md-6 .col-lg-3</div>
	<div class="col-md-6 col-lg-3">col-md-6 .col-lg-3</div>
</div>

Sınıf ön eklerinin sonundaki miktarların toplamının 12’yi geçmesi durumunda, 12’den sonra gelen kolonlar yeni bir satırda görünürler. Biz orta boylu monitörlerin her satırında 2 kolon olmasını istediğimiz ve elimizde de toplam 4 div olduğu için, ilk 2 div ilk satırda, diğerleri de o satıra sığamadıkları için yeni bir satırda görünürler.

Tüm monitörler için örnek

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>

Aynı kolon genişliğinin birden fazla çözünürlükte etkin olmasını istersek (.col-md-3.col-lg-3), her çözünürlük için ayrı ayrı tanım yapmak yerine, monitör ebatlarından daha küçük olanı tanımladığımızda, büyük olan monitör de aynı değeri almış olur.

Ekstra küçük ve küçük boyutlu ekranlarda bir satırda 2 kolon, orta ve geniş ekranlarda ise bir satırda 4 kolon olmasını istiyoruz.

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

<!-- Bunun yerine -->
<div class="row">
	<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">col-xs-6 col-sm-6 col-md-3 col-lg-3</div>
	<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">col-xs-6 col-sm-6 col-md-3 col-lg-3</div>
	<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">col-xs-6 col-sm-6 col-md-3 col-lg-3</div>
	<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">col-xs-6 col-sm-6 col-md-3 col-lg-3</div>
</div>

<!-- Bunu kullanabiliriz -->
<div class="row">
	<div class="col-xs-6 col-md-3">col-xs-6 col-sm-6 col-md-3 col-lg-3</div>
	<div class="col-xs-6 col-md-3">col-xs-6 col-sm-6 col-md-3 col-lg-3</div>
	<div class="col-xs-6 col-md-3">col-xs-6 col-sm-6 col-md-3 col-lg-3</div>
	<div class="col-xs-6 col-md-3">col-xs-6 col-sm-6 col-md-3 col-lg-3</div>
</div>

Kolon ittirme

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

.col-xs-offset-* (extra small) - ekstra küçük cihazlar (telefonlar)
.col-sm-offset-* (small) - küçük cihazlar (tabletler)
.col-md-offset-* (medium) - orta boylu cihazlar (netbook’lar)
.col-lg-offset-* (large) - geniş cihazlar (masaüstüler)

Sadece sağ tarafa doğru ittirmek istediğimiz kolonlara, ittireceğimiz kolon miktarını belirtmemiz yeterli olacaktır.

Bir satırda 2 kolon olmasını istiyoruz ama ilk kolonla ikinci kolon arasında bir boşluk olmasını da istiyoruz.

<!-- 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>

Bir önceki örnekte olduğu gibi bu örnekte de 4 farklı çözünürlük için teker teker kolon tanımlaması ve ittirme yapmak yerine sadece 2 farklı çözünürlük için tanımlamalar yaptık. Kullanıcının sayfamıza giriş yaptığı ekran çözünürlüğüyle ilgili bir tanımlama yapmadıysak, Bootstrap varsayılan olarak o ebattan küçük çözünürlükler için yapılmış tanımlamaları uygular.

İç içe kolonlar

Bootstrap’le içe içe sonsuza kadar giden kolonlar inşa edebiliriz. Tek dikkat etmemiz gereken kural .row kapsayıcı elemanını unutmamak. Hemen basit bir örnekle nasıl olduğuna bakalım.

<div class="row">
	<div class="col-md-3">col-md-3</div>
	<div class="col-md-6">
		<div class="row">
			<div class="col-md-6">col-md-6</div>
			<div class="col-md-6">col-md-6</div>
		</div>
	</div>
	<div class="col-md-3">col-md-3</div>
</div>

Kolon içine gelen kolonların satır genişliği, ekran genişliği kadar değil kapsayıcısının genişliği kadardır.

Kolon sıralama

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-*.

Sıralama yapmak istediğimiz kolonları push ile ittirip pull ile çekeceğiz. Tabi böyle pek anlaşılır olmadığı için deneme yaparak anlamaya çalışalım.

3 kolonumuz olsun. Geniş monitörlerde yan yana görünmelerini, mobilden girildiğinde ise sağdaki kolonun en üstte çıkmasını istiyoruz.

<!-- 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>

Mobilde üstte gözükmesini istediğimiz sağ kolonu kodumuz içerisinde yukarı alıyoruz. Geniş monitörlerden girdiğimizde sıralama istediğimiz gibi olmuyor tabi ki. Geniş monitörlerde ekranın solunda gözüken sağ kolonunu push-9 diyerek 9 kolon ittirmek istediğimizi, ekranın sağında gözüken sol kolonunu ise pull-9 diyerek 9 kolon sola çekmek istediğimizi söylüyoruz. Ve Bootstrap istediğimiz sonucu bize veriyor.

Izgara sistemiyle ilgili aktaracaklarım şimdilik bu kadar. Takıldığınız yerlerde aşağıdaki yorum bölümünü kullanmayı unutmayın.