Bootstrap Nedir, Ne İşe Yarar? İçeriği, Yaklaşımı ve Tarayıcı Desteği

Bootstrap neler içerir?

Resmî "Contents" sayfası, derlenmiş Bootstrap paketini dört katmana ayırır: yerleşim (layout), içerik (content), bileşenler (components) ve yardımcı sınıflar (utilities). Tam paket olan bootstrap.css dördünü de içerir. Bunun yanında yalnızca grid sistemini ve flex yardımcılarını taşıyan bootstrap-grid.css, yalnızca yardımcı sınıfları taşıyan bootstrap-utilities.css ve yalnızca Reboot kurallarını taşıyan bootstrap-reboot.css bulunur. Her birinin küçültülmüş (.min), sağdan sola diller için (.rtl) ve tarayıcı geliştirici araçları için kaynak haritalı (.map) sürümleri vardır.

JavaScript tarafında üç ana dosya göreceksiniz: Popper'ı da içeren bootstrap.bundle.js, Popper içermeyen bootstrap.js ve tarayıcıda modül olarak içe aktarılabilen bootstrap.esm.js. Kaynak kod indirmesinde ise bunlara ek olarak Sass kaynakları (scss/), JavaScript kaynakları (js/), belgelerin kaynağı ve resmî örnek şablonlar gelir.

Kısa tarihçe

Resmî "About" sayfasına göre Bootstrap, 2010 yılının ortasında Twitter'da bir tasarımcı ve bir geliştirici tarafından, @mdo ve @fat kullanıcı adlarıyla bilinen iki kişi tarafından başlatıldı. Açık kaynak olmadan önce adı Twitter Blueprint idi ve şirket içi araçların stil rehberi olarak kullanılıyordu. İlk genel sürüm 19 Ağustos 2011'de yayımlandı.

Sonraki büyük sürümler çerçevenin yönünü belirledi. Bootstrap 2 duyarlı davranışı isteğe bağlı bir stil dosyası olarak ekledi. Bootstrap 3 kütüphaneyi yeniden yazarak varsayılan olarak duyarlı ve mobil öncelikli hâle getirdi. Bootstrap 4 iki mimari değişiklik getirdi: Sass'a geçiş ve CSS flexbox'a dayalı yerleşim. Bootstrap 5 ise v4'ün kod tabanını mümkün olduğunca az kırıcı değişiklikle iyileştirmeye odaklandı; eski tarayıcı desteğini bıraktı, jQuery yerine düz JavaScript'e geçti ve araç setinde CSS özel değişkenleri gibi daha yeni teknikleri benimsedi. v4'ten gelenler için ayrıntılı liste Bootstrap 4'ten 5'e geçiş yazısında.

Bootstrap'in tasarım yaklaşımı

Belgelerdeki "Approach" sayfası, ekibin neden belirli yolları seçtiğini altı ilkeyle özetler. Bu ilkeleri bilmek, sınıfların neden böyle adlandırıldığını ve Bootstrap'i genişletirken nasıl düşünmeniz gerektiğini anlamanızı kolaylaştırır.

• Bileşenler duyarlı ve mobil öncelikli olmalı.
• Bileşenler bir temel sınıfla kurulmalı, ek sınıflarla (modifier) genişletilmeli.
• Bileşen durumları ortak bir z-index ölçeğine uymalı.
• Mümkün olduğunda JavaScript yerine HTML ve CSS tercih edilmeli.
• Mümkün olduğunda özel stiller yerine yardımcı sınıflar kullanılmalı.
• Mümkün olduğunda katı HTML yapısı (doğrudan alt öğe seçicileri) dayatılmamalı.

Mobil öncelik ve min-width sorguları

Bootstrap stillerinin çoğu min-width medya sorgularıyla yazılır: bir kural belirli bir kırılma noktasında başlar ve daha geniş ekranlarda da geçerli kalır. Belgelerdeki örneğe göre .d-none sıfır genişlikten sonsuza kadar uygulanırken .d-md-none yalnızca orta kırılma noktasından itibaren uygulanır. Amaç, küçük ekran için az kural yazıp ekran büyüdükçe stil eklemek ve böylece üzerine yazma ihtiyacını azaltmaktır. Ekip, bileşenin karmaşıklığı gerektirdiğinde zaman zaman max-width sorgusu da kullanır. Altı kademenin değerleri kırılma noktaları yazısında.

