Bootstrap bilen başlaň

“Bootstrap” güýçli, aýratynlykly gaplanan frontend gurallar toplumydyr. Prototipden önümçilige çenli birnäçe minutda islendik zady guruň.

Bu sahypada

Çalt başlangyç

“Bootstrap” -yň önümçiligine taýyn CSS we JavaScript-i CDN arkaly gurmak ädimlerine zerurlyk bolmazdan başlaň. Bu Bootstrap CodePen demo bilen iş ýüzünde görüň .

Taslama köküňizde täze index.htmlfaýl dörediň. Jübi enjamlarynda dogry jogap<meta name="viewport"> bermek üçin belligi goşuň .

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

Bootstrap-yň CSS we JS-i goşuň. Belligi CSS üçin, we JavaScript bukjamyz üçin <link>belligi (açylýan ýerleri, poppersleri we gural görkezmelerini goşmak üçin Popper) ýapylmazdan ozal goýuň . CDN baglanyşyklarymyz hakda has giňişleýin öwreniň .<head><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>

Şeýle hem Popper we JS-ni aýratynlykda goşup bilersiňiz. Açylýan ýerleri, açýanlary ýa-da gural görkezmelerini ulanmagy meýilleşdirmeýän bolsaňyz, Popper-i goşmazdan birnäçe kilobaýt tygşytlaň.

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

Salam, dünýä! “Bootstrapped” sahypany görmek üçin saýlan brauzeriňizde sahypany açyň. Indi “Bootstrap” bilen öz düzülişiňizi döredip, onlarça komponent goşup we resmi mysallarymyzy ulanyp başlap bilersiňiz .

CDN baglanyşyklary

Salgy hökmünde, ine, esasy CDN baglanyşyklarymyz.

Düşündiriş	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`

Şeýle hem , Mazmun sahypasynda görkezilen goşmaça gurluşlarymyzy almak üçin CDN-den peýdalanyp bilersiňiz .

Indiki ädimler

Bootstrap-yň ulanýan möhüm global gurşaw sazlamalary barada birneme okaň .
Mazmun bölümimizdäki Bootstrap-daky zatlary we aşakdaky JavaScript-i talap edýän komponentleriň sanawyny okaň.
Biraz güýç gerekmi? Bootstrap bilen deslapky faýllary paket dolandyryjysynyň üsti bilen goşmagy göz öňünde tutuň .
Bootstrap bilen modul hökmünde ulanjak <script type="module">bolýarsyňyzmy? “Bootstrap” -y modul bölümi hökmünde ulanmagymyza ýüz tutmagyňyzy haýyş edýäris .

JS komponentleri

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” we “Offcanvas” plaginlerimizi giňeltmek üçin “Navbar”
Mazmun panellerini üýtgetmek üçin Tab plugin bilen işleýänler
Özüňi alyp barşyňy görkezmek, ýerleşdirmek we aýlamak üçin Offcanvases
Aýlamak häsiýeti we nawigasiýa täzelenmeleri üçin Scrollspy
Görkezmek we işden aýyrmak üçin tostlar
Görkezmek we ýerleşdirmek üçin gurallar we açyjylar ( Popper hem talap edýär )

Möhüm globallar

“Bootstrap” möhüm global stilleri we sazlamalary ulanýar, bularyň hemmesi diýen ýaly 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ç we doly däl görnüşi görersiňiz.

<!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 çalt başlangyçda 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ň .
GitHub ara alyp maslahatlaşmalarymyzy soraň we öwreniň .
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 .