Ders 2 : Bootstrap Grid (Izgara) Yapısı

Bootstrap ders serimizin ikinci adımıyla sizlerleyiz.

Adobewordpress ailesi olarak CSS3’ün Media Sorgularını daha önce konu edinmiştik. Şimdi aynı işlemi, yani Responsive Design’in liquid yapısını Bootstrap ile hazırlayacağız.

Bugün kütüphanenin sunduğu en büyük avantajı, 12’lik grid (ızgara) yapısını konuşacağız.

Bootstrap’in 12’lik grid yapısı

İlk olarak sık sık dillendirdiğimiz grid yapısının ne olduğuna bakalım.

Bootstrap, web sayfalarını yatay olarak 12 eşit parçaya bölünmüş olarak ele alıyor. Her bir grid 8.3% genişlik değerine sahip şekilde hazırlanıyor. Önyüz geliştiricisi de sadece class tanımlayarak tüm yapıyı hiç olmadığı kadar hızlı ve kolay bir şekilde düzenleyebiliyor. Bir örnekle devam edelim.

Grid yapısı sitenizin iskelet yapısını oluşturmak konusunda size hız katıyor bu açık. Ancak en büyük yenilik bu değil. Izgara yapısı sayesinde web sayfanızın responsive (duyarlı) hale bürünmesini sağlayabilirsiniz. Nasıl mı? Acele etmeyin, öncesinde öğrenmemiz gereken birkaç özellik daha var.

Başlamadan önce

Bootstrap’in grid yapısı her türden taşınabilir cihaza uygun tasarımlar oluşturmanızı sağlıyor. Bunları kendi içinde extra small(xs),small medium(sm), medium(md) ve large(lg) devices olarak sıralıyor. Bu terimleri İngilizce paylaşma gereği duyduk. Çünkü hemen yanlarında parantez içerisinde verdiğimiz kısaltmalar büyük önem taşımakta.

Ayrıca ekranın her yerini kullanmak istiyorsanız container-fluid, sabit genişlikte çalışmak istiyorsanız container classlarını wrapper öğenize verebilirsiniz. Bunlar da Bootstrap’in grid yapısını destekleyen çerçeve tanımları.

Şimdi tanımların ne olduğu öğrenerek başlayalım.

İyi anlatıyorsunuz da nedir bu 12’lik grid yapısı?

En temeliyle başlıyoruz. Arkanıza yaslanın ve rahatlayın. Şuan bütün web tasarım dünyasını çalkalayan ve insanların zor olduğunu düşünerek araştırmaya çekindiği Bootstrap kütüphanesinin en önemli özelliğini öğrenmektesiniz. Bu cümle serisi bittiğinde siz de eşiği atlayan önyüz geliştiricilerinin arasında olacaksınız.

Yukarıda konuştuğumuz gibi Bootstrap xs, sm, md ve lg büyüklüğündeki cihazlara göre özel tasarımlar oluşturuyor. Örneğimizde medium, yani tabletler ve desktoplar üzerine konuşalım.

Yukarıdaki col-md-6 tanımlaması, medium (orta) boyutlardaki cihazlarda, ekranın 12’de 6’sını (yarısını) kaplayacak şekilde pozisyon alır. 12 tane grid olduğunu söylemiştik, burada 6 tanesini belirttik. Dolayısıyla bir div’e bu classı verdiğimizde öğe kendiliğinden %50 (6/12 grid) width değerini alacaktır.

Üstteki 3 cümlelik paragraf Bootstrap’in en önemli yapısı olan grid sistemini özetlemektedir. An itibariyle tepeyi aştınız. Bundan sonrası sizler için yokuş aşağı. Tebrikler.

Örneklere geçmeden önce offset ve push kavramlarını öğrenelim.

Offset ve Push tanımları ne işe yarar?

Her iki tanım da ilgili elemanı dış kısmından ittirmenizi sağlar. Margin gibi düşünün. Margin değerini 50 piksel yaptığınız bir resim nasıl diğer öğelerden 50 piksel uzaklaşıyorsa da offset ve push tanımları da bu işi yapıyor.

