Source

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, ki ga brezplačno zagotavljajo ljudje na jsDelivr. 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-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

JS

Številne naše komponente za delovanje zahtevajo uporabo JavaScripta. Natančneje, potrebujejo jQuery , Popper.js in naše lastne vtičnike JavaScript. Naslednje s postavite <script>blizu konca svojih strani, tik pred zaključno </body>oznako, da jih omogočite. Najprej mora biti jQuery, nato Popper.js in nato naši vtičniki JavaScript.

Uporabljamo tanko zgradbo jQuery , vendar je podprta tudi polna različica.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

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

Naš bootstrap.bundle.jsin bootstrap.bundle.min.jsvključuje Popper , ne pa tudi jQuery . Za več informacij o tem, kaj je vključeno v Bootstrap, si oglejte naš razdelek z vsebino .

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.js )
  • Modali za prikazovanje, pozicioniranje in obnašanje drsenja
  • Navbar za razširitev našega vtičnika Collapse za implementacijo odzivnega vedenja
  • Namigi orodij in pojavni elementi za prikazovanje in pozicioniranje (zahteva tudi Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 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.

  • Sledite @getbootstrap na Twitterju .
  • Preberite in se naročite na uradni blog Bootstrap .
  • Klepetajte s kolegi Bootstrapperji v IRC. Na irc.freenode.netstrež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.