Bootstrap Grid Kullanımı

Bootstrap Grid KullanımıBootstrap grid kullanımı sanıldığının aksine oldukça basittir. Aynı zamanda son derece yeteneklidir. Bootstrap css framework’ünü kullanmak istemiyorsanız kendime ait bir grid sistemim olsun diyorsanız CSS Grid Sistemi Yapımı yazımı incelemenizi tavsiye ederim.

Bootstrap Grid Kullanımı İçin Bilinmesi Gerekenler

Bootstrap grid sınıfları

.col-xs-12
.col-sm-12
.col-md-12
.col-lg-12

Herhangi bir html nesnesine yukarıdaki sınıflardan birini veya birden fazlasını atar iseniz. Çalışma prensibi şöyle olacaktır.

  • “col” değeri nesnenin bir kolon (sütun) olarak tanımlar
  • “xs, sm, md, lg” bu değerler hangi medya ekranların da görev yapacaklarını belirler
  • Sayısal değer ise grid sayısı üzerinden kaça bölüneceğini belirler

Bootstrap’ın media sorguları için kullanılacak sınıf isimlerini ezberinize alırsanız çok rahat edersiniz.
İşte o sınıflar

  • xs = Tabletten ve daha küçük ekranlar (Telefonlar)
  • sm = Tablet ve laptop aralığı
  • md = Laptop ve Masaüstü aralığı
  • lg = Masaüstü ve üstü cihazlar (Masaüstü PC, 2k ve 4k Tvler)

Ben bu sınıfları bu şekilde aklımda tutuyorum biliyorum belki tam olarak doğru bir benzetme değil ama yinede yaklaşık olarak buna karşılık geliyor.

[alert style=”warning”]Şu yanılgıya sakın düşmeyin. Ben xs sınıfı kullandım sadece telefonlarda etkili olacak. Kesinlikle yanlış her sınıf her cihazda farklı görünüm sağlar önemli olan mantığını bilmek. aşağıdaki örnekler size yardımcı olacaktır.[/alert]

Bootstrap Grid Kullanımı ve Örnekler

Şimdi örnekler ile çalışalım.

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

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

Yukarıdaki örnekte iki farklı gösterim mevcut ikisi de içeriğimizi 4’e bölecek (12’li yapı kullandığınızı varsayıyorum.) fakat farklı cihazlar da farklı davranıcaklar “xs” sınıfına sahip olan divler bütün cihazlar da telefon dahil erişildiğinde ekranı 4’e bölecek “md” sınıfına ait olan divler ise tablet laptop aralığına kadar bölme işlemi yapacak telefon görünümünde ise alt alta yer alıcak. Örnek üzerinde görmek için tıklayın.

Şimdi yukarıdaki örneği bir adım daha öteye götürüp içeriğimizin her cihaz için farklı gözükmesini sağlayalım.

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

Yukarıdaki örneğin çalışır hali burada

Örnekte eklediğimiz her sınıfın açıklaması

  • col-xs-12 = xs sınıfı tablet altındaki ölçülerde nasıl davranacağını söylüyor 12 ise içerik ölçüsü. (Küçük bir not eğer xs için bir tanım vermez iseniz otomatik olarak tek sütun gibi yani col-xs-12 olarak davranır)
  • col-sm-6 = sm sınıfı tablet laptop aralığında nasıl gözükeceğini belirliyor 6 ise içeriği ikiye böler
  • col-md-4 = md sınıfı laptop masaüstü aralığında nasıl gözükeceğini belirliyor 4 ise içeriği üçe böler
  • col-lg-2 = lg sınıfı masaüstü ve üstü aralıklarda nasıl gözükeceğini belirliyor 2 ise içeriği altıya böler

Şimdilik grid konusu bu kadar takıldığınız bir yer olursa konu altından sorabilirsiniz.

Bakmadan geçmeyin.

http://getbootstrap.com/css/#grid

http://www.codeply.com/

Bir cevap yazın

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