Uvod

Začnite z Bootstrapom, najbolj priljubljenim ogrodjem na svetu za gradnjo odzivnih spletnih mest, namenjenih predvsem mobilnim napravam, z jsDelivr in začetno stranjo s predlogo.

Na tej strani

Hiter začetek

Ali želite svojemu projektu hitro dodati Bootstrap? Uporabite jsDelivr, brezplačen odprtokodni CDN. Uporabljate upravitelja paketov ali morate prenesti izvorne datoteke? Pojdite na stran za prenose .

CSS

Kopirajte in prilepite slogovno tabelo <link>v svojo <head>pred vsemi drugimi slogovnimi tabelami, da naložite naš CSS.

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

JS

Številne naše komponente za delovanje zahtevajo uporabo JavaScripta. Natančneje, potrebujejo naše lastne vtičnike JavaScript in Popper . Enega od naslednjih <script>s postavite blizu konca svojih strani, tik pred zaključno </body>oznako, da jih omogočite.

Sveženj

Vključite vsak vtičnik in odvisnost Bootstrap JavaScript z enim od naših dveh svežnjev. Oba bootstrap.bundle.jsin bootstrap.bundle.min.jsvključujeta Popper za naše namige orodij in pojavna okna. Za več informacij o tem, kaj je vključeno v Bootstrap, si oglejte naš razdelek z vsebino .

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

Ločeno

Če se odločite za rešitev ločenih skriptov, mora biti Popper na prvem mestu (če uporabljate namige orodij ali pojavna okna), nato pa naši vtičniki JavaScript.

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

Moduli

Če uporabljate <script type="module">, si oglejte razdelek o uporabi Bootstrapa kot modula .

Komponente

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šega vtičnika Collapse za implementacijo odzivnega vedenja
Zdravice za razstavljanje in odpuščanje
Namigi orodij in pojavni elementi za prikaz in pozicioniranje (zahteva tudi Popper )
Scrollspy za vedenje drsenja in posodobitve navigacije

Začetna predloga

Poskrbite, da bodo vaše strani nastavljene v skladu z najnovejšimi standardi oblikovanja in razvoja. To pomeni uporabo dokumenta HTML5 in vključitev metaoznake vidnega polja za pravilno odzivno vedenje. Sestavite vse skupaj in vaše strani bi morale izgledati takole:

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

Za naslednje korake obiščite dokumente o postavitvi ali naše uradne primere , da začnete postavljati vsebino in komponente svojega spletnega mesta.

Pomembni globali

Bootstrap uporablja peščico pomembnih globalnih slogov in nastavitev, ki se jih boste morali zavedati, ko ga uporabljate, ki so vsi skoraj izključno usmerjeni v normalizacijo slogov med brskalniki. Potopimo se noter.

HTML5 doctype

Bootstrap zahteva uporabo dokumenta HTML5. Brez tega boste videli nekaj čudnega nepopolnega stajlinga, vendar njegova vključitev ne bi smela povzročati večjih težav.

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

Odzivna meta oznaka

Bootstrap je najprej razvit mobile , 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 začetni predlogi .

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