Začnite uporabljati Bootstrap

Bootstrap je zmogljiv komplet orodij za čelni vmesnik, poln funkcij. Izdelajte karkoli – od prototipa do proizvodnje – v nekaj minutah.

Na tej strani

Hiter začetek

Začnite z vključitvijo Bootstrapovega CSS-ja, pripravljenega za proizvodnjo, in JavaScripta prek CDN, ne da bi morali izvesti kakršne koli korake gradnje. Oglejte si to v praksi s to predstavitvijo Bootstrap CodePen .

Ustvarite novo index.htmldatoteko v korenu projekta. Vključite tudi <meta name="viewport">oznako za ustrezno odzivnost v mobilnih napravah.

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

Vključite Bootstrapov CSS in JS. <link>Oznako postavite v <head>za naš CSS in <script>oznako za naš sveženj JavaScript (vključno s Popperjem za pozicioniranje spustnih menijev, poperjev in namigov za orodja) pred zaključkom </body>. Izvedite več o naših povezavah CDN .

<!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 in naš JS lahko vključite tudi ločeno. Če ne nameravate uporabljati spustnih menijev, pojavnih menijev ali namigov orodij, prihranite nekaj kilobajtov tako, da ne vključite Popperja.

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

Pozdravljen, svet! Odprite stran v izbranem brskalniku, da vidite svojo stran Bootstrapped. Zdaj lahko začnete graditi z Bootstrapom tako, da ustvarite lastno postavitev , dodate na desetine komponent in uporabite naše uradne primere .

CDN povezave

Kot referenca so tukaj naše primarne povezave CDN.

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

CDN lahko uporabite tudi za pridobivanje katere koli naše dodatne gradnje, navedene na strani z vsebino .

Naslednji koraki

Preberite nekaj več o nekaterih pomembnih globalnih okoljskih nastavitvah , ki jih uporablja Bootstrap.
Preberite o tem, kaj je vključeno v Bootstrap, v našem vsebinskem razdelku in o seznamu komponent, ki zahtevajo JavaScript spodaj.
Potrebujete malo več moči? Razmislite o gradnji z Bootstrapom tako, da vključite izvorne datoteke prek upravitelja paketov .
Želite uporabiti Bootstrap kot modul z <script type="module">? Oglejte si razdelek o uporabi Bootstrapa kot modula .

komponente JS

Vas zanima, katere komponente izrecno zahtevajo naš JavaScript in Popper? Kliknite spodnjo povezavo za prikaz komponent. Če niste prepričani o splošni strukturi strani, nadaljujte z branjem za primer predloge strani.

Prikaži komponente, ki zahtevajo JavaScript

Opozorila za odpuščanje
Gumbi za preklapljanje stanj in funkcij potrditvenega polja/radia
Vrtiljak za vsa vedenja diapozitivov, kontrole in indikatorje
Strni za preklop vidnosti vsebine
Spustni meniji za prikaz in pozicioniranje (zahteva tudi Popper )
Modali za prikazovanje, pozicioniranje in obnašanje drsenja
Navbar za razširitev naših vtičnikov Collapse in Offcanvas za izvajanje odzivnega vedenja
Krmarjenje z vtičnikom Tab za preklapljanje vsebinskih podoknov
Offcanvases za prikazovanje, pozicioniranje in drsenje
Scrollspy za vedenje drsenja in posodobitve navigacije
Zdravice za razstavljanje in odpuščanje
Namigi orodij in pojavni elementi za prikaz in pozicioniranje (zahteva tudi Popper )

Pomembni globali

Bootstrap uporablja peščico pomembnih globalnih slogov in nastavitev, ki so skoraj izključno usmerjene v normalizacijo slogov med brskalniki. Potopimo se noter.

HTML5 doctype

Bootstrap zahteva uporabo dokumenta HTML5. Brez tega boste videli nekaj čudnega in nepopolnega stajlinga.

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

Odzivna meta oznaka

Bootstrap je najprej razvit za mobilne naprave , strategija, pri kateri najprej optimiziramo kodo za mobilne naprave in nato po potrebi povečamo komponente z uporabo medijskih poizvedb CSS. Če želite zagotoviti pravilno upodabljanje in povečavo na dotik za vse naprave, dodajte metaoznako odzivnega vidnega polja v svoj <head>.

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

Primer tega v akciji si lahko ogledate v hitrem začetku .

Dimenzioniranje škatle

Za bolj preprosto določanje velikosti v CSS preklopimo globalno box-sizingvrednost iz content-boxv border-box. To zagotavlja padding, da ne vpliva na končno izračunano širino elementa, lahko pa povzroči težave z nekaterimi programi tretjih oseb, kot sta Google Maps in Google Custom Search Engine.

V redkih primerih, ko ga morate preglasiti, uporabite nekaj takega:

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

Z zgornjim izrezkom bodo vsi ugnezdeni elementi – vključno z ustvarjeno vsebino prek ::beforein ::after– podedovali podano box-sizingza to .selector-for-some-widget.

Izvedite več o modelu škatle in velikosti na CSS Tricks .

Znova zaženite

Za izboljšano upodabljanje med brskalniki uporabljamo Reboot , da popravimo nedoslednosti med brskalniki in napravami, hkrati pa zagotavljamo nekoliko bolj samozavestne ponastavitve običajnih elementov HTML.

Skupnost

Bodite na tekočem z razvojem Bootstrapa in se obrnite na skupnost s temi koristnimi viri.

Preberite in se naročite na uradni blog Bootstrap .
Vprašajte in raziščite naše GitHub razprave .
Klepetajte s kolegi Bootstrapperji v IRC. Na irc.libera.chatstrežniku, v #bootstrapkanalu.
Pomoč za implementacijo je na voljo na Stack Overflow (označeno bootstrap-5).
Razvijalci bi morali uporabiti ključno besedo bootstrapna paketih, ki spreminjajo ali dodajajo funkcionalnost Bootstrapa pri distribuciji prek npm ali podobnih dostavnih mehanizmov za največjo odkritost.

Prav tako lahko spremljate @getbootstrap na Twitterju za najnovejše trače in izjemne glasbene videe.