Bootstrap Izgara (Grid) Sistemi (Container, Col, Row Kullanımı)

Mayıs 2019
YouTube'ta Takip Et:

Bootstrap’de ızgara sistemleri container, container-fluid, row ve sütun anlamına gelen col elemanlarından oluşur ve tüm site bu yapı ile inşa edilir. Bu ızgara sistemi ile boşluklar önceden ayarlandığından hızlı bir şekilde sitenin iskeletini çıkarmak mümkündür. Tüm bunları responsive (mobil uyumlu) yapabiliyor olması da avantajı.

Bootstrap Container Kullanımı

Konteynırlar, daha bilindik ifadeyde Bootstrap’in .container elemanı Bootstrap ızgara sisteminin en temel özelliklerinden biridir. Ekran genişliğine göre içeriği otomatik ayarlar ve 100% ekran genişliğinde bile içeriğin sayfa ortasında yer almasını sağlar.

Container sınıfı atanmış bir siteye geniş ekranlı bir monitörden girseniz de varsayılan olarak 1170px genişliğinde ve ekrana ortalı vaziyette olacaktır. Tarayıcınızın genişliği en az 1200px ise sayfayı 1170px olarak ayarlayacağı anlamına geliyor. Çözünürlüğe göre esneyeceği piksel genişliğini şöyle: 1200px veya daha büyük çözünürlükte 1170px, 992px lie 1199px arasında 970px, 768px ile 991px arasında 750px, 768px’den daha düşük çözünürlükte auto değerleri ile işlev görür.

Container İçinde Tam Ekran Genişliği

Metinden daha geniş görünen imajlar veya arka planı renk ile doldurulmuş alanlar sayfaya güzel bir hava katar. Hali hazırda genişliği kısıtlayan bir container bulunurken container sınıfı içinde tam ekran genişliğine sahip bir div kullanmak nasıl mümkün olacak?

Container İçinde Geniş Alan Kullanımı

Varolan container sınıfını kapatıp, araya geniş ekran olacak alanı koyup, sonra tekrar container açarak devam edebiliriz. Ama bu basit bir yöntem olur. Container içinden 100% genişliğe sahip bir alan oluşturmayı daha profesyonel bir şekilde çözmek için önce .container’ın bir üzerindeki div’e aşağıdaki CSS kodunu ekleyin.

100% ekrana genişletmek istediğiniz div’e de aşağıdaki stili ekleyin.

Aşağıdaki örnek HTML kodunu da inceleyin. site-container ve row-full kullanımının nasıl olduğu daha iyi anlaşılabilir.

.container-fluid ise yine Bootstrap’in kapsayıcı bir elemanı. Yani tüm site yine bu elemanın altına inşa edilebilir, ancak .container’dan farkı sayfa alanını ortalamak yerine, sayfayı ekrana göre genişletir. .container gibi sınırlamaz.

Bootstrap Col Kullanımı

Bootstrap’te col, sütun/kolon anlamına geliyor ve sayfa, Bootstrap framework’ünde dikey olarak 12 eşit parçaya böler. Her col değeri sağdan ve soldan 15px genişlikteki boşlukla sayfaya ideal bir hava katar ve yine doğru kullanımla sayfa mobil uyumlu bir hale gelebilir.

Col değeri farklı ekran boyutlarına göre aynı HTML etiketinde kullanılır. col-lg, col-md, col-sm ve col değerleri ile ekran boyutuna göre farklı konumlandırılabilir. Örnek verecek olursak div class=”col-md-3 col-sm-6 şeklinde yazılmış bir kodun karşılığı şu: Toplam 12 sütunlu olan sitede, siteye girilen cihaz “Medium” formatta bir cihaz ise div’in 4’e bölünmesi, “Small” ise div’in 2’ye bölünmesi anlamına geliyor.

Col Kullanımı

Ekstra büyük ekranlarda .col-xl-*, Large ekranlarda .col-lg-* Medium cihazlarda .col-md-*, Tablet gibi küçük cihazlarda .col-sm-*, telefon gibi çok küçük cihazlarda .col-* kullanılır.

Bootstrap Row Kullanımı

Bootstrap’in önemli özelliklerinden biri olan row değerinin iki ana özelliği var. Bunlardan biri col ile birlikte başa ve sona getirilen 15px’in oluşturduğu boşluğu doldurmak. Bir diğeri de yanyana olması gereken col sınıfına sahip div’leri yanyana getirmek. Bu nedenle yanyana gelmesi gereken div’ler varsa bu div’lerin öncesinde row sınıfı olan başka bir div’i kullanmalısınız.

Row Kullanımı

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.