Bootstrap Grid System – Yerleşim Sistemi

Bootstrap Grid System – Yerleşim Sistemi yazım ile uzun bir aradan sonra ilk defa HTML konulu bir yazı ile karşınızdayım. Bu konuyu yazmamdaki amaç bu konudan bir kaç soru gelmesi oldu. er ne kadar sitesinde açıklamaları verilmiş olsa da İngilizcesi hiç olmayan arkadaşların anlaması zor oluyor. Bu sebeple bu konuda bir yazı yazmak istedim. Zaten html öğrenmeye yeni başlayan hemen herkesin en büyük sorunu html yan yana div olayıdır. :) Eğer web sitesi yapma konusunda kendinizi geliştirmek istiyorsanız işinizi gücünüzü bırakın bootstrap öğrenmeye bakın derim.. :D

Bootstrap Grid System – Yerleşim Sistemi

Bootstrap, en başında site tasarımı yapamayan kişilere kolaylık olması açısından ortaya çıkarılmış bir framework’tür. Mobil cihazların yanı sıra devasa ekranlar yaygınlaşmaya başlayınca, yapmak istediğimiz siteleri hem mobil cihaz ekranlarına hemde bu devasa ekranlara uygun tasarımların yapılması zorunlu hale geldi. Bir pc üzerinden kullanılması düşünülerek yapılan bir site, mobil cihazlarda da bir pc de imiş görünmesi sıkıntılı bir durum yaratıyor. Küçücük ekranda kocaman site olması, odaklanmak istediğimiz kısmı yakınlaştırıp uzaklaştırarak görebiliyor olmamız çok can sıkıcı. Tam tersi devasa ekranlarda ise, ekranın ortasında küçücük bir site olarak karşımıza çıkıyor sitelerimiz ve siteyi yakınlaştırmamız gerekiyor.

CSS ile birlikte sitelerin farklı ekran boyutlarında nasıl davranması gerektiğini ayarlayabiliyoruz ancak bu çok uğraş gerektiren bir durum. Düşünün sitenin pc ekranlarında güzel görünebilmesi ne kadar CSS yazmamız gerekiyor? Şimdi bu kadar CSS’i bir çok ekran boyutuna göre yazmak zorunda olduğunuzu düşünün. Ne kadar da sıkıntılı bir durum değil mi?

İşte Bootstrap bu sıkıntılı durumu ortadan kaldırıyor. Profesyonel tasarım yetenekleri olmayanlar ya da tasarım ile uğraşmak istemeyenler için eşi benzeri bulunmaz bir kolaylık.

Yine de Bootstrap bir müneccim değil. Elbette bootstrap ile bir süre çalışmalı ve onun özelliklerini keşfetmeliyiz. Bu yazımda ekran boyutlarına göre sitenin şekillenmesini sağlayan en temel sistem olan Grid System yani Yerleşim Sistemi üzerinde duracağız.

Grid İngilizce bir kelimedir. Anlamı ise Izgara ‘dır. Bir ızgaranın nasıl olduğunu bilirsiniz. Belirli bir düzeni ve hatları vardır. Mesela Excel’den yola çıkalım. Excel sayfaları da bir ızgaradır. Programcılar GridView’ler ile çalışırlar.  Daha açık bir şekilde anlatmak gerekirse bir tablo görüntüsüne sahip olan şeyler Grid’dir diyebiliriz. Satırlar ve Sütunlardan oluşan bir yapıdır. Bootstrap’da bu yapıya uygun bir yapı geliştirmiştir. Div ögelerini özel etiket yapıları ile satırlar ve sütunlar olarak kullanırız ve yerleşimleri sorunsuz bir şekilde yaparız. Bu bahsini verdiğimiz özel etiket yapıları sayesinde de divler ekran boyutuna göre otomatik olarak görünmesini istediğimiz noktada görünmesini sağlarız.

Bu kadar uzun açıklama yeter uygulamaya geçelim. :D

Grid System – Yerleşim Sistemi

Bootstrap’ta temel olarak ekran 12 eşit parçaya bölünmüştür. Yani maksimum 12 sütunlu bir tablo düzeni kurabiliriz.

Yan yana dizilmesini istediğimiz elementlerin bir “row (satır)”  etiketine sahip bir div içerisinde olması gerekmektedir. Eğer yan yana gelmesini istediğimiz div elementleri row etiketine sahip bir başka div içerisinde değilse hepsi alt alta sıralanacaktır. Container içerisine almadan, elementleri direk row etiketine sahip div içerisine alırsanız da ekrandan taşma sorunu yaşarsınız.

Yan yana gelmesini istediğimiz div elementlerinin mutlaka row etiketine sahip bir div elementi içerisinde olması gerekir.

Kodlarımızı vermeden önce aşağıdaki sahip olduğumuz ekran boyutlarına ve ekran boyutları için tasarlanan column (kolon / sütun) etiketlerine bir bakalım. Bootstrap’da beş farklı ekran boyutuna özel CSS yazılmıştır.  Aşağıda verilen pikseller Ekran Genişliği üzerindendir.

• Extra Küçük Ekran (< 576 px) – .col-
• Küçük Ekran (≥ 576 px ) – .col-sm-
• Orta Ekran (≥ 768 px) – .col-md-
• Büyük Ekran (≥ 992 px) – .col-lg-
• Ekstra Büyük Ekran (≥ 1200 px) – .col-xl- 

