Bootstrap Derslerleri – Izgaralar(Grids)

Merhabalar. Bootstrap 4 derslerimizde 3. günümüze hoşgeldiniz.  Bu dersimizde birlikte bootstrap 4 ızgara lar (grids) inceleyeceğiz. Bootstrap sayfalarımızı tasarlamamız için mükemmel bir ızgara yapısına sahip. Izgara yapısı çalışma alanınızı yatay olarak 12 eşit parçaya böler.

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12.

tabloda gördüğümüz gibi kullanımınız için 12 eşit parça var. Bu parçaları nasıl kullanacağımızı göreceğiz.

Bootstrap ızgara yapısını kullanabilmemiz için öncelikle kapsayıcı(container) divlerimizi oluşturmamız gerekiyor. Size2 farklı kapsayıcı div yapısını göstereceğim.

Bunlardan ilki Standart kapsayıcı;

bunu kullanırsak eğer olşuturduğumuz alan sayfada ortalı bir şekilde gelecektir.Büyüklüğü ise kullandığımız cihazın çözünürlüğüne göre kendini ayarlıyacaktır.

bootstrap 4 ızgara1

Örnek: Container kullanımı örnek

Diğeri ise Fluid kapsayıcı;

Eğer bunu kullanırsak oluşturduğumuz alan tam ekran olarak gelecektir.

Örnek: Container-fluid kullanımı örnek

bootstrap 4 ızgara2

Öncelikle cep telefonu, tablet, laptop ve büyük ekranlar için sayfamızın bozulmadan ekrana gelmesi gerekiyor. Bunu sağlamak içinde bootstrap 4 farklı kolon sınıfı kullanıyor. Bunlar

Satırlar (.row)

Her 12’li kolonu kapsayan bir kapsayıcıdır. Sağdan soldan eksi 15px ile ana kapsayıcının bıraktığı boşluğu doldurur, böylelikle kolonları aralarına konulan boşlukların sondaki kutuyu aşağı atması engellenmiş olur. kolonlar float:left ile yan yana dizildiği için satır aynı zamanda taşan kolonları satır başı yaptırmaya yarar.

Satırları ana kapsayıcısı (.container) dışında kullanmayın çalışmıyor. Bazen gözden kaçıyor, sorun oluyor 🙂

Kolonlar (.col-*)

Her kolon 15px’lik sağ ve sol paddingleri vardır. Bu paddingler satır ile olan mesafeleri ayırmak için eklenmiştir. Bu her kolon için aynı etkiyi yapacaktır ve yan yana kullanılan kolonlar arasındaki mesafe 30px olacaktır.

Farklı ekran çözünürlükleri için farklı kolon sınıfları tanımlanır.

Kolon sınıfları ve çözünürlük aralıkları:

  • col-xs-575px’den küçükse          (Cep telefonları için)
  • col-sm- 576px ile767px arasında     (Daha yüksek çözünürlükteki Cep telefonları için)
  • col-md- 768px ile 991px arasında               (Tabletler için)  
  • col-lg- 992px ile 1199px arasında          (Laptoplar için)
  • col-xl- 1200px eşit ve büyükse        (Büyük ekranlar için)

(Bu pixel aralıkları bootstrap 3 de farklılık göstermektedir.)

Burada gördüğünüz kolon sınıflarından sonra yazacağımız sayı kolonumuzun 12 eşit parçadan kaç tanesini kullanacağını belirtecek. Örnek vermek gerekirse:

1)

col-xs-6 col-xs-6

Yukarıdaki yapıyı incelediğimizde tasarımımızda 6 parçayı 1 kolon kullanıyor Kalan 6 parçayıda 2. kolon kullanıyor. Col-xs sınıfı kullanmışız dolayısıyla yukarıdaki tabloya bakarsak cep telefonları dahil bütün çözünürlüklerde bu yapının sabit kalacağı anlamına geliyor.

Bu yapıyı div lerimize uygularsak şöyle olacaktır.

 

2)

.col-sm-6 col-sm-6

Col-sm- sınıfı kolonu tablomuzdan bulursak 576px ve üstünü kapsadığını görürüz. Buda demek oluyorki576 px e kadar kolonumuzu küçültecek bu değerin altına geldiğinde ise kolonumuz bir alt satıra geçecektir.

Tüm kolon sınıfarı için örneklerimizi oluşturursak:

  1. Col-xs- kullanılan örnek
  2. Col-sm- kullanılan örnek
  3. Col-md- kullanılan örnek
  4. Col-lg- kullanılan örnek
  5. Col-xl- kullanılan örnek

Birkaç örnekle pekiştirelim:

  • Örnek1:

bootstrap 4 ızgara3

Tablet modunda bütün olarak görünsün.Altındaki çözünürlüklerde ise kolonlar aşağı doğru gelsin.

Bu resmi incelersek oluşturacağımız divimiz 3 parçadan oluşacak. Bunlardan 1.si diğerlerinin 2 katı büyüklükte olacak. Yapacağımız hesap 12 parçayı yukarıdaki şekle uygun olarak parçalamak olacak.

Sonuç olarak hesaplamamızı yaparsak;

bootstrap 4 ızgara4

html kodumuz;

Sayfamız: örnek1

Bu örneği biraz daha geliştirelim. Normalde ilk kolonumuz diğerlerinin 2 katı büyüklüğünde. Fakat ben tablet ekranından daha düşük çözünürlüklerdede yine kolonlarımın yan yana görünmesini ve hepsinin eşit boyda olmasını istiyorum.Bunu nasıl yapacağız?

bootstrap 4 ızgara5

bootstrap 4 ızgara – Kolonları denkleştirme (Offsetting)

Bootstrap’in .col-md-offset-* sınıflarını kullanarak kolonları sağa doğru atabiliriz. Bootstrap 4 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.

Ör:

bootstrap 4 ızgara6

Yukarıdaki görüntüyü oluşturacak divlerimizi yazalım.

Örneği buradan görebilirsiniz: ızgara-offset örneği

bootstrap 4 ızgara – 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.

Son olarak sizlere bootstrap Izgaraları anlatan bir youtube videosu paylaşıyorum.

Bir sonraki dersimizde görüşmek üzere.

Leave a Reply

%d blogcu bunu beğendi: