Bootstrap CDN Kurulumu: Starter Template, Bundle, Popper ve Dosya Seçimi

Adım 1: CSS bağlantısını ekleyin

Belgeler stil dosyası bağlantısını <head> içine, diğer tüm stil dosyalarınızdan önce koymanızı ister. Sıra önemlidir: CSS'te aynı özgüllükteki kurallardan sonra gelen kazanır, dolayısıyla kendi stil dosyanız Bootstrap'ten sonra yüklenirse onun kurallarını rahatça ezebilirsiniz. Aşağıdaki satır, Bootstrap deposundaki config.yml dosyasında 5.0.2 için tanımlı adres ve özet değeriyle yazılmıştır.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

Adım 2: JavaScript için bundle ya da ayrı dosyalar

Bootstrap'in birçok bileşeni kendi JavaScript eklentilerine ve Popper'a ihtiyaç duyar. Betiği sayfanın sonuna, </body> etiketinden hemen önceye koyarsınız. Belgeler iki seçenekten yalnızca birini kullanmanızı söyler.

Seçenek 1: Bundle

bootstrap.bundle.min.js tüm Bootstrap eklentilerini ve Popper'ı tek dosyada toplar. Açılır menü, tooltip veya popover kullanacaksanız ve ayrıca Popper yönetmek istemiyorsanız en sade yol budur.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Seçenek 2: Ayrı Popper ve Bootstrap

Popper'ı ayrı yüklemeyi seçerseniz önce Popper, ardından bootstrap.min.js gelmelidir. Sayfada tooltip ve popover yoksa Popper satırı belgelere göre isteğe bağlıdır, ancak açılır menülerin de Popper'a dayandığını unutmayın. 5.0.2 için tanımlı Popper adresi 2.9.2 sürümünü gösterir.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Tam starter template

Bu iki adımı HTML5 doctype ve zorunlu meta etiketleriyle birleştirdiğinizde aşağıdaki sayfayı elde edersiniz. Resmî şablonun Türkçe hâlidir; ikinci seçenek yorum satırı içinde durur, isterseniz birinciyi silip onu açabilirsiniz.

<!doctype html>
<html lang="tr">
  <head>
    <!-- Zorunlu meta etiketleri -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS: diğer tüm stil dosyalarından önce -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Merhaba dünya!</title>
  </head>
  <body>
    <h1>Merhaba dünya!</h1>

    <!-- Seçenek 1: Popper dahil Bootstrap paketi -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Seçenek 2: Önce Popper, sonra Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

• <!doctype html>: Bootstrap HTML5 doctype ister. Belgelere göre doctype olmadan stiller eksik ve tutarsız görünebilir.
• lang="tr": Sayfanın dilini bildirir. Ekran okuyucular ve tarayıcılar bu bilgiyi kullanır.
• <meta charset="utf-8">: Türkçe karakterlerin doğru görünmesi için karakter kodlamasını belirler.
• <meta name="viewport" ...>: Mobil cihazlarda doğru ölçeklemeyi ve dokunarak yakınlaştırmayı sağlar. Bu etiket olmadan kırılma noktaları telefonda beklediğiniz gibi çalışmaz.
• <link ... bootstrap.min.css>: Bootstrap'in tüm CSS katmanlarını getirir.
• <script ... bootstrap.bundle.min.js>: Eklentileri ve Popper'ı getirir; belgeler bu betiği sayfanın sonuna, kapanış body etiketinin hemen önüne koymanızı ister.

Viewport etiketinin arkasındaki kavram mobil uyumluluk nedir yazısında anlatılıyor. Resmî "Starter Template" örnek sayfası da aynı iskeletin üstüne bir başlık, düğme ve iki sütunlu bir bölüm ekleyerek ilk sayfanın nasıl görünebileceğini gösterir.

integrity ve crossorigin öznitelikleri

CDN bağlantılarındaki integrity değeri, Bootstrap deposundaki config.yml dosyasında sha384- önekiyle verilen ve dosyanın içeriğine ait olan bir özettir; resmî bağlantılarda her zaman crossorigin="anonymous" ile birlikte yazılır. Bu özniteliklerin tarayıcıda tam olarak nasıl çalıştığını HTML serisindeki integrity ve crossorigin özniteliği yazısında bulabilirsiniz. Bootstrap açısından bilmeniz gereken nokta şudur: her özet yalnızca belirli bir dosyaya, yani belirli bir sürüme aittir. Adresteki sürüm numarasını değiştirip eski özeti bırakırsanız dosya yüklenmez. Sürüm yükseltirken bağlantıyı ve özeti her zaman o sürümün belgesinden birlikte kopyalayın.

Bilmeniz gereken genel ayarlar

Giriş sayfası, Bootstrap'in sayfanın tamamını etkileyen birkaç önemli ayarını listeler. Bunlar çoğunlukla tarayıcılar arası farkları gidermeye yöneliktir.

Box-sizing