<p class="d-md-none">Bu paragraf yalnızca 768px altındaki ekranlarda görünür.</p>
<p class="d-none d-md-block">Bu paragraf 768px ve üstünde görünür.</p>

Yukarıdaki iki paragraf aynı yerde durur ama hiçbir zaman birlikte görünmez: ilki md ve üstünde gizlenir, ikincisi varsayılan olarak gizlidir ve md'den itibaren blok olarak görünür. Görünürlük sınıflarının tam listesi display sınıfları yazısında.

Temel sınıf ve ek sınıflar

Reboot dışında Bootstrap'in tüm stilleri sınıf seçicisi kullanır; input[type="text"] gibi tür seçicilerinden ve .parent .child gibi gereksiz üst sınıf zincirlerinden kaçınılır, çünkü bunlar kuralı ezmeyi zorlaştıracak kadar özgül hâle getirir. Her bileşenin değişmeyen ortak özelliklerini taşıyan bir temel sınıfı vardır. Belgelerin verdiği örnekle .btn görüntü türü, dolgu ve kenarlık kalınlığı gibi ortak değerleri belirler; .btn-primary gibi ek sınıflar renk, arka plan ve kenarlık rengini ekler. Boyut varyantları da aynı mantıkla çalışır.

<button type="button" class="btn btn-primary">Kaydet</button>
<button type="button" class="btn btn-outline-secondary">Vazgeç</button>
<button type="button" class="btn btn-danger btn-sm">Sil</button>

Üç düğmenin üçü de btn temel sınıfını taşır. İlki dolu birincil renk, ikincisi yalnızca çerçeveli ikincil renk kullanır; üçüncüsü tehlike rengine ek olarak btn-sm ile küçültülmüştür. Düğme varyantlarının hepsi Bootstrap buton sınıfları yazısında.

z-index ölçekleri

Bootstrap'te iki ayrı z-index ölçeği vardır. Düğme grupları, input grupları ve sayfalama gibi bileşenlerde öğeler çift kenarlık oluşmasın diye üst üste biner; bunlar 0 ile 3 arasında bir ölçek kullanır. 0 varsayılan durumdur, 1 üzerine gelme (:hover), 2 etkin durum (:active ya da .active), 3 ise odak (:focus) içindir. Odaklanan öğe kullanıcının dikkatinin olduğu yer olduğu için en üstte durur. Açılır menüler, sabit ve yapışkan navbar'lar, modallar, tooltip ve popover gibi katman bileşenleri ise 1000'den başlayan ayrı bir ölçek kullanır. Belgelere göre bu başlangıç değeri, Bootstrap stilleriyle sizin stilleriniz arasında küçük bir tampon bırakmak için seçilmiştir; örneğin modal sayfanın geri kalanını engellediği için navbar'ların üstüne yerleştirilir.

Önce HTML ve CSS

Ekip, HTML ve CSS'in daha çok kişi tarafından erişilebilir ve tarayıcıda JavaScript'ten hızlı olduğunu düşündüğü için mümkün olan her yerde onları tercih eder. Bu ilkenin sonucu, JavaScript eklentilerinin veri öznitelikleriyle çalışabilmesidir: neredeyse hiç kod yazmadan, yalnızca HTML ile bir eklentiyi kullanabilirsiniz. Aynı nedenle .btn sınıfı hemen her öğeye eklenebilse de anlamsal değer ve tarayıcı davranışı sağladıkları için <button> ve <a> öğeleri önerilir. Form doğrulamasında da kendi eklentilerini yazmak yerine tarayıcının :valid ve :invalid sözde sınıflarını kullanırlar.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Dikkat:</strong> Oturumunuz 5 dakika içinde kapanacak.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Kapat"></button>
</div>

Bu uyarı kutusu, kapatma düğmesindeki data-bs-dismiss="alert" özniteliği sayesinde tıklanınca kapanır; sayfaya yazdığınız tek JavaScript Bootstrap'in kendi paketidir. fade ve show sınıfları kapanışı animasyonlu yapar. Ayrıntılar Bootstrap alert ve JavaScript API yazılarında.

Yardımcı sınıflar

Yardımcı sınıf, genellikle tek ve değişmez bir özellik-değer çiftini bir sınıf adına bağlar; .d-block yalnızca display: block demektir. Belgeler bu sınıfların iki faydasını öne çıkarır: HTML yazarken hızlı olmak ve özel CSS miktarını azaltmak. En sık tekrarlanan özellik-değer çiftlerini tek sınıfta toplamak, proje büyüdükçe stil dosyasının şişmesini engeller. Bootstrap 3'te bunlara "helper" deniyordu.