Bir Div nesnesinin yukarıdaki ekran tiplerine göre farklı yerlerde ve boyutlarda görünmesini sağlayabilmek için verilen etiketleri kullanacağız.

Şimdi, row, container ve ekran boyutlarına göre hazırlanan etiketleri kullanalım.  Yukarıda ekranın varsayılan olarak 12 parçaya bölündüğünü söylemiştik. Aşağıdaki koda ve ekran çıktısına bakarak nasıl olduğunu görelim.

 <div class="container">
  <div class="row"> 
    <div class="col-sm-1" style="background-color: red;">
     stün 1
    </div>
    <div class="col-sm-1" style="background-color: green;">
     stün 2
    </div>
    <div class="col-sm-1" style="background-color: blue;">
     stün 3
    </div>
	 <div class="col-sm-1" style="background-color: red;">
      stün 4
    </div>
    <div class="col-sm-1" style="background-color: green;">
     stün 5
    </div>
    <div class="col-sm-1" style="background-color: blue;">
     stün 6
    </div>
	<div class="col-sm-1" style="background-color: red;">
      stün 7
    </div>
    <div class="col-sm-1" style="background-color: green;">
     stün 8
    </div>
    <div class="col-sm-1" style="background-color: blue;">
     stün 9
    </div>
	<div class="col-sm-1" style="background-color: red;">
      stün 10
    </div>
    <div class="col-sm-1" style="background-color: green;">
     stün 11
    </div>
    <div class="col-sm-1" style="background-color: blue;">
     stün 12
    </div>
  </div>
</div>

Burada her bir dive col-sm-1 etiketi verdik. Burada demek istediğimiz şey her bir col-sm-1 etiketine sahip div small (küçük) ekranda yukarıdaki gibi yan yana dursun. Eğer buraya 13. bir div eklersek görselde gördüğünüz gibi alt satıra iner. Yukarıdaki örnek için; Ekran ne kadar büyük olursa olsun her zaman bir satırda 12 sütun şeklinde olacaktır. Çünkü diğer ekran boyutları için bir belirleme yapmadık.

Aynı Anda Çoklu Ekran Desteği

Şimdi bu ekran boyutu etiketlerini daha iyi anlayabilmeniz için, aynı kodlar içerisinde bir düzenleme daha yapalım. Örneğimizi biraz daha mantıklı hale getirelim.

 <div class="container">
  <div class="row"> 
	<!-- 1 - Her birine col-sm-12 verdik. Small ekranda her satırda bir tane olmasını istiyoruz. Yani hepsi alt alta gelecek -->
    <!-- 2 - Her birine ayrıca col-md-3 verdik. Medium ekranda her satırda üç tane olmasını istiyoruz. -->
	<!-- 3 - Her birine ayrıca col-lg-2 verdik. Large ekranda hepsinin tek satırda olmasını istiyoruz. -->
	
	<div class="col-sm-12 col-md-4 col-lg-2" style="background-color:red;">
     Makale 1 <br/> <br/>
    </div>
    <div class="col-sm-12 col-md-4 col-lg-2" style="background-color:green;">
     Makale 2 <br/> <br/>
    </div>
    <div class="col-sm-12 col-md-4 col-lg-2" style="background-color:blue;">
     Makale 3  <br/> <br/>
    </div>
	<div class="col-sm-12 col-md-4 col-lg-2" style="background-color:red;">
     Makale 4 <br/> <br/>
    </div>
 	<div class="col-sm-12 col-md-4 col-lg-2" style="background-color:green;">
     Makale 5 <br/> <br/>
    </div>
    <div class="col-sm-12 col-md-4 col-lg-2" style="background-color:blue;">
     Makale 6 <br/> <br/>
    </div>
  </div>
</div>

Yukardaki örnekte gördüğünüz gibi bir div elementine 3 farklı ekran boyutu için 3 farklı col etiketi girdik. Bu durumda buradaki altı div;

• Eğer Small ekran ise alt alta
• Eğer Medium ekran ise her satırda 3 tane
• Eğer Large ekran ise tek satırda 6 tane

şeklinde olmasını istediğimizi belirttik. Bu sayede, örnekten yola çıkarak makaleler paylaştığınız sitenizde, makaleler ekran boyutuna göre alt alta yada yan yana belirlediğimiz şekilde otomatik olarak yerleşecekler.

Aşağıdaki gifte, browser’i büyüttükçe yerleşimin nasıl otomatik olarak değiştiğini görebilirsiniz.

Örnekte 3 farklı ekran boyutuna göre kullandık. Sizler tasarımlarınızı yaparken tüm 5 farklı ekran boyutuna göre tasarımlar yapabilirsiniz.

Son bir bilgi…

Eğer col-sm-1 ‘de olduğu gibi 1, 2 gibi bilgi vermezseniz, o div, row içerisinde otomatik genişlik alacaktır. 6 tane col-sm etiketi olan div varsa hepsi bir satırı otomatik paylaşacaktır.

Bootstrap Grid System – Yerleşim Sistemi dersimde bu kadardı arkadaşlar. Diğer derslerimizde görüşmek üzere…

Kısa bir şekilde anlatayım demiştim ama yine de uzun bir yazı oldu. Ancak gerekli bilgileri vermeden anlatsaydım yeterli gelmemiş olabilirdi. Umarım faydalı olmuştur. Görüşmek üzere.

HTML kategorisine ait diğer yazılarım için tıklayabilirsiniz.

Buradan Bootstrap sitesine gidebilirsiniz.