Esasy mazmuna geçiň Docs nawigasiýasyna geçiň
in English

Giriş

JsDelivr we şablon başlangyç sahypasy bilen täsirli, ykjam ilkinji saýtlary gurmak üçin dünýäniň iň meşhur çarçuwasy Bootstrap bilen başlaň.

Bu sahypada

Çalt başlangyç

Taslamaňyza “Bootstrap” -y çalt goşmak isleýärsiňizmi? Mugt açyk çeşme CDN jsDelivr ulanyň. Bukja dolandyryjysyny ulanýarsyňyzmy ýa-da çeşme faýllaryny göçürip almalymy? Göçürip almak sahypasyna başlaň .

CSS

<link>CSS-ni ýüklemek üçin <head>stil tablisasyny beýleki stil tablisalaryndan öň göçüriň .

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

JS

Komponentlerimiziň köpüsi işlemek üçin JavaScript-i ulanmagy talap edýär. Hususan-da, öz JavaScript plaginlerimizi we Popper -i talap edýärler . Aşakdakylardan birini<script> sahypalaryňyzyň ujuna, ýapmak belliginiň öň ýanynda goýuň , </body>olary işletmek üçin.

Bukja

Iki bukjanyň biri bilen her Bootstrap JavaScript pluginini we garaşlylygy goşuň. Ikisem , gurallarymyz bootstrap.bundle.jswe popoverslerimiz üçin Popperbootstrap.bundle.min.js -i öz içine alýar . “Bootstrap” -a girýänler barada has giňişleýin maglumat üçin mazmun bölümimize serediň.

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

Aýry-aýry

Aýry-aýry skriptler çözgüdi bilen gitmek kararyna gelseňiz, Popper ilki bilen gelmeli (gurallar ýa-da popovers ulanýan bolsaňyz), soňra bolsa JavaScript plaginlerimiz.

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

Modullar

Eger ulanýan bolsaňyz , “Bootstrap” -y modul bölümi hökmünde ulanmagymyza <script type="module">ýüz tutmagyňyzy haýyş edýäris .

Komponentler

JavaScript we Popper haýsy komponentleri aç-açan talap edýär? Aşakdaky görkeziş komponentleriniň baglanyşygyna basyň. Umumy sahypanyň gurluşy barada düýbünden bilmeýän bolsaňyz, mysal sahypasynyň şablony üçin okaň.

JavaScript talap edýän komponentleri görkeziň
  • Işden aýyrmak üçin duýduryşlar
  • Döwletleri üýtgetmek we bellik gutusy / radio işleýşi üçin düwmeler
  • Slhli slaýd häsiýetleri, dolandyryşlar we görkezijiler üçin karusel
  • Mazmunyň görnükliligini üýtgetmek üçin çöküň
  • Görkezmek we ýerleşdirmek üçin aşak düşmeler ( Popper -i hem talap edýär )
  • Özüňi alyp barşyňy görkezmek, ýerleşdirmek we aýlamak üçin modeller
  • Duýgur hereketleri amala aşyrmak üçin “Collapse” pluginimizi giňeltmek üçin “Navbar”
  • Görkezmek we işden aýyrmak üçin tostlar
  • Görkezmek we ýerleşdirmek üçin gurallar we açyjylar ( Popper -i hem talap edýär )
  • Aýlamak häsiýeti we nawigasiýa täzelenmeleri üçin Scrollspy

Başlangyç şablon

Sahypalaryňyzy iň täze dizaýn we ösüş ülňüleri bilen düzüň. Diýmek, HTML5 doktipini ulanmak we dogry jogap bermek üçin görüniş meta belligini goşmak. Hemmesini bir ýere jemläň we sahypalaryňyz şeýle bolmaly:

<!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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Indiki ädimler üçin, sahypaňyzyň mazmunyny we böleklerini ýerleşdirip başlamak üçin Layout resminamalaryna ýa-da resmi mysallarymyza giriň.

Möhüm globallar

“Bootstrap”, ulanylanda hökman bilmeli möhüm global stilleri we sazlamalary ulanýar, bularyň hemmesi diňe brauzer stilleriniň kadalaşmagyna gönükdirilen. Geliň.

HTML5 doktip görnüşi

“Bootstrap” HTML5 doktipiniň ulanylmagyny talap edýär. Onsuz, gülkünç doly däl görnüşi görersiňiz, ýöne şol bir wagtyň özünde-de ep-esli bökdençlige sebäp bolmaz.

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

Jogapkär meta belligi

“Bootstrap” ilki ykjam işlenip düzülýär , bu strategiýa ilki bilen ykjam enjamlar üçin kod optimizirleýäris, soňra bolsa CSS media talaplaryny ulanyp komponentleri ulaldýarys. Deviceshli enjamlar üçin dogry görkezilmegini we ulaldylyşyny üpjün etmek üçin, täsirli görnüş meta belligini özüňize goşuň <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Munuň mysalyny başlangyç şablonyndan görüp bilersiňiz .

Guty ululygy

CSS-de has gönümel ulalmak üçin global bahany box-sizingüýtgedýäris . Bu elementiň soňky hasaplanan giňligine täsir etmezligini üpjün edýär, ýöne Google Kartalar we Google Custom Search Engine ýaly käbir üçünji tarap programma üpjünçiliginde kynçylyk döredip biler.content-boxborder-boxpadding

Seýrek ýagdaýlarda ony ýok etmeli, aşakdaky ýaly bir zady ulanyň:

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

Aboveokardaky bölek bilen, içerki elementler, şol sanda döredilen mazmun ::beforewe ::afterbularyň hemmesi görkezilenleri miras box-sizingalar .selector-for-some-widget.

CSS hilelerinde guty modeli we ululygy barada has giňişleýin öwreniň .

Gaýtadan açyň

Kesgitli brauzer görkezişini gowulandyrmak üçin , umumy HTML elementlerine birneme has köp pikirlenýän nollary hödürlemek bilen, brauzerler we enjamlardaky gapma-garşylyklary düzetmek üçin Reboot ulanýarys.

Jemgyýet

“Bootstrap” -yň ösüşi barada habarly boluň we bu peýdaly çeşmeler bilen jemgyýet bilen habarlaşyň.

  • Resmi “Bootstrap” blogyny okaň we ýazylyň .
  • IRC-de ýoldaş Bootstrappers bilen söhbetdeşlik. irc.libera.chatSerwerde, kanalda #bootstrap.
  • Durmuşa geçirmek kömegi Stack Overflow-da tapylyp bilner (bellikli bootstrap-5).
  • Döredijiler npm ýa-da iň ýokary açyş üçin şuňa meňzeş gowşuryş mehanizmleri bootstraparkaly paýlananda Bootstrap-yň işleýşini üýtgedýän ýa-da goşýan paketlerdäki açar sözden peýdalanmalydyrlar .

Şeýle hem iň soňky gybat we ajaýyp aýdym-saz wideolary üçin Twitter - de @getbootstrap yzarlap bilersiňiz .