<div class="p-3 mb-3 bg-light border rounded">
  <h2 class="h5 mb-2">Sipariş özeti</h2>
  <p class="mb-0 text-muted">Bu kutu için tek satır özel CSS yazılmadı.</p>
</div>

Bu kutudaki dolgu, alt boşluk, açık arka plan, kenarlık, yuvarlak köşe, küçük başlık boyutu ve soluk metin rengi tamamen hazır sınıflardan gelir. Sınıf ailelerinin ayrıntıları margin ve padding, renk sınıfları ve border ve rounded yazılarında.

Esnek HTML

Son ilke, bileşenler için gereğinden katı bir HTML yapısı istememektir. Bu yüzden CSS seçicileri tek sınıf üzerine kurulur ve doğrudan alt öğe seçicisinden (>) mümkün olduğunca kaçınılır. Sonuç, hem sizin için daha esnek bir işaretleme hem de daha basit ve daha az özgül CSS'tir. Kod biçimi için ekip, @mdo'nun Code Guide rehberini, Sass ve CSS için Stylelint'i, HTML için de vnu-jar doğrulayıcısını kullanır.

Hangi bileşenler JavaScript ister?

Bootstrap'in CSS kısmı tek başına çalışır, ancak giriş sayfası birçok bileşenin Bootstrap eklentilerine ve Popper'a ihtiyaç duyduğunu belirtir. Aşağıdaki liste o sayfadaki listenin Türkçe özetidir:

• Alert: uyarıyı kapatmak için.
• Button: durum değiştirme ve onay kutusu ya da radyo davranışı için.
• Carousel: tüm kaydırma davranışları, kontroller ve göstergeler için.
• Collapse: içeriği gösterip gizlemek için.
• Dropdown: menüyü göstermek ve konumlandırmak için, ayrıca Popper gerekir.
• Modal: göstermek, konumlandırmak ve kaydırma davranışı için.
• Navbar: duyarlı davranış için Collapse eklentisini kullanır.
• Toast: göstermek ve kapatmak için.
• Tooltip ve popover: göstermek ve konumlandırmak için, ayrıca Popper gerekir.
• Scrollspy: kaydırmaya göre menüyü güncellemek için.

Popper'ı ayrıca yüklemek istemiyorsanız bootstrap.bundle.min.js dosyasını kullanın; Popper bu paketin içindedir. Belgeler, JavaScript kapalı olduğunda eklentilerin zarif biçimde geri çekilmediğini de not eder; bu durum sizin için önemliyse <noscript> ile kullanıcıyı bilgilendirmeniz önerilir.

Tarayıcı ve cihaz desteği

Bootstrap 5.0, tüm büyük tarayıcıların ve platformların en son kararlı sürümlerini destekler. Masaüstünde Chrome, Firefox, Microsoft Edge, Opera ve Safari, mobilde Android ve iOS üzerindeki varsayılan tarayıcılar bu kapsamdadır. Firefox için normal kararlı sürüme ek olarak en son Genişletilmiş Destek Sürümü (ESR) de desteklenir. Android tarafında Android Browser ve WebView için belge v6.0 ve üstünü belirtir. Opera Mini, UC Browser Mini ve Amazon Silk gibi proxy tarayıcılar desteklenmez.

Kesin aralık deponun kökündeki .browserslistrc dosyasında tutulur ve Autoprefixer CSS öneklerini bu listeye göre ekler. v5.0.2'deki dosya şu satırları içerir:

>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
Firefox ESR
iOS >= 12
Safari >= 12
not Explorer <= 11

Aynı sayfa mobil cihazlarda bilinen birkaç sınırlamayı da listeler: iOS ve Android'de <body> üzerindeki overflow: hidden desteği sınırlı olduğu için modalın üst ya da alt ucunu geçecek kadar kaydırdığınızda arkadaki sayfa da kayabilir. Sayfa yakınlaştırmasının bazı bileşenlerde görüntü bozulmalarına yol açabileceği de belirtilir. CSS doğrulayıcılarının verdiği bazı uyarılar ise eski tarayıcı hataları için bilerek eklenmiş düzeltmelerden kaynaklanır ve belgeye göre pratikte sorun oluşturmaz.