Bootstrap, genel box-sizing değerini content-box yerine border-box yapar. Böylece dolgu (padding), öğenin son genişliğini büyütmez. Belgeler bunun Google Maps ve Google Custom Search Engine gibi bazı üçüncü taraf bileşenlerde sorun çıkarabileceğini not eder. Böyle bir bileşen için ayarı geri almanız gerekirse şu yapıyı önerir:

.selector-for-some-widget {
  box-sizing: content-box;
}

Bu kuralla, seçtiğiniz kapsayıcının içindeki öğeler ve ::before ile ::after ile üretilen içerik de belirtilen değeri devralır. Kutu modelinin kendisi CSS öğrenme rehberi içindeki yazılarda anlatılıyor.

Reboot

Bootstrap, tarayıcılar ve cihazlar arasındaki tutarsızlıkları düzeltmek için Reboot adlı bir temel stil katmanı kullanır. Başlık ve paragrafların üst boşluğu, yazı tipi yığını, liste dolgusu ve form öğelerinin varsayılanları bu katmandan gelir. Ayrıntılar Reboot ve tipografi sınıfları yazısında.

Kurulumu test edin

Starter template'i kaydettikten sonra <h1> satırının altına şu açılır menüyü ekleyin. Düğme stillendirilmiş görünüyorsa CSS, menü tıklanınca açılıyorsa JavaScript ve Popper doğru yüklenmiştir. Menü açılmıyorsa ilk bakacağınız yer, betiğin bundle olup olmadığı ya da Popper'ın Bootstrap'ten önce yüklenip yüklenmediğidir.

<div class="container py-4">
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="menuDeneme" data-bs-toggle="dropdown" aria-expanded="false">
      Kurulumu dene
    </button>
    <ul class="dropdown-menu" aria-labelledby="menuDeneme">
      <li><a class="dropdown-item" href="#">Menü açıldıysa JavaScript ve Popper yüklendi</a></li>
    </ul>
  </div>
</div>

Modül olarak kullanmak

Bootstrap, tarayıcıda modül olarak içe aktarılabilen bir ESM sürümü de sunar: bootstrap.esm.js ve bootstrap.esm.min.js. Hedef tarayıcılarınız modülleri destekliyorsa <script type="module"> içinde yalnızca ihtiyacınız olan eklentiyi alabilirsiniz. JavaScript sayfasındaki örnek, sayfadaki tüm toast öğelerini bu yolla başlatır:

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

Hangi CSS ve JavaScript dosyasını seçmeli?

İndirilebilir derlenmiş paket ve npm paketi, dist/ klasöründe aynı dosyaları içerir. "Contents" sayfasındaki karşılaştırmaya göre dosyalar şu katmanları taşır:

Her dosyanın .min.css uzantılı küçültülmüş hâli, .rtl.css uzantılı sağdan sola hâli ve bunların .map uzantılı kaynak haritaları da vardır. Kaynak haritaları, bazı tarayıcıların geliştirici araçlarında küçültülmüş dosya yerine okunaklı kaynağı görmenizi sağlar. Küçültülmüş ve küçültülmemiş dosyalar aynı kuralları içerir; fark yalnızca boşlukların ve yorumların atılmış olmasıdır.

