giriiş

jsDelivr ve bir şablon başlangıç sayfası ile duyarlı, mobil öncelikli siteler oluşturmak için dünyanın en popüler çerçevesi olan Bootstrap ile başlayın.

Hızlı başlangıç

Projenize hızlı bir şekilde Bootstrap eklemek mi istiyorsunuz? Ücretsiz bir açık kaynaklı CDN olan jsDelivr'i kullanın. Bir paket yöneticisi mi kullanıyorsunuz yoksa kaynak dosyaları mı indirmeniz gerekiyor? İndirilenler sayfasına gidin .

CSS

CSS'imizi yüklemek için stil sayfasını diğer tüm stil sayfalarından önce <link>kopyalayıp yapıştırın .<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Bileşenlerimizin birçoğunun çalışması için JavaScript kullanılması gerekir. Spesifik olarak, jQuery , Popper ve kendi JavaScript eklentilerimizi gerektirirler. jQuery'nin ince yapısını kullanıyoruz , ancak tam sürüm de destekleniyor.

Etkinleştirmek için aşağıdakilerden birini <script>sayfalarınızın sonuna, kapanış </body>etiketinin hemen öncesine yerleştirin. Önce jQuery, ardından Popper ve ardından JavaScript eklentilerimiz gelmelidir.

paket

Her Bootstrap JavaScript eklentisini iki paketimizden birine dahil edin. Her ikisi de bootstrap.bundle.jsve araç ipuçlarımız ve açılır pencerelerimiz için Popper'ıbootstrap.bundle.min.js içerir , ancak jQuery'yi içermez . Önce jQuery, ardından bir Bootstrap JavaScript paketi ekleyin. Bootstrap'a nelerin dahil olduğu hakkında daha fazla bilgi için lütfen içerik bölümümüzü inceleyin.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Ayırmak

Ayrı komut dosyası çözümünü kullanmaya karar verirseniz, önce Popper (araç ipuçları veya açılır pencere öğeleri kullanıyorsanız) ve ardından JavaScript eklentilerimiz gelmelidir.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Bileşenler

Hangi bileşenlerin açıkça jQuery, JavaScript ve Popper gerektirdiğini merak ediyor musunuz? Aşağıdaki bileşenleri göster bağlantısını tıklayın. Sayfa yapısından emin değilseniz, örnek bir sayfa şablonu için okumaya devam edin.

JavaScript gerektiren bileşenleri göster

Kapatma için uyarılar
Durumları ve onay kutusu/radyo işlevselliğini değiştirmek için düğmeler
Tüm slayt davranışları, kontroller ve göstergeler için Döngü
İçeriğin görünürlüğünü değiştirmek için daralt
Görüntüleme ve konumlandırma için açılır menüler (ayrıca Popper gerektirir )
Görüntüleme, konumlandırma ve kaydırma davranışı için modeller
Duyarlı davranışı uygulamak için Daraltma eklentimizi genişletmek için gezinme çubuğu
Kaydırma davranışı ve gezinme güncellemeleri için Scrollspy
Görüntüleme ve konumlandırma için araç ipuçları ve açılır pencereler (ayrıca Popper gerektirir )

Başlangıç şablonu

Sayfalarınızın en son tasarım ve geliştirme standartlarına göre ayarlandığından emin olun. Bu, uygun yanıt veren davranışlar için bir HTML5 belge türü kullanmak ve bir görünüm alanı meta etiketi eklemek anlamına gelir. Hepsini bir araya getirin ve sayfalarınız şöyle görünmelidir:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Genel sayfa gereksinimleri için ihtiyacınız olan tek şey bu. Sitenizin içeriğini ve bileşenlerini düzenlemeye başlamak için Düzen belgelerini veya resmi örneklerimizi ziyaret edin .

Önemli küreseller

Bootstrap, kullanırken farkında olmanız gereken bir dizi önemli küresel stil ve ayar kullanır ve bunların tümü neredeyse yalnızca çapraz tarayıcı stillerinin normalleştirilmesine yöneliktir. Hadi dalalım.

HTML5 doküman türü

