Bootstrap Grid (Izgara) Yapısı | Alaoğlu Tasarım | Fikirlerinizi Tasarlar | Web Tasarım & Grafik Tasarım Hizmetleri

Bootstrap Grid (Izgara) Yapısı

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-grid

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.

×KAPATŞuan görüntülediğiniz sayfa da Bootstrap’in 12 lik grid sistemi ile hazırlanmıştır. Ekranın sağındaki ve solundaki gri alanlar 4 grid büyüklüğünde. Geriye kalan 8 grid ise okuduğunuz içerik kısmının ve sağ taraftaki menünün bulunduğu yeri barındırıyor.

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ımlaroluş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.

bootstrap-grid-basic

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.

Yorum yapabilmek için giriş yapmalısınız

Tıkla Hemen Ara!