Örneğin yalnızca Bootstrap'in grid sistemini başka bir tasarımla birlikte kullanmak istiyorsanız bootstrap-grid.min.css yeterlidir; ancak o zaman düğme, kart veya Reboot kuralları gelmez. JavaScript tarafında bootstrap.bundle.js Popper'ı içerir, bootstrap.js içermez. Eklentileri tek tek yüklemek için paketteki js/dist/*.js dosyalarını kullanabilirsiniz; bu durumda eklentiler arası bağımlılıkları belgelerden kontrol etmeniz gerekir.

İndirerek kullanmak

CDN yerine dosyaları kendi sunucunuzdan sunmak isterseniz "Download" sayfasındaki derlenmiş paketi indirebilirsiniz. Bu paket derlenmiş ve küçültülmüş CSS ile JavaScript dosyalarını içerir; belgeler, kaynak dosyalar ve Popper gibi isteğe bağlı bağımlılıklar içinde yoktur. Bu yüzden ayrı bootstrap.min.js kullanacaksanız Popper'ı kendiniz eklemeniz gerekir, bundle dosyası ise Popper'ı zaten içerir. Kaynak kod indirmesi ayrıca Sass ve JavaScript kaynaklarını getirir, ancak derlemek için bir Sass derleyicisi ve Autoprefixer gerekir. Resmî örnek şablonlar da ayrı bir zip dosyası olarak indirilebilir. Dosyaları kendi sunucunuzdan sunduğunuzda bağlantıdaki adresi yerel yola çevirirsiniz; statik dosyaları barındırma seçenekleri için ücretsiz HTML site hostingi yazısına bakabilirsiniz.

Sağdan sola diller için RTL kurulumu

Arapça gibi sağdan sola yazılan dillerde iki koşul zorunludur: <html> öğesine dir="rtl" ve uygun bir lang değeri, örneğin lang="ar" eklemek. Ardından normal CSS yerine bootstrap.rtl.min.css dosyasını yüklersiniz. Belgeler RTL desteğini 5.0'da deneysel olarak işaretler. Aşağıdaki şablon resmî RTL başlangıç şablonunun kısaltılmış hâlidir:

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
    <title>مرحبا بالعالم!</title>
  </head>
  <body>
    <h1>مرحبا بالعالم!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>

RTL sürümü, yön bildiren sınıf adlarının mantıksal karşılıklarına dayanır; ms-3 gibi "start" ve "end" içeren sınıflar soldan sağa sayfada sol tarafı, sağdan sola sayfada sağ tarafı hedefler.

Kendi stil dosyanızı eklemek

Gerçek bir projede Bootstrap'in yanında kendi kurallarınızı tutacağınız bir stil dosyası olur. Bu dosyayı Bootstrap bağlantısının altına koyun; böylece belgelerdeki "diğer tüm stil dosyalarından önce" kuralına uymuş olursunuz ve kendi sınıflarınız Bootstrap'in aynı özgüllükteki kurallarını ezer. Aşağıdaki <head> bölümünde css/site.css sizin dosyanızdır:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link href="css/site.css" rel="stylesheet">
  <title>Projem</title>
</head>

Bootstrap'in bir değerini yalnızca bir iki yerde değiştirecekseniz bu yöntem yeterlidir. Renkler, yazı tipi ya da boşluk ölçeği gibi sitenin genelini etkileyen değerleri değiştirmek istiyorsanız kuralları tek tek ezmek yerine Sass kaynaklarıyla derlemek daha tutarlı sonuç verir; o yol Sass ile özelleştirme yazısında anlatılıyor. Derlenmiş CSS ayrıca :root üzerinde --bs-primary gibi renk değişkenleri tanımlar; bunların listesi CSS değişkenleri ve RFS yazısında.

Kurulum tamamlandıktan sonra belgelerin önerdiği sonraki adım, yerleşim sayfalarına ya da resmî örneklere geçmektir. Yerleşimin ilk iki taşı container ve grid sistemi yazılarında; hazır sayfa düzenleri için resmî örnek şablonlar (album, blog, dashboard, sign-in ve diğerleri) iyi bir başlangıç noktasıdır.

Sık yapılan kurulum hataları

• Ayrı dosyada Popper'ı unutmak: bootstrap.min.js kullanıp Popper'ı eklemezseniz açılır menü, tooltip ve popover çalışmaz. Ya bundle'a geçin ya da Popper'ı önce yükleyin.
• Popper'ı Bootstrap'ten sonra yüklemek: Belgeler sırayı açıkça belirtir: önce Popper, sonra Bootstrap.
• Hem bundle hem ayrı dosyaları eklemek: Eklentiler iki kez yüklenir. Şablondaki iki seçenekten yalnızca birini bırakın.
• Viewport meta etiketini atlamak: Telefon, sayfayı masaüstü genişliğinde çizip küçültür ve col-md-* gibi sınıflar beklenmedik davranır.
• Kendi CSS dosyasını Bootstrap'ten önce eklemek: Aynı özgüllükteki kurallarınız ezilir. Bootstrap bağlantısı ilk sırada olmalı.
• Sürüm ve özet uyuşmazlığı: Adresteki sürümü değiştirip eski integrity değerini bırakmak dosyanın yüklenmemesine yol açar.
• v4 öznitelikleri: İnternetten kopyalanan eski örneklerdeki data-toggle, v5'te data-bs-toggle olmalıdır. Diğer belirtiler için Bootstrap çalışmıyor yazısına bakın.

Sık Sorulan Sorular

CSS ve JavaScript dosyaları hangi sırayla eklenmeli?

CSS bağlantısı <head> içinde ve kendi stil dosyalarınızdan önce, JavaScript betiği ise </body> etiketinden hemen önce yer almalıdır. Ayrı dosya kullanıyorsanız Popper, Bootstrap betiğinden önce gelir.

Yalnızca CSS kullanırsam ne olur?

Yerleşim, tipografi, yardımcı sınıflar ve JavaScript gerektirmeyen bileşenler normal çalışır. Açılır menü, modal, collapse, carousel ve kapatılabilir uyarı gibi bileşenler ise görünür ama etkileşim kurmaz.

bootstrap.bundle.min.js ile bootstrap.min.js arasındaki fark nedir?

Bundle dosyası Popper'ı içerir, diğeri içermez. Tooltip, popover veya açılır menü kullanıyorsanız ikinci dosyayla birlikte Popper'ı ayrıca yüklemeniz gerekir.

CDN yerine dosyaları kendi sunucumda tutabilir miyim?

Evet. Derlenmiş paketi indirip css ve js klasörlerini projenize kopyalar, bağlantılardaki adresleri yerel yollarla değiştirirsiniz. Yerel dosyalarda integrity özniteliği kullanmak zorunlu değildir.

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 nedir? · Bootstrap npm kurulumu · Bootstrap JavaScript API · integrity ve crossorigin özniteliği