Source

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? jsDelivr'deki kişiler tarafından ücretsiz olarak sağlanan 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Bileşenlerimizin birçoğunun çalışması için JavaScript kullanılması gerekir. Spesifik olarak, jQuery , Popper.js ve kendi JavaScript eklentilerimizi gerektirirler. Aşağıdakileri etkinleştirmek <script>için sayfalarınızın sonuna, kapanış etiketinin hemen öncesine yerleştirin . </body>Önce jQuery, ardından Popper.js ve ardından JavaScript eklentilerimiz gelmelidir.

jQuery'nin ince yapısını kullanıyoruz , ancak tam sürüm de destekleniyor.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Hangi bileşenlerin açıkça jQuery, JS ve Popper.js 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.

Bizim bootstrap.bundle.jsve Popperbootstrap.bundle.min.js dahil , ancak jQuery değil . Bootstrap'a nelerin dahil olduğu hakkında daha fazla bilgi için lütfen içerik bölümümüzü inceleyin.

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 listeler (ayrıca Popper.js 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 ve konumlandırma için araç ipuçları ve açılır pencereler (ayrıca Popper.js 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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.

  • Twitter'da @getbootstrap'ı takip edin .
  • Resmi Önyükleme Blogunu okuyun ve abone olun .
  • IRC'de diğer Bootstrapper'larla sohbet edin. irc.freenode.netSunucuda, 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 .