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.

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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Številne naše komponente za delovanje zahtevajo uporabo JavaScripta. Natančneje, potrebujejo jQuery , Popper in naše lastne vtičnike JavaScript. Uporabljamo tanko zgradbo jQuery , vendar je podprta tudi polna različica.

Enega od naslednjih <script>s postavite blizu konca svojih strani, tik pred zaključno </body>oznako, da jih omogočite. Najprej mora biti jQuery, nato Popper in nato naši vtičniki JavaScript.

Sveženj

Vsak vtičnik Bootstrap JavaScript vključite v enega od naših dveh svežnjev. Oba bootstrap.bundle.jsin bootstrap.bundle.min.jsvključujeta Popper za naše namige orodij in pojavna okna, ne pa tudi jQuery . Najprej vključite jQuery, nato paket Bootstrap JavaScript. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Komponente

Vas zanima, katere komponente izrecno zahtevajo jQuery, naš JavaScript in Popper? Kliknite spodnjo povezavo za prikaz komponent. Če niste prepričani o 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
Scrollspy za vedenje drsenja in posodobitve navigacije
Namigi orodij in pojavni elementi za prikaz in pozicioniranje (zahteva tudi Popper )

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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

To je vse, kar potrebujete za splošne zahteve strani. Če želite začeti postavljati vsebino in komponente svojega spletnega mesta, obiščite dokumente o postavitvi ali naše uradne primere .

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 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, shrink-to-fit=no">

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 s programsko opremo 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-4).
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.

CSP-ji in vdelani SVG-ji

Več komponent Bootstrap vključuje vdelane SVG-je v naš CSS za dosledno in preprosto oblikovanje komponent v brskalnikih in napravah. Za organizacije s strožjimi konfiguracijami CSP smo dokumentirali vse primere naših vdelanih SVG (vsi so uporabljeni prek background-image), tako da lahko temeljiteje pregledate svoje možnosti.

Gumb za zapiranje (uporabljen v opozorilih in načinih)
Potrditvena polja in izbirni gumbi po meri
Stikala obrazcev
Ikone za preverjanje obrazcev
Meniji za izbiro po meri
Kontrole vrtiljaka
Preklopni gumbi na vrstici Navbar

Na podlagi pogovora skupnosti nekatere možnosti za obravnavo tega v vaši lastni kodni zbirki vključujejo zamenjavo URL-jev z lokalno gostujočimi sredstvi, odstranjevanje slik in uporabo vgrajenih slik (ni mogoče v vseh komponentah) ter spreminjanje vašega CSP. Naše priporočilo je, da skrbno pregledate lastne varnostne politike in se po potrebi odločite za najboljšo pot naprej.