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 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.js
in bootstrap.bundle.min.js
vključ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-sizing
vrednost iz content-box
v 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 ::before
in ::after
– podedovali podano box-sizing
za 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.chat
strežniku, v#bootstrap
kanalu. - Pomoč za implementacijo je na voljo na Stack Overflow (označeno
bootstrap-5
). - Razvijalci bi morali uporabiti ključno besedo
bootstrap
na 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.