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.

Bu sayfada

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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

Bileşenlerimizin birçoğunun çalışması için JavaScript kullanılması gerekir. Spesifik olarak, kendi JavaScript eklentilerimize ve Popper'a ihtiyaç duyarlar . Etkinleştirmek için aşağıdakilerden birini <script>sayfalarınızın sonuna, kapanış </body>etiketinin hemen öncesine yerleştirin.

paket

Her Bootstrap JavaScript eklentisini ve bağımlılığını 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 . 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/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Ayırmak

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Modüller

kullanıyorsanız <script type="module">, lütfen Bootstrap'i modül olarak kullanma bölümümüze bakın.

Bileşenler

Hangi bileşenlerin açıkça JavaScript ve Popper'ımızı gerektirdiğini merak ediyor musunuz? Aşağıdaki bileşenleri göster bağlantısını tıklayın. Genel 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
Görüntüleme, konumlandırma ve kaydırma davranışı için tuval dışı
Görüntüleme ve çıkarma için tostlar
Görüntüleme ve konumlandırma için araç ipuçları ve açılır pencereler (ayrıca Popper gerektirir )
Kaydırma davranışı ve gezinme güncellemeleri için Scrollspy

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">

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

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

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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Sonraki adımlar için, sitenizin içeriğini ve bileşenlerini düzenlemeye başlamak için Mizanpaj 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">

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-5) 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 .