Bootstrap derslerinin ilkinde, bootstrap"in nasıl işlediğini ve sunduğu avantajların neler olduğuna değinmiştik. Bu makalede bootstrap layout sistemini, yani sayfa düzenini daha detaylı olarak göreceksiniz. Makaleyi bitirdiğinizde bir web sayfasının genel yerleşimini kolayca yapabilecek duruma geleceksiniz. Örnek kodlar ve canlı önizlemeleri için JSFiddle sistemini kullanıyoruz. İlgili örneklere tıklayarak JSFiddle sayfasında denemeler yapmanızı öneriyoruz. Eklediğimiz örneklendirmeleri kendi JSFiddle hesabınızda deneyebilirsiniz. Eğer sorunuz olursa bize iletmekten çekinmeyiniz

Bu bloğu yazdığımız tarihte en güncel sürüm Bootstrap 4.5.x sürümü. Flex adını verdiğimiz yeni nesil bir CSS mantığı ile çalışıyor. Eğer terimlere yabancıysanız üzülmeyin. Bazen parçadan bütüne, bazen bütünden parçaya giderek öğreniriz. Biz de bu dengeyi gözetek adım adım en doğru şekilde öğretmeyi amaçlıyoruz. Flex sistemi, hücreleri yüzdelik dilimlerle ve son derece esnek biçimlerde dizmemizi sağlıyor. 4.0"dan önceki eski sürümlerde bu özellikler aktif biçimde kullanılmadı. (elbette teknoloji ve trendler sürekli değişiyor) Şimdilik bilmeniz gereken; "flex yapısının süper hiper esnek olduğudur. "

A) Sayfa Genişliği (Bootstrap Container Genişliği)

Sayfa düzenimizi oluştururken ilk karar vereceğimiz şey "container boyutudur." Container, web sitenizin ana içerik taşıyıcı alanı anlamına gelir. Sağdan ve soldan eşit boşluklarla sayfanız ortalanır. Web sitenizdeki tüm içeriği ortaya alabilirsiniz, bir kısmı tam ekran, bir kısmı ortalı şekilde de kullanabilirsiniz. Tıpkı slayt alanlarının yaygın biçimde tam ekrana yayılması gibi. Fakat ne olursa olsun her web sitesinde standart bir "container" genişliği vardır. Yük gemilerindeki konteynerler gibi biz de tüm malzemelerimizi bu container içine yükleriz. 

Bootstrap, mevcut sürümde varsayılan olarak container boyutunu 1140px ile sınırlandırır. Biz bunu 1200px yapalım. Bunu 2 şekilde yapabilirsiniz.

1) Bootstrap kütüphanesinde değişiklik yaparak:

Bootstrap.css dosyasında "container" class"ını bulun. @media ölçüsü 1200px olan satırın içindekini elbette. Burada yapacğaımız değişiklik sadece minimum genişliği 1200px ve üzerindeki cihazları etkiler. Tavsiyemiz max-width değerini en fazla 1400 yapmanızdır. Tam ekrana yayılacak bir alan kullanmak isterseniz .container-fluid class"ını kullanabilirsiniz. 

@media (min-width: 1200px).container {    max-width: 1200px;}

 

2) Web sitenizin esas stil dosyasında değiliklik yaparak:

Bootstrap kütüphanenizi eklerken, bootstrap CSS dosyalarını önce, oluşturduğunuz ana stil dosyalarını ise sonraki satırlara eklemelisiniz. CSS dosyaları yukarıdan aşağıya okunur, CSS dosyalarının içindeki satırlar da aynı şekilde yukarıdan aşağıya okunur. Yani sonra taranan CSS dosyası, bir önceki CSS dosyasında yapılan değişikliği ezer. "Son gülen iyi güler" sözünün farklı bir yansıması. 

Ana stil dosyanızda aşağıdaki gibi max-width değerini değiştirebilirsiniz. Biz genelde bootstrap dosyasında değişiklik yapıyoruz. Aslında bu, bootstrap güncellemelerinde bir sorun teşkil eder. Yeni sürüm dosyalarını doğrudan aldığınızda yaptığınız değişiklikler gider. Fakat biz bu tür müdahaleleri çok az yaptığımız için sorun etmiyor.

 B) Bootstrap Satır ve Sütun Yapısı (Bootstrap Row - Columns)

Sayfada gördüğünüz her içeriğin aslında bir satırda (sırada) olduğunu söylemiştik. Bu sıralara row diyoruz. Pek çok farklı kullanım durumu olsa da temel mantığı anlamalısınız. Yani en yaygın kullanım biçimini. Böylece farklı kullanımlar daha kolay anlaşılır. Biz bunu bir örnekle açıklayalım.

Denizde yol alan bir yük gemisi şu an baktığınız tarayıcınız olsun. Bu geminin üzerinde farklı renklerde yük konteynerleri olduğunu hayal edin. Bu konteynerlerden birisini açıyorsunuz ve 3 adet yan yana dizilmiş kutu görüyorsunuz. Kapatıp başka bir konteyneri açalım. Her biri daha küçük boyutlarda 4 kutu olsun. Buna da baktık ve başka bir konteynere geçtik. Genişçe bir koltuk, tek başına tüm konteynerin genişliğini dolduruyor. İşte konteynere baktığımızda genişliği dolduran her bir sıra Row"dur. Eğer hızlı geçmişseniz bu paragrafı yeniden okuyup hayalinizde canlandırın.

Yeterince gözünüzde canlandırdınız mı? Devam edelim ve şimdi bunları HTML"e çevirelim. Aşağıdaki önizlemede result butonuna tıklayıp inceleyebilirsiniz. Ya da direkt JSFiddle üzerinde açın.

C) Bootstrap Flex Yapısı

En temel ve sık kullanacağınız flex örnekleriyle açıklayalım. Flex, tıpkı sütunlar / kolonlar (Columns) gibi yapıları biçimlendirmede, içeriği satıra göre yerleştirme ve hizalamada kullanılıyor. Boş bir oda düşünelim. 2 adet aynı boyutta tekli koltuğunuz var. odanın genişliğine göre aynı hizada ama farklı noktalara konumlandırmak istiyorsunuz. "Köşelere mi yerleştirsek? İkisi ortada mı kalmalı? Yolsa sol kısma mı dizelim? Ya da en sağda yan yana dursa?"

Aşağıdaki JSFiddle örneğinde HTML kodları ve Result kısmından sonuçları görebilirsiniz. Yukarıdaki örnekte "row" class"ı ile hücreleri dizmiştik. Ancak toplamda 12 sütuna tam olarak paylaştırdığımız için boşluk kalmadı. Bu nedenle hizalama ihtiyacı duymadık. Şimdi ise elimizde 4 birimlik 2 koltuk var. Toplam 8 birim yapar. 12-8 = 4 Birimlik boşluk kaldı demektir. Bunu düzenli bir şekilde kullanmak istediğimizde en pratik yol d-flex, yani display: flex ve "justify" sınıflarını kullanmaktır.

Sınıf adı: "d-flex justify-content-start" : İçinde bulunan divleri başlangıca, yani sola dizer.

Sınıf adı: "d-flex justify-content-end" : İçinde bulunan divleri en sona, sağa dizer.

Sınıf adı: "d-flex justify-content-between" : İçinde bulunan divlerin arasına boşluk bırakarak kenarlara iter.

Sınıf adı: "d-flex justify-content-around" : İçinde bulunan divlerin arasına ve etrafına boşluk bırakır.

Sınıf adı: "d-flex justify-content-center" : İçinde bulunan divleri ortaya hizalar.

Mesela siz de 4 birime sahip (col-md-3 veya col-3) 2 hücreyi hizalayın.