Bootstrap İle Web Site Yapmak Bölüm-2

http://getbootstrap.com adresindeki bootstrap sayfamızın CSS sekmesine geçelim. 

Daha önceki bootstrapla ilgili aşağıdaki makaleleri de 
inceleyebilirsiniz.

Twitter Bootstrap Nedir ve Nasıl Kullanılır? Bölüm-1
Twitter Bootstrap Nedir ve Nasıl Kullanılır? Bölüm-2

Bootstrapta yapacağımız web sayfalarımız responsive yani duyarlı olacaktır. Bunu sağlayan da index sayfamıza eklediğimiz meta etiketleridir. Bu sayade tarayıcımız sitemizi hangi cihazda (telefon, tablet, dizüstü, masaüstü) açarsa açsın sitemiz o cihazın ebadına göre şekillenecektir.

Birinci Bölümde index dosyamıza eklediğimiz meta etiketlerini biraz açıklayalım. 

<meta name="viewport" content="width=device-width, initial-scale=1">

• user-scalable=no  etiketinin anlamı; dokunmatik ekranlarda sayfayı parmağımızla küçültüp büyültme yapılmasını istemiyorsak, yukarıdaki meta etiketine  user-scalable=no etiketinide eklememiz gerekmektedir.
• maximum-scale=1 etiketininin anlamı; büyütme işlemini bir kere yapabiliyoruz. Daha fazla büyütmek için 1 yerine 2 yazabiliriz.
• initial-scale=1 etiketinin anlamı; sayfa ilk açıldığında görülen zoomlamadır. Bunu 2 yaptığımızda sayfamız büyütülmüş şekilde açılacaktır.

İndex sayfamızı oluşturduktan sonra CSS sekmesine girebiliriz. Bu sekmede sağ tarafta sıralanmış sitemiz için kullanacağımız bölümler var. Örneğin; sitemizde tablo kullanacaksak sağ taraftaki listeden tabloları seçtiğimizde sayfada kullanacağımız tablo şekilleri var. Beğendiğimiz tablonun altındaki kodu sitemize ekleyerek istediğimiz tablo şeklini oluşturabiliyoruz.  Sayfanın altına doğru sitemizde ki satırlarda ve sütunlarda kullanacağımız etiketlerinde mevcut olduğunu görüyoruz.

Şimdi sayfamızın sağ tarafındaki Grid (ızgara) sisteme tıklayarak bootstrapta grid sistemin nasıl kullanıldığına bakalım.

Grid sistemi satır ve sütunlardan oluşmuş bir sayfa düzenidir. Bootstrapt grid sisteminde her satır 12 sütündan oluşmaktadır. Fazla sütunlar bir alt satıra kaydırılır. Kullandığınız cihaz ne olursa olsun bootstrap her satırı 12 sütüna ayırıyor. Yani cihazınız 768 px de olsa 1200 px de olsa her satır 12 sütun olarak tanımlanıyor. 

Örneğin; sayfamız 2 sütünlu olacaksa 8+4=12, 5+7=12, 10+2=12 gibi olur. Yani herhalükarda 12 kolondan fazla olmaz. Aşağıdaki şekle bakarsak bunu daha iyi anlamak mümkündür.

Grid sistemine göre kullanacağımız kodlar ise aşağıda verilmiştir.

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Yukarıdaki kodları aşağıdaki bir container yapısı içinde kullanmak gerekmektedir.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Cihazlar göre sayfamızda kullanacağımız kodlar ise aşağıda ki gibi olacaktır.