Lisans: ücretsiz mi?

Evet. Deponun README dosyasındaki telif ve lisans bölümüne göre Bootstrap'in kodu MIT Lisansı ile, belgeleri ise Creative Commons Attribution 3.0 ile yayımlanır. Depodaki LICENSE dosyasında yer alan MIT metni yazılımı kullanma, kopyalama, değiştirme, dağıtma ve satma izni verir; koşulu, telif bildirimi ile izin metninin yazılımın kopyalarında korunmasıdır. Derlenmiş CSS ve JavaScript dosyalarının başındaki yorum bloğu telif ve lisans bilgisini zaten taşır, bu yüzden dosyaları küçültürken o bloğu silmemeye dikkat edin.

Bootstrap ne zaman iyi bir seçimdir?

Bootstrap'in güçlü olduğu yer, belgelenmiş ve birbiriyle uyumlu bir bileşen setini hemen kullanabilmenizdir. Yönetim panelleri, kurumsal sayfalar, prototipler ve form ağırlıklı uygulamalar için hazır grid, form stilleri ve etkileşimli bileşenler size zaman kazandırabilir. Resmî örnek şablonlar (dashboard, checkout, sign-in, pricing ve diğerleri) bu tür sayfaların nasıl kurulacağını gösterir.

Kendine özgü bir görsel kimliğe ihtiyacınız varsa derlenmiş CSS'i olduğu gibi kullanmak yerine Sass değişkenleriyle renkleri, yazı tiplerini ve boşluk ölçeğini değiştirmeniz gerekir; bu iş Sass ile özelleştirme yazısında anlatılıyor. Yalnızca grid ya da yalnızca yardımcı sınıflar gerekiyorsa paketin tamamını yüklemek yerine daha küçük CSS dosyalarından birini seçebilirsiniz. Yardımcı sınıf odaklı başka çerçeveler de vardır; bunlardan biri olan Tailwind için Tailwind CSS rehberi yazısına bakabilirsiniz.

Sık yanılgılar

• "Bootstrap jQuery ister." v5 jQuery bağımlılığını kaldırdı. Sayfada jQuery varsa bileşenler jQuery eklentisi olarak da kaydedilir, ama gerekmez.
• "Bootstrap kullanmak için JavaScript yazmak gerekir." Çoğu eklenti data-bs-* öznitelikleriyle çalışır. Yalnızca toast, tooltip ve popover gibi bazı bileşenleri kendiniz başlatmanız gerekir.
• "v4 örnekleri v5'te de çalışır." data-toggle, ml-*, .form-group ve jumbotron gibi pek çok şey değişti ya da kaldırıldı.
• "Bootstrap her sınıfı her sürümde içerir." İnternetteki yeni örneklerin bazı sınıfları 5.0.2'de yoktur; sürümünüzün belgelerini esas alın.
• "Bootstrap yalnızca CDN ile kullanılır." npm, yarn, Composer, NuGet ve RubyGems ile de kurulabilir; ayrıntılar npm kurulumu yazısında.

Sık Sorulan Sorular

Bootstrap bir programlama dili mi?

Hayır. Bootstrap, HTML, CSS ve JavaScript ile yazılmış bir çerçevedir. Sayfanızı yine HTML ile yazarsınız; Bootstrap size hazır sınıflar ve eklentiler verir.

Bootstrap mobil uyumlu mu?

Evet. Bootstrap 3'ten bu yana varsayılan olarak mobil öncelikli tasarlanır. Bunun doğru çalışması için sayfanızda viewport meta etiketinin bulunması gerekir; konunun genel çerçevesi mobil uyumluluk nedir yazısında.

Bootstrap Internet Explorer'da çalışır mı?

Bootstrap 5 Internet Explorer'ı desteklemez. Bu tarayıcıyı desteklemeniz gerekiyorsa belgeler Bootstrap v4 kullanmanızı önerir.

Bootstrap ile özel tasarım yapılabilir mi?

Yapılabilir. Derlenmiş CSS'in üzerine kendi kurallarınızı yazabilir ya da Sass kaynaklarını kullanarak renkleri, yazı tiplerini, kırılma noktalarını ve hangi bileşenlerin derleneceğini değiştirebilirsiniz.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Bootstrap CDN kurulumu · Bootstrap kırılma noktaları · Bootstrap 4'ten 5'e geçiş · CSS öğrenme rehberi