4. Özelleştirilebilir Giriş Kullanıcılar, Bootstrap’in tasarım şablonundan memnun Web geliştiriciler için hazırlanan CSS çatıları, projeler için kalmazlarsa, CSS dosyasını her zaman değiştirebilirler. bazı stillendirmeleri standartlaştırıp kullanılabilir hâle Ayrıca mevcut tasarımlarla birleştirilebilir ve böylece getirmektedir. Hazır hâldeki bu kuralları uygulayarak CSS birbirlerinin işlevlerini tamamlayabilirler. Uygulamamıza yazmadan veya daha az yazarak web sayfaları benzersiz bir görünüm vermek istediğimizde yardımcı olur. stillendirilebilir. Bu bölümde en yaygın kullanılan CSS çatısı olan Bootstrap incelenecektir. Dokümantasyona bağlı 5. Uyumluluk olarak yazılan bu bölümde Bootstrap’in web sayfaya dahil Bootstrap geliştirme ekibi, çerçevenin tüm modern edilmesi ve sık kullanılan özellikleri incelenecektir. tarayıcılar, sürümler ve platformlarla uyumluluğunu garanti
Bootstrap eder. Proxy tarayıcılarını ve daha eski tarayıcıları desteklemez ancak bu, görüntüsünü veya işlevselliğini Bootstrap, tasarımcıların ve geliştiricilerin hızlı bir şekilde etkilemez. tamamen duyarlı web siteleri oluşturmasını sağlar. Duyarlı ve mobil öncelikli uygulamalar geliştirmek için en popüler 6. Tutarlılık
CSS çerçevesi olarak kabul edilebilir. Bootstrap’in ana Ön Uç ve Arka Uç geliştirme ekipleri arasında hâkim olan özellikleri şu şekilde açıklanabilir: bazı tutarsızlıklar olabilir. Bootstrap’in yaratıcıları, bu ekipler arasında tutarlılık sağlamak için bir çözüm bulmak • Bootstrap, web geliştirmeyi daha hızlı ve daha istediler. Bu nedenle, geliştiriciden geliştiriciye farklılık kolay hâle getirmek amacıyla ücretsiz bir ön uç gösteren kitaplıkların kullanımını ortadan kaldıran çerçevesidir. Bootstrap çerçevesini geliştirdiler. Sonuç olarak projeyi • Ayrıca formlar, tipografi, düğmeler, gezinme, kim yaparsa yapsın, çerçeve proje boyunca tutarlılık sağlar. tablolar, modlar, görüntü karuselleri ve diğer birçok komponent için HTML ve CSS tabanlı 7. Topluluk Desteği tasarım şablonlarının yanı sıra diğer isteğe bağlı Bootstrap, resmî web sitesinde birçok kaynak ve materyal JavaScript eklentilerini de içerir. sağlar. Bunun yanında diğer bazı web siteleri de ön uç • Bootstrap ayrıca kullanıcılara duyarlı tasarımları geliştirme sürecini kolaylaştıracak belirli kaynaklar sunar. kolayca oluşturma olanağı sağlar. Resmî web sitesi, bir web sitesi oluşturmayı çok daha basit • Bootstrap’in duyarlı CSS’si telefonlara, tabletlere hâle getiren inanılmaz belgeler de sunar. Ayrıca, gerekli ve masaüstlerine kolayca uyum sağlar. değişiklikleri yapabileceğimiz şablonlarına ve temalarına • Chrome, Firefox, Internet Explorer, Edge, Safari erişebiliriz. ve Opera gibi tüm modern tarayıcılarla Bootstrap Kurulumu uyumludur. Web sayfasında Bootstrap özelliklerini kullanabilmek için Bootstrap’i Bu Kadar Popüler Yapan Nedir? Bootstrap kurulumunun yapılması gerekiyor. Tercihe göre
Elbette bu popülerliğin farklı sebepleri vardır. Bu konu farklı kurulum yöntemleri vardır. Bootstrap dosyalarını altında Bootstrap’i popüler yapan konulardan bazıları; indirip kendi sunucunuzda barındırabilir ya da CDN (Content delivery network-İçerik dağıtım ağı) ile sayfaya 1. Komponentler dahil edebilirsiniz. Bootstrap, aşağıdakiler gibi web uygulamalarımıza kolayca dahil edilebilecek çok sayıda komponent sağlar: Açılır Web sayfasına Bootstrap dosyalarını dahil etmek için menüler, Formlar, Navigasyon çubukları, Düğmeler, https://getbootstrap.com/docs/5.1/gettingstarted/introducti Tablolar, İlerleme çubukları, Küçük resimler. on/ adresindeki bilgileri takip etmek yeterli olacaktır. İlgili adrese girildiğinde, CDN kurulumu için HTML dokümanın 2. Duyarlı Grid <head> kısmına aşağıdaki kod bloğunda verilen linki
Bootstrap, önceden tanımlanmış kendi grid sistemine eklemek yeterlidir. sahiptir. Kapsayıcılarınızı gerekli içerikle doğrudan Bu linki eklediğinizde tarayıcınız HTML sayfanızı doldurmaya başlayabilirsiniz. Kullanıcılar, ekstra küçük, yükledikten sonra Bootstrap dosyalarını da indirecektir. küçük, orta, büyük ve ekstra büyük sonlarını kullanarak her Bootstrap ile kullanılan birçok kural için yukarıdaki kod sütun için belirli özel sınır değerleri tanımlayabilir. bloğu yeterlidir. Ancak modallar ya da kayan menüler gibi 3. Zamandan Tasarruf bootstrap özellikleri için JS kütüphanesini de sayfanıza Bir web uygulaması veya mobil uygulama oluşturmak için eklemeniz gerekiyor. Aynı adresten kopyaladığımız son derece sınırlı bir zaman çizelgesine bağlı olduğumuzda, aşağıdaki JS linkini sayfanızın body kısmının en altına Bootstrap çerçevesinden kolayca yararlanabilir ve yapıştırabilirsiniz.
projemizi zahmetsizce hazırlayabiliriz. Bu, Bootstrap ile Bootstrap ile ilgili tüm bilgileri https://getbootstrap.com/ gelen hazır bloklardan kaynaklanmaktadır. Açıkçası, her adresinden takip edebilirsiniz. Bu kitabın yazıldığı tarih şeye sıfırdan başlamak zorunda değiliz ve belirli ögeleri itibarıyla en güncel Bootstrap sürümü v5.1.3’tür. Sürümler girdilerle benzersiz kılmak için değiştirebiliriz. değişse de kurulumları ve kullanımları birbirine benzerdir.
Düzen Yapısı göre değiştirmek isteyebiliriz. Bu durumda Bootstrap ile Sınır Değerleri kullanılan ekran sınır değerlerini ifade eden kısaltmaları kullanabiliriz. Örneğin ögenin genişliğinin tablet ve daha Ekran türüne göre tasarımın değiştiği noktaları sınır büyük ekranlarda satırın yarısını, daha küçük ekranlarda değerleri olarak inceledik. Sınır değerleri, sayfa düzeninin, satırın tamamını kapsamasını isteyebiliriz. Bu durumda görünüm alanına veya cihaz boyutuna bağlı olarak {col}-{sınır değeri kodu}-{birim} şeklinde değiştirileceği genişlikleri belirtmek için kullanılır. CSS oluşturduğumuz sınıf değerini kullanabiliriz. Bootstrap’te kodunda medya sorguları yazarak sınır değerleri tablet ekranı sınır değerini ifade eden kısaltma md olduğu belirtilebilir. Bootstrap, ekran türlerine göre sınıflandırdığı için kullanmamız gereken sınıf col-md-6 olmalıdır. sınır değerleri ile birlikte gelir. Medya sorgusu yazmadan tasarımın ihtiyacı olan sınır değeri kullanılabilir. Kitabın Display Sınıfları 124. Sayfasındaki Tablo 4.1’de Bootstrap ile gruplanan Bootstrap ile birlikte gelen display sınıfları, HTML ekran türleri, sınıf kodu ve boyutları verilmiştir. ögelerinin display özelliğini ayarlamak için kullanılır. CSS
Kapsayıcılar (Containers) bölümlerinde anlatılan display kuralları, Bootstrap ile gelen bu sınıflarla gerçekleştirilebilir. Display sınıfı oluşturmak Kapsayıcılar, Bootstrap’in temel yapı taşıdır. İçeği ekran için sınır değerleri kullanılır. Ögeye uygulanan display türüne göre doldurmak ve hizalamak için kullanılırlar. özelliğinin sınır değeri yoksa, özellik mobil cihaz Bootstrap içinde üç farklı türde kapsayıcı vardır; ekranlarından (xs) başlayarak ögeye etki eder. Söz dizimi varsayılan, full ve duyarlı kapsayıcı. aşağıdaki gibidir:
Varsayılan Kapsayıcı; Bootstrap içerisinde gelen .container • .d-{display değeri} xs ekranlar için kodu ile kullanılan varsayılan kapsayıcı sınıfı, sayfanın • .d-{sınır değeri}-{display değeri} sm,md,lg, xl ve genişliği değiştikçe (sınır değerlerine göre) ögenin xxl ekranlar için kapladığı alanı değiştirir (Ders kitabının 125. sayfasındaki Görsel 4.1’e bakabilirsiniz). Display değerleri aşağıda verilmiştir:
Full kapsayıcılarda, içerik genişliği ekran genişliği ile aynı • none boyutta olur. .container-fluid sınıf kodu ile kullanılır. • inline Aşağıdaki kod bloğunu tarayıcıda açtığınızda, web • inline-block sayfasının tüm ekran boyutlarında, %100 genişlik • grid kapladığını görebilirsiniz. • table
Duyarlı kapsayıcılar, içeriğin belirtilen sınır değerine kadar • table-cell %100 genişlikte, sınır değeri aşıldıktan sonra ise • table-row kenarlardan boşluk bırakarak yerleştirilmesi istenilen • flex durumlarda kullanılır. Söz dizimi .container- {sınır değeri • inline-flex kodu} olarak belirtilebilir (Kitabın 126. Sayfasındaki Görsel 4.3’e bakabilirsiniz). Ayrıca tüm kapsayıcı Flex
sınıflarının sınır değerlerine göre aldığı maksimum Flex, Bootstrap ile birlikte gelen bir diğer sayfa düzeni genişliğini kitabın 127. sayfasındaki Tablo 4.2’den takip yapısıdır. Ögeleri ve komponentleri hizalamak ve edebilirsiniz. boyutlandırmak için kullanılır. Basit flexbox yapıları kurmak için yeterlidir. İleri seviye düzenlemeler için CSS Grid koduna ihtiyaç duyulabilir. HTML dosyasında Bootstrap
Bootstrap ile gelen grid yapısı, mobil öncelikli düzenler ile gelen flex yapısını kurmak için ögeleri kapsayıcı eleman oluşturmak için kullanılan güçlü bir sistemdir. Çok sayıda altında toplamak gerekli. Kapsayıcı elemana display seçeneğe sahip, kapsamlı bir araçtır. Sayfayı 12 eşit sütuna sınıflarından olan .d-flex veya .d-inline-flex kuralını bölerek istenilen içeriğin yerleştirilmesine olanak sağlar. atamak gerekiyor. Bu kurallar sınır değerleri ile Grid yapısı oluşturmak için içerik .container sınıflarından tanımlanabilir. Örneğin .d-sm-flex veya .d-xl-inline-flex. birisi ile kapsanmalıdır. Kapsayıcının altındaki her satır .row ile kapsanmalıdır. Satırlar oluşturulduktan sonra Yönlendirme
satırların içindeki ögelere genişlik verilmesi gerekir. Bootstrap flex yapısında ögelerinin yatay, dikey veya tersi Geliştirici, yerleştireceği ögeleri 12 sütun arasında pay yönlerde yerleştirilmesine olanak sağlar. Kapsayıcı edebilir. Sütun bilgileri verirken {col}-{birim} şeklinde elemana atanabilecek yönlendirme sınıfları aşağıdaki oluşturulan sınıflar kullanılır. Örneğin ögenin konteyner gibidir:
genişliğinin yarısını kaplaması istenildiği durumlarda birim • .flex-row: Ögeleri, HTML dosyasındaki akışa sayısı 12/2=6 olarak hesaplanır. göre sol tarafa yaslayarak yerleştirir. Yatay
Bootstrap’te grid yapısının ekran boyutuna duyarlı yerleştirme yapar. Varsayılan değerdir. olduğunu söylemiştik. Yukarıdaki örnekte kullandığımız • .flex-row-reverse: Ögeleri, .flex-row sınıfının .col değerleri tüm ekranlarda aynı oranda çalışır. Ancak yatay eksende tersini alarak yerleştirir. sayfa tasarımında ögelerin genişliklerini ekran boyutuna
• .flex-column: Ögeleri, HTML dosyasındaki akışa • Font stillendirmeleri için: fw-bold, fw-bolder, göre yukarıdan başlayarak yerleştirir. Dikey fw-normal, fw-light, fw-lighter, fst-italic, fst- yerleştirme yapar. normal • .flex-column-reverse: Ögeleri, .flex-column Metin üzerinde farklı stillendirmeler yapabilmemiz de sınıfının dikey eksende tersini alarak yerleştirir. mümkün. Örneğin bir yazıda, yazının kalanına göre daha az justify-content Sınıfları önemli olan bir kısmı soluk renkle yazmak isteyebiliriz. Ögeleri flex yapısındaki ana eksene yerleştirmek için Bunun için ilgili kısma text-muted sınıfını uygulamanız kapsayıcıya atanan justify-content sınıfları kullanılabilir. yeterli olacaktır.
Söz dizimi justify-content-{değer} şeklindedir. Buradaki Kenarlıklar değer start, end, center, between, around veya evenly Bootstrap, sayfada bulunan ögelere kenarlık ekleyebilir, olabilir. kenarlığı şekillendirebilir veya renklendirebilir. Kenarlık align-items Sınıfları eklemek için border sınıfını kullanmak yeterlidir. Ögeye Ögeleri flex yapısındaki ana eksenin tersi yönünde dört tarafındaki kenarlıklar tek bir komutta eklenebileceği yerleştirmek için kapsayıcıya atanan align-items sınıfları gibi tek tek eklemek de mümkündür. Üst kenara vermek kullanılabilir. Söz dizimi align-items-{değer} şeklindedir. için border-top, sağ kenara vermek için border-right, alt Buradaki değer start, end, center, baseline veya stretch kenara vermek için border-bottom, sol kenara vermek için olabilir. borderleft sınıfları kullanılabilir.
Stillendirme Araçları Renkler
Bootstrap ile birlikte gelen en önemli yapı grid olsa da, Bootstrap, kendi içerisinde kullandığı hazır renk kodlarıyla dahili olarak gelen stillendirme araçları da oldukça beraber gelir. Bu renkler metin renklendirme, arka plan faydalıdır. Web sayfalarında ögeleri stillendirirken veya buton renklendirme gibi işlemlerde kullanılır. Örneğin geliştiriciye bazı stil sınıflarını sunarak, hız kazandırır. primary kodu maviye yakın #007BFF hex kodu ile Geliştirici bu sayede hem hızlı sınıflar üretebilir hem de tanımlanan bir renktir. Bu rengi metin için kullanırken text- renk kodları, metin boyutları gibi görünümü etkileyen primary, arka plan için kullanırken bg-primary koduyla değişkenleri en aza indirmiş olur kullanabilirsiniz.
Başlık ve Metin Stillendirme Margin ve Padding
Stillendirme araçlarını incelemeye başlık ve metin için Bootstrap ile ögelere margin ve padding özellikleri hazırlanan stil kurallarını uygulayarak başlayabiliriz. uygulanabilir. CSS kuralları kadar ayrıntılı değerler Bootstrap, tarayıcıların varsayılan başlık etiketlerinin verilmese de 6 farklı seviyede margin ve padding değerleri üzerine dahili olarak gelen stil kurallarını uygular. Örneğin uygulanabilir. Özellik uygulanırken söz dizimi Chrome tarayıcısının varsayılan olarak 2em font büyüklüğü {özellik}{taraf }-{boyut} şeklinde uygulanır. Söz dizimini uyguladığı <h1> etiketine, bootstrap ekran boyutunun 1200 ilk olarak özellik değişkeni ile incelemeye başlayalım:
px’den büyük olduğu durumlarda 2.5 rem uygular. Başlık • p, padding değeri uygulanmak istenildiğinde ögeleri ekrana duyarlı hâle gelmiş olur. Başlık etiketlerinin seçilir. font büyüklükleri ve stillerinin Bootstrap ile birlikte • m, margin değeri uygulanmak istenildiğinde değişimini kitabın 134. sayfasındaki Görsel 4.10’da seçilir. görebilirsiniz. Söz dizimindeki taraf değişkeni uygulanacak özelliğin Bazı durumlarda ise başlık etiketi ile işaretlenmeyen ögeyi yönünü belirtir. Özellik üst kenardan (top) ise t değerini başlık gibi göstermek isteyebiliriz. Örneğin ilk bölümde alır. Diğer değerler aşağıdaki gibidir: anlatılan SEO araçları, sayfada bir adet <h1> etiketi olmasını ister. SEO algoritmasından etkilenmemek için • t, yukarıdan uygulanacak değerler için kullanılır. <p> etiketli elemanı <h1> gibi gösterebiliriz. Bunun için • b, alt kenardan uygulanacak değerler için elemana .h1 sınıfını atamamız yeterli olacaktır. kullanılır. • s, sol kenardan uygulanacak değerler için BootStrap, metin biçimlendirme içinde birçok hazır kuralla kullanılır. birlikte gelir. Metnin hizalama, rengi, boyutu gibi özellikler • e, sağ kenardan uygulanacak değerler için Bootstrap ile birlikte gelen sınıflar yardımıyla kullanılır. düzenlenebilir. Metin stillendirme için kullanılan Bootstrap • x, sol ve sağ kenardan uygulanacak değerler için sınıflarından bazıları aşağıdaki gibidir: kullanılır. • Ekran alanında hizalama: text-start, text-center, • y, üst ve alt kenarlardan uygulanacak değerler için text-end uygulanır. • Metin rengini soluklaştırmak için: text-muted Boş bırakılırsa, değeri tüm kenarlara uygular. Söz • Büyük küçük harf değişimi için: text-lowercase, dizimindeki boyut değeri Bootstrap ile gelen $spacer text-uppercase, text-capitalize
değişkeni için katsayıdır. $spacer 1 rem büyüklüğüne oluşturmak için kapsayıcı elemana .navbar sınıfı atanır. eşittir. Bunun ardından yine aynı elemana hangi sınır değerlerinde görünümünü değiştireceğini belirten sınıfı atamak gerekir. • 0, uygulanacak değeri 0 olarak seçer. Sınır değerini belirtmek için gereken söz dizimi .navbar- • 1, $spacer * 0,25 değerini verir. expand-{sınır değeri} şeklindedir. Ekran genişliği sınır • 2, $spacer * 0,5 değerini verir. değerinin üstündeyken tüm navigasyon linkleri gösterilir. • 3, $spacer * 1 değerini verir. Sınır değerinin altında ise butonlar gizlenerek menüyü • 4, $spacer * 1,5 değerini verir. gösteren buton gösterilir. Butona basıldığında menü açılır • 5, $spacer * 3 değerini verir. ve linkler gösterilir. • auto, margin için auto değerini verir.
Söz dizimini örneklersek;
• pt-1 sınıfı padding-top:0,25rem özelliğini uygular. • margin:0!important özelliğini uygulamak için seçmemiz gereken sınıf m-0 sınıfıdır.
Arka Plan Sınıfları
Bootstrap, ögelerin arka planlarını renklendirmek için hazır sınıflar sunar. Söz dizimi .bg-{renk değeri} şeklindedir. Renk değeri, Renkler konusunda incelediğimiz renk kodlarından birisi olabilir.
Komponentler
Bootstrap, sayfa geliştirmeyi daha hızlı ve kolay hâle getiren çeşitli özelleştirilebilir komponentler sağlar. Bunlar ağırlıklı olarak temel sınıflara dayanır. Temel sınıf birçok ortak özellik grubuna sahipken değiştirici sınıf bir grup bireysel stile sahiptir.
Butonlar ve Buton Grupları
Bootstrap ile HTML sayfasında bulunan butonlar için renk ve şekil stillendirmesi yapılabilir. Stillendirilmek istenilen butona öncelikle .btn temel sınıfını ile Bootstrap’in buton kuralları atanmalıdır. Sonrasında buton değiştirici sınıflar kullanılarak stillendirilebilir. Renk değiştirici sınıflarda söz dizimi .btn-{renk kodu} şeklinde olabilir. Boyut değiştirici sınıflarda ise .btn-{boyut} şeklinde kullanılabilir. Buton komponentlerinde değiştirici sınıflarla ilgili ayrıntılı bilgi dokümantasyondan takip edilebilir. Bu konuda popüler kullanılan buton sınıfları ile ilgili örnekleri inceleyebilirsiniz.
Kart Komponenti
Bootstrap ile birlikte gelen kart komponenti, içerikleri ekrana duyarlı şekilde göstermek için kullanılır. İçeriği oluşturan ögeler esnek ve genişletilebilir yapıda kapsanır. Ögeler üst bilgi, alt bilgi, arka plan, resim gibi elemanlar olabilir. Geliştiriciler kart komponentleri kullanarak mümkün olduğunca az stil kuralı ile içerik oluşturabilir. Diğer Bootstrap komponentleri ile uyum içerisinde çalışırlar. İçeriği kart komponenti ile oluşturmak için kapsayıcı elemana .card sınıfının atanması gerekir.
Navigasyon Çubuğu
Bootstrap’in yaygın kullanılan komponentlerinden biri de navigasyon çubuğudur. Web sayfalarına kolay entegre edilebilmesi ve esnek yapısı popüler olmasının nedenlerinden bazılarıdır. Ekran boyutuna duyarlı navigasyon çubuğu oluşturulabilir. Navigasyon çubuğu