Bootstrap, HTML5 doktipinin kullanılmasını gerektirir. Onsuz, bazı tuhaf tamamlanmamış stiller göreceksiniz, ancak bunu dahil etmek, önemli bir hıçkırıklara neden olmamalıdır.

<!doctype html>
<html lang="en">
  ...
</html>

Duyarlı meta etiket

Bootstrap, önce mobil cihazlar için kodu optimize ettiğimiz ve ardından CSS medya sorgularını kullanarak bileşenleri gerektiği gibi büyüttüğümüz bir strateji olan önce mobil geliştirilmiştir. Tüm cihazlar için düzgün oluşturma ve dokunarak yakınlaştırma sağlamak için , duyarlı görünüm alanı meta etiketini .<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Bunun bir örneğini başlangıç şablonunda çalışırken görebilirsiniz .

kutu boyutlandırma

CSS'de daha basit boyutlandırma için global box-sizingdeğeri olarak content-boxdeğiştiriyoruz border-box. Bu padding, bir öğenin son hesaplanan genişliğini etkilememesini sağlar, ancak Google Haritalar ve Google Özel Arama Motoru gibi bazı üçüncü taraf yazılımlarda sorunlara neden olabilir.

Nadiren geçersiz kılmanız gerektiğinde, aşağıdakine benzer bir şey kullanın:

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

Yukarıdaki snippet ile, ::beforeve aracılığıyla oluşturulan içerik dahil olmak üzere iç içe yerleştirilmiş öğelerin tümü, bunun ::afteriçin belirtilenleri devralır .box-sizing.selector-for-some-widget

CSS Püf Noktalarında kutu modeli ve boyutlandırma hakkında daha fazla bilgi edinin .

yeniden başlat

Gelişmiş tarayıcılar arası oluşturma için, tarayıcılar ve cihazlar arasındaki tutarsızlıkları düzeltmek için Yeniden Başlat'ı kullanırız ve ortak HTML öğelerine biraz daha fazla düşünülmüş sıfırlama sağlarız.

Toplum

Bootstrap geliştirme konusunda güncel kalın ve bu faydalı kaynaklarla topluluğa ulaşın.

Resmi Önyükleme Blogunu okuyun ve abone olun .
IRC'de diğer Bootstrapper'larla sohbet edin. irc.libera.chatSunucuda, kanalda #bootstrap.
Uygulama yardımı, Stack Overflow'ta (etiketli bootstrap-4) bulunabilir.
Geliştiriciler, maksimum keşfedilebilirlik için npm veya benzer dağıtım mekanizmaları bootstraparacılığıyla dağıtım yaparken Bootstrap'in işlevselliğini değiştiren veya ekleyen paketlerde anahtar kelimeyi kullanmalıdır.

En son dedikodular ve harika müzik videoları için Twitter'da @getbootstrap'ı da takip edebilirsiniz .

CSP'ler ve yerleşik SVG'ler

Çeşitli Bootstrap bileşenleri, bileşenleri tarayıcılar ve cihazlar arasında tutarlı ve kolay bir şekilde biçimlendirmek için CSS'mize gömülü SVG'ler içerir. Daha katı CSP yapılandırmalarınabackground-image sahip kuruluşlar için, seçeneklerinizi daha kapsamlı bir şekilde gözden geçirebilmeniz için yerleşik SVG'lerimizin (tümü aracılığıyla uygulanır) tüm örneklerini belgeledik .

Kapat düğmesi (uyarılarda ve modlarda kullanılır)
Özel onay kutuları ve radyo düğmeleri
Form anahtarları
Form doğrulama simgeleri
Özel seçim menüleri
Dönen kontroller
Gezinme çubuğu geçiş düğmeleri

Topluluk görüşmesine dayalı olarak , bunu kendi kod tabanınızda ele almak için bazı seçenekler arasında URL'lerin yerel olarak barındırılan varlıklarla değiştirilmesi, görüntülerin kaldırılması ve satır içi görüntülerin kullanılması (tüm bileşenlerde mümkün değildir) ve CSP'nizin değiştirilmesi yer alır. Tavsiyemiz, kendi güvenlik politikalarınızı dikkatlice gözden geçirmeniz ve gerekirse ileriye dönük en iyi yola karar vermenizdir.