Üstteki tanım sayesinde mavi bir div öğesini 8/12 olarak siteye ekliyoruz. Sağına ve soluna da 2’şer, toplamda 4 gridlik boşluk bırakıyoruz. Özetle 8 mavi ve 4 gri olmak üzere 12’lik gridimizi tamamlamış oluyoruz.

Bu seferde aynı mavi div öğesini sadece sol taraftan 4 gridlik ittiriyoruz. Böylece 8 mavi ve 4 gri olmak üzere 12’lik gridimizi tamamlıyoruz.

Şimdi örneklerimizi çoğaltalım. Ve bunu canlı örneklerle destekleyelim.

Örneklendirmeler

İlk olarak 3 adet div’i col-xs-4 tanımıyla yanyana gelecek şekilde dizelim. Günün sonunda amaç 12’lik gridi elde etmek. Divleri renklendirmek dışında şunları yazdık :

<div class="col-xs-4">A Kutusu</div>
<div class="col-xs-4">B Kutusu</div>
<div class="col-xs-4">C Kutusu</div>

Devam edelim.

Responsive Örnekler

Şimdi üstteki örneği, her türden cihazda farklı gözükecek şekilde tekrar hazırlayalım. Mavi alan menümüz olsun, kırmızı alan içeriğimiz, yeşil alan da footerımız olsun.

Mavi div (menü) için : Large ekranlarda col-lg-3, medium boyutlardaki ekranlarda col-md-3, small medium ekranlarda biraz büyüsün ve col-sm-4 olsun, cep telefonları ve türevi cihazlarda da tüm 12’lik gridi kaplasın col-xs-12.

Kırmızı div (içerik) için : Menüden kalan alanları 12’ye eşitleyelim. Large ekranlarda col-lg-9, medium boyutlardaki ekranlarda col-md-9, small medium ekranlarda biraz küçülsün ve col-sm-8 olsun, cep telefonları ve türevi cihazlarda da tüm 12’lik gridi kaplasın col-xs-12.

Yeşil div (footer) için : Her boyutta tam genişliğe sahip olmalı, ister tek tek tüm boyutlar için 12 tanımı yapın. İsterseniz de sadece col-md-12 ve col-xs-12 classlarını tanımlayarak tüm ekranlarda 12’lik boyutta olmasını sağlayın.

Toplamda yazdığımız kodlar şu şekilde;

<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">A Kutusu</div>
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">B Kutusu</div>
<div class="col-md-12 col-xs-12">C Kutusu</div>

ÖRNEĞİ GÖRÜNTÜLE

Şimdi öğe gizleme/gösterme detaylarıyla devam edelim.

Şu boyutta gözüksün, şu boyutta gözükmesin

Bootstrap kullanırken display tanımları yapmakla da uğraşmıyoruz. Öğelerinizin her türden tasarımda görünürlük derecelerini sadece bir class ile yönetebiliyoruz. Burada tanımlarımız visible ve hidden olarak ayrılmakta. Normal haliyle verilmiş bir visible tanımı öğeyi her türden cihazda görünür kılar. Hidden ise onu gizler. Şimdi detaylandıralım.

• visible-lg : Sadece large ekran genişliklerinde gözükür.
• visible-md : Sadece medium ekran genişliklerinde gözükür.
• visible-sm : Sadece small medium ekran genişliklerinde gözükür.
• visible-xs : Sadece extra small ekran genişliklerinde gözükür.
• hidden-lg : Sadece large ekran genişliklerinde gizlenir.
• hidden-md : Sadece medium ekran genişliklerinde gizlenir.
• hidden-sm : Sadece small medium ekran genişliklerinde gizlenir.
• hidden-xs : Sadece extra small ekran genişliklerinde gizlenir.

Bu yapı çoklu kullanımlara da uygundur. Örneğin :

<div class="visible-lg hidden-md visible-sm hidden-xs">Örnek</div>

Yukarıdaki class tanımlaması divin görünürlüğünü istediğimiz gibi biçimlendirebiliyoruz.

Bitirmeden önce

Bu makale “Ders 1 : Bootstrap nedir?” ile başlattığımız serinin devamı niteliğindedir. Soru ve önerilerinizi yorumlar alanından iletebilirsiniz.

İyi çalışmalar.