in English

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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 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. 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.js in nato naši vtičniki JavaScript.

Sveženj

Vse, kar potrebujete, vključite v en skript z našim svežnjem. 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, glejte naš razdelek z vsebino .

<script src="https://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Ločeno

Če se odločite za rešitev ločenih skriptov, mora biti najprej Popper.js in nato naši vtičniki JavaScript.

<script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

Komponente

Vas zanima, katere komponente izrecno zahtevajo jQuery, naš JS in Popper.js? 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.js )
  • 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 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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 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://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 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 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, 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 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 za popravljanje nedoslednosti v brskalnikih in napravah, 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.