Bootstrap Grid Kullanımı
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ı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.
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.
1 |
×KAPAT |