Ana içeriğe geç Dokümanlar navigasyonuna atla
Check
in English

Bootstrap'i kullanmaya başlayın

Bootstrap, güçlü, özelliklerle dolu bir ön uç araç takımıdır. Prototipten üretime kadar her şeyi dakikalar içinde oluşturun.

Bu sayfada

Hızlı başlangıç

Bootstrap'in üretime hazır CSS ve JavaScript'ini herhangi bir derleme adımına gerek kalmadan CDN aracılığıyla dahil ederek başlayın. Bu Bootstrap CodePen demosu ile pratikte görün .


  1. index.htmlProje kökünüzde yeni bir dosya oluşturun . Mobil cihazlarda uygun yanıt verme davranışı<meta name="viewport"> için etiketi de ekleyin .

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

  2. Bootstrap'in CSS ve JS'sini ekleyin. Kapanıştan önce CSS'miz için etiketi ve JavaScript paketimiz için etiketi (açılır listeleri, açılır pencereleri ve araç ipuçlarını konumlandırmak için Popper dahil <link>) <head>yerleştirin . CDN bağlantılarımız hakkında daha fazla bilgi edinin .<script></body>

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

    Popper ve JS'mizi ayrı ayrı da dahil edebilirsiniz . Açılır listeleri, açılır pencereleri veya araç ipuçlarını kullanmayı planlamıyorsanız, Popper'ı dahil etmeyerek bazı kilobaytları kaydedin.

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

  3. Selam Dünya! Bootstrapped sayfanızı görmek için tercih ettiğiniz tarayıcıda sayfayı açın. Artık kendi düzeninizi oluşturarak, düzinelerce bileşen ekleyerek ve resmi örneklerimizi kullanarak Bootstrap ile oluşturmaya başlayabilirsiniz .

Referans olarak, işte birincil CDN bağlantılarımız.

Tanım URL
CSS https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
JS https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

İçindekiler sayfasında listelenen ek yapılarımızdan herhangi birini almak için CDN'yi de kullanabilirsiniz .

Sonraki adımlar

JS bileşenleri

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ışlar uygulamak üzere Collapse ve Offcanvas eklentilerimizi genişletmek için gezinme çubuğu
  • İçerik bölmelerini değiştirmek için Sekme eklentisine sahip gezinmeler
  • Görüntüleme, konumlandırma ve kaydırma davranışı için tuval dışı
  • Kaydırma davranışı ve gezinme güncellemeleri için Scrollspy
  • 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 )

Önemli küreseller

Bootstrap, tümü neredeyse yalnızca çapraz tarayıcı stillerinin normalleştirilmesine yönelik bir dizi önemli küresel stil ve ayar kullanır. Hadi dalalım.

HTML5 doküman türü

Bootstrap, HTML5 doktipinin kullanılmasını gerektirir. Onsuz, biraz korkak ve eksik bir stil göreceksiniz.

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

Hızlı başlangıçta bunun bir örneğini 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 .
  • GitHub Tartışmalarımızı sorun ve keşfedin .
  • 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 .