Bootstrap Izgara (Grid) Sistemi - 2

20 Mayıs 2016

İlk makalede genel ızgara yapısı ve bootstrap ızgara yapısının ana elemanlarından bahsettim. Bu makalede bootstrap ızgara yapısının detaylarına değineceğim.

Farklı yükseklikte kutular için satır yapısını koruma

Kutular float:left ile yan yana dizildiğinde kutulardan birinin yüksekliği fazla ise satır yapısı bozulur. Aşağıdaki örneği büyük pencere açınız.

Görüldüğü gibi yüksekliği fazla olan 2. kutu satır dizilimini bozuyor. Bootstrap’in bunun için çözümü çok kolay.

<div class="clearfix visible-md-block"></div>

Yukarıdaki kod bloğunu kodumuza eklediğimizde satır yapımız korunacaktır. visible-md-block kısmı hangi ekran boyutunda bu satırın işlevsel hale geleceğini gösterir.

İç içe kolon kullanımı

Bootstrap ızgara yapısı iç içe kolon kullanımını destekler. Genelde sitelerimiz tek kolonlu yapılarından oluşmaz. İç içe kolonların olduğu daha karışık planlardan oluşur. Bu durumda nasıl bir yol izlemeliyiz?

Yukarıdaki örnekte görüldüğü gibi iç içe kullanımda aynı ızgara elemanları kullanılıyor. Sadece daha önce container tanımı yapıldığı için tekrar yapılmıyor. İçerideki kolon tanımına başlarken direk row tanımı ile başlıyoruz.

Kolonları denkleştirme (Offsetting)

Bootstrap’in .col-md-offset-* sınıflarını kullanarak kolonları sağa doğru atabiliriz. Izgara yapısından kolonları soldan hizalamak veya denkleştirmek için margin kullanmak yerine .col-md-offset-* sınıfını kullanırız.

Yukarıdaki örnekte görüldüğü gibi ikinci satırdaki kolon soldan 4 kolonluk sağa doğru atıldı. Bunun için col-sm-offset-4 kullandık.

Kolon sıralama

Uyumlu web uygulamalarında can sıkan durumlardan bir tanesi büyük ekranlarda sağda olan bir kutu küçük ekranlarda sola yaslanması durumudur. Tabi bu tip anaçatıların avantajı tüm bu sorunlara bir çözüm oluşturmalarıdır.

Çözüm yine bir sınıf tanımlamak kadar kolay. Boostrap class yapılarından bildiğimiz .col-xs-#, .col-sm-#, .col-md-#, and .col-lg-# kullanımlarının sonuna soldan sağa ötelemek için push, sağdan sola çekmek için pull eklemelerini kullanıyoruz. Örneğin cep telefonlarında bir yer değiştirme yapacaksak .col-xs-push-# or .col-xs-pull-# diyelerine yerine ise kaç kolon öteleneceğini yazmamız yeterli.

Bir örnek ile konuyu pekiştirelim. Örneğin cep telefonu ekranında üstte iki kutu altında bir kutu şeklinde olan bir sayfa yapımız olsun. Geniş ekranlara bu üç kutuyu yan yana koyalım ve alttaki 3. kutuyu iki kutu arasına koyalım.

Örneği geniş ekran ve küçük ekranlarda deneyelim. Süper. Mobile öncelik vermeyi unutmayalım.

Kullanışlı sınıf tanımları

Boostrap uyumlu web için bazı hazır CSS sınıfları bize sunar. Bazı durumlarda bazı elemanları göstermek veya gizlemek isteriz. Bun işi yapmak için boostrap yine bize kullanışlı sınıflar sağlar.

Sadece bir ekran boyutunda göstermek için .visible-xs-#, .visible-sm-#, .visible-md-# ve .visible-lg-# sınıflarını bize sunar. Buradaki diyez (#) yerine göstereceğimiz elemanın display özelliğine göre inline, block ve inline-block değerine göre değişir. Örnek olarak farklı kutu yükseklikleri bölümünde ki kullanımı gösterebiliriz.

<div class="clearfix visible-md-block visible-lg-block"></div>

Aynı şekilde gizlemek için de sınıflar mevcuttur. .hidden-xs, .hidden-sm, .hidden-md ve .hidden-lg Farklılık dikkatinizi çekmiştir. Göstermenin aksine gizlemede elemanın blok veya inline-blok olmasının bir önemi olmadığı için bu kısım kaldırılmıştır.

Son olarak yazıcı görünümünde gizleme ve gösterme içinde sınıflar vardır. .visible-print-block, .visible-print-inline, .visible-print-inline-block ve .hidden-print sınıflarıda kullanışlı sınıflardır.

Anlamlı kodlama

Buraya kadar boostrap’in genel kullanımını gösterdik. Okunabilir kodlama için anlamlı sınıflar tanımlamak bize avantajlar sağlar. Örneğin Bir sayfayı kodlarken “Neden Zingat Enerji” bölümüm var. Boostrap genel kullanımı ile burayı kodlamak istesem kodlarım aşağıdaki gibi olacaktı.

<div class="container">
<div class="row">
  <h3>NEDEN ZİNGAT ÜST SIRA ENERJİSİ?</h3>
  <div class="col-md-4">
    <h4>ÜSTE ÇIKSIN</h4>
    <p>İlanınız diğer ilanların üstünde...</p>
  </div>
  <div class="col-md-4">
    <h4>DİKKAT ÇEKSİN</h4>
    <p>İlanınız daha fazla ziyaretçinin...</p
  </div>
  <div class="col-md-4">
    <h4>KOLAY ULAŞILSIN</h4>
    <p>Gayrimenkul arayanlar hem...</p>
  </div>
</div>
</div>

Bunun yerine

<div class="container">
<div class="neden-zingat-enerji">
  <h3>NEDEN ZİNGAT ÜST SIRA ENERJİSİ?</h3>
  <div class="ustte-ciksin">
    <h4>ÜSTE ÇIKSIN</h4>
    <p>İlanınız diğer ilanların üstünde...</p>
  </div>
  <div class="dikkat-ceksin">
    <h4>DİKKAT ÇEKSİN</h4>
    <p>İlanınız daha fazla ziyaretçinin...</p
  </div>
  <div class="kolay-ulasilsin">
    <h4>KOLAY ULAŞILSIN</h4>
    <p>Gayrimenkul arayanlar hem...</p>
  </div>
</div>
</div>

Şeklinde sınıfları anlaşılır yaptığımda kodu okurken daha hızlı anlıyorum. Less dosyasında kodlama yaparken anlamlı sınıf isimleri kod hızımı arttırıyor. Tabi tercih meselesi. Ama çok fazla kod yığınının olduğu yerlerde kodlama yaparken anlamlı kodlama yapmak şart.

Bootstrap 4 ızgara sistemi

Şimdiye kadar anlattığım Bootstrap 3.x kullanımıydı. Bootstrap geliştiricileri 4. alfa sürümünü çıkardılar. Genel itibari ile bütün kısımlar oturmuş gibi. Beta ve yayın sürüçlerinde değişiklikler olsa da genel olarak bu yapı korunur.

Bootstrap 4 birçok yenilik barındırıyor. En çarpıcı yeniliklerden birisi de ızgara yapısını artık sadece float ile değil de flexbox üzerinden yapmayada imkan sağlıyor olmaları. CSS3 ile gelen bu güzel özelliğin seçilmesi doğru karar.

Flexbox kullanmak için _variables.scss dosyasında;

$enable-flex: true !default;

yapmak yeterli.

Ayrıca CSS önderleyici olarak artık LESS değil SASS kullanma kararı almışlar.

Bootstrap 4 ızgara yapısı hakkında daha fazla deneyimim oldukça bu konuda da yazı yazarım.

Kalın sağlıcakla.

Kaynaklar

Daha fazla oku

Avatar Popout Efekti

Avatar Popout Efekti uygulaması Devamını oku

Kapsayıcı sorguları (container query)

29 January 2024 tarihinde yayınlandı.

Renk geçişli ve Hareketli kenar çizgileri

22 January 2024 tarihinde yayınlandı.