Bootstrap, web sitelerinin ihtiyacı olan bileşenleri tek çatı altında sunan bir kütüphanedir. Dünyanın en çok kullanılan ön yüz (front end) aracı olma ünvanını taşıyor. Yapısı itibariyle mobil uyumlu web sitesi tasarımı yapmayı kolaylaştırır, bileşenleri ve javascript kütüphaneleriyle zengin içerikler oluşturmanızı sağlar. Bootstrap nedir sorusunu cevapladıktan sonra en önemli soruya gelelim; "tam olarak ne işe yarar bu?"

Çok ciddi bir iş yükünden kurtarır. Bir web sayfası, bir arayüzü kodlarken pek çok değişkeni göz önünde bulundurmalısınız. Bunları temel olarak 3 bölüme ayırabiliriz; ölçeklendirme, mobil uyumluluk ve bileşenler. Biraz daha detaylandıralım.

Ölçeklendirme ve Hizalama

Web siteniz, farklı çözünürlüklere sahip kullanıcılar tarafından ziyaret edilir. Söz gelimi 1920x1080px ekran çözünürlüğüne sahip bir kullanıcıyı ele alalım. Bu çözünürlük değeri yeni nesil bilgisayarda artık varsayılan bir değer. Aktüel çözünürlüklerden biridir. Yapacağınız tasarım, bu çözünürlüğün içinde bir yerde olmalı. Tam ekran yapabilirsiniz, kısmen tam ekran yapabilirsiniz veya tüm bir siteyi bu çözünürlüğe ortalayabilirsiniz.

Yeni nesil web sitesi tasarımlarında içerikler, 1140px ile 1360px genişlik değerleriyle ortalanıyor. (popüler kullanım bu aralıklarda) İşte biz buna "container" diyoruz. "Taşıyıcı alan" olarak yorumlayabilirsiniz. Tıpkı yük taşımak için kullanılan konteyner yapıları gibi. Web sitenizin çoğu kritik verileri ortalanmış bu ana taşıyıcılar içinde yer alır. Bootstrap, CSS dosyasında varsayılan bir değer ile bu ölçeklendirmeyi yapar. İstediğiniz gibi değiştirebilirsiniz. Varsayılan olarak 1140px geliyorsa, siz bunu 1200px yapabilirsiniz. Epsilos web sayfamızda biz bu ölçeklendirmeyi 1200px olarak kullanıyoruz. Detaylarını sonraki derslerde göreceksiniz.

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

 Container sınıfları (class) sayesinde sitenin içerik sınırlarını soldan ve sağdan belirli bir ölçüyle kolayca sınırlayabiliyoruz. Ayrıca bunu her ekran için belirtebiliyoruz. @media CSS etiketleri kullanarak mobil cihazların dikey ve yatay ekranları, tablet bilgisayarın dikey ve yatay ekranları ve büyük cihazlar için aynı işlemleri kolayca yapabiliriz. Bootstrap bize "hazır ve uygun" bir biçimde getirir.

Site içeriğinin ortalanması dışında bir sonraki kritik ölçeklendirme işlemi ise satır ve sütunlarda yapılır. Sitenizin her bir içeriği, aslında birer satırda yer alır. Tıpkı kitap ya da gazete gibi. Her satırı da çeşitli sütunlara böleriz. Bootstrap, matematiksel olarak en mantıklı bölüm işlemini bize sunar. Bu işlem "ekranı 12 eşit parçaya bölmektir." Elbette bu hesaplama bootstrap"in bir keşfi ya da kerameti değil. Bootstrap olmadan önce de yüzdelik dilimlerle sütun işlemi yapmak için aynı matematiği kullanırdık.

Şimdi ilk örneğe dönelim; 1200px container genişliği belirttiniz. Container"ı 12 parçaya böldüğünüzde 1 sütun 100px genişliğe sahip olur. Orta boyutta ekran için class (sınıf adı) col-md-1"dir. col-md-6 ise 600px yapar ve taşıyıcıyı tam olarak ikiye böler. İşte biz içeriklerinizi bu sütunlara yerleştiriyoruz. Örnekteki 100px genişliğe sahip hücrenin "içine" resim ekliyoruz. Hücreler, birbirinden boşlukla ayrılması için varsayılan olarak soldan ve sağdan 15px boşluğa sahiptir. Yani bu 1 birimlik hücreye eklediğimiz resim, 70px genişliği ile sınırlandırılır. İşte tüm bunlara biz "layout yönetimi" diyoruz. Böylelikle içeriklerimiz standartlara kavuşuyor, dikey ve yatay olarak kolayca hizalama yapabiliyoruz. Gelecek derslerde daha net göreceksiniz. Şimdilik ölçeklendirme için bilmeniz gerekenler bu kadar.

Mobil Uyumluluk (Responsive)

Web sitesini tasarlamaya en aktüel cihazdan, yani en yaygın kullanılan büyük çözünürlükten başlarız. Daha sonra bu içeriğin makul boyutlarla diğer cihazlarda düzgün ve anlaşılır görünmesini sağlarız. Buna mobil uyumluluk (responsive) diyoruz. Bootstrap, yukarıda ölçeklendirme konusunda gördüğümüz class isimlerini farklı cihazlar için uyarlar.

col-md-1, bizim medium device (ortalama boyuttaki cihazlar) üzerinde 1 birimlik yer ayırdığımızı ifade eder. col-md-6 ise satırın yarısını. Bunu öğrenmiştik. İki adet resim düşünelim.  solda col-md-6, sağda col-md-6 içinde 2 resmimiz var. Bilgisayar ortamında yan yana duruyor. Peki biz küçük bir telefonun dikey ekranında bunu görüntülersek ne olur? Bootstrap otomatik olarak "col-md-6" class"ını tam ekran genişliğine sığdırır. Yani bir sınıf ismi vererek iki cihaza adapte etmiş oluruz. Büyük zaman tasarrufu. Peki ya resimlerin mobilde de yan yana kalmasını istiyorsam ne yapmalıyız? Çok basit. "col-6" class"ını vermeniz yeterli. Eğer 2 sütun tüm cihazlarda yan yana duracaksa col-md-6 yerine doğrudan ve sadece col-6 yazmanız yeterli. 

Mobil uyumluluk adına sütunları temsil eden pek çok class vardır:

col-*, col-sm-*, col-md-*, col-lg-*, col-xl-*

* ile belirtilen alanlarda 12"ye kadar numara verilir. Böylece bir hücrenin hangi cihazda kaç birim yer kapladığına karar verebiliriz. 

Bileşenler (Components)

 Bir web sitesine baktığınızda ne görüyorsunuz? Metinlerden oluşan tipografiler, resimler, butonlar, menüler, uyarı mesajları, akordiyon içerikler, tab içerikler... İşte tüm bunlar bir web sitesinin bileşenleridir. Bootstrap componentleri size zengin ve kullanışlı yapılar sunar. Bunları kolayca özelleştirebilirsiniz. Şimdi özetler halinde kritik bileşenleri tanımlayalım. İlgili her bir bileşene ait özel dersi, ihtiyaçlarınız doğrultusunda takip edebilirsiniz. 

Alerts (Uyarılar): 

Kullanıcılara, dikkatleri üzerine çekecek bir uyarı alanı gösterir. Varsayılan 8 biçimi vardır.

Breadcrumb / Sayfalama Navigasyonu:

Bu bileşeni ekmek kırıntıları gibi düşünebilirsiniz. Hansel ve Gretel hikayesini bilirsiniz. Geçtikleri yolu kaybetmemek için ekmek kırıntıları bırakırlar. Sayfalarda gezinirken, kullanıcıların hangi sayfa hiyerarşisi içinde bulunduklarını buradan gösterebiliriz. Aslında bir navigasyon, menüdür.

Butonlar

Uyarı mesajlarında olduğu gibi vurgulama amacı ve arayüze uygun olarak çeşitli sınıflara ayrılır. Varsayılan olarak 9 farklı biçimi vardır. Primary ve Secondary, olaan içerikler altında en sık kullanacağınız biçimlerdir. Sayfanızda birer primary ve secondary buton tanımı yapmak ve bu standarta uymak faydalı olacaktır. Bu sayede kullanıcılar yönlendirmenin yerini ve biçimini kolayca fark ederler.

Kartlar (Cards)

Bootstrap kartları zengin içerikler oluşturmak için kilit öneme sahiptir. Sebebi; resim, başlık (heading), paragraf ve buton içermesidir. Zengin bir içerik de tam olarak bu elemanlardan oluşur. Kartları pek çok farklı stille kullanmamız mümkün. 

Bootstrap nedir? konulu podcastimizi dinleyebilirsiniz. Google Podcast - Bootstrap Nedir?