Uvod
Bootstrap je namenjen hitri pripravi odzivnih spletišč. Osnovna ideja je, da razvijalec uporabi preverjeno kombinacijo postavitve, tipografije, razmikov in komponent, namesto da vse od začetka piše sam. Tako se lahko prej osredotoči na vsebino in uporabniško izkušnjo.
Dobro je začeti z minimalno strukturo strani, nato pa postopno dodajati mrežni sistem, utility razrede in komponente glede na potrebe projekta.
Hiter začetek
Najhitrejša pot je vključitev Bootstrap CSS datoteke v glavo dokumenta in Bootstrap bundle JavaScript datoteke na konec strani. Pri tem ne pozabi na odzivni meta element.
<!doctype html>
<html lang="sl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 class="container py-5">Pozdravljen, Bootstrap!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Prenos
Če želiš delati brez zunanjih povezav, lahko preneseš prevedene datoteke in jih dodaš v lasten projekt. To je uporabno v šolskem okolju, pri projektih z omejenim dostopom do interneta ali ko želiš natančneje nadzorovati različico datotek.
Bootstrap CDN
CDN omogoča hiter začetek, saj datotek ni treba shranjevati lokalno. Za večino demonstracijskih ali učnih primerov je to najbolj praktična rešitev. Pri produkcijskih projektih pa je dobro razmisliti, ali želiš datoteke vključiti v lasten proces gradnje.
Vsebina paketov
V prevedenem paketu najdemo predvsem datoteke CSS in JavaScript. V izvorni kodi pa so dodatno prisotne Sass datoteke, dokumentacija in primeri. To pomeni, da lahko ogrodje uporabljaš takoj ali pa ga globlje prilagodiš lastnim zahtevam.
bootstrap/
├── css/
├── js/
└── icons/ (če jih dodamo posebej)Brskalniki in naprave
Bootstrap temelji na mobilno usmerjenem pristopu. Najprej poskrbi za dober prikaz na manjših zaslonih, nato pa z višjimi prelomnimi točkami razširi postavitev za tablice in namizne zaslone. Zato je pomembno, da postavitve sproti preverjaš v več širinah okna.
JavaScript
Interaktivne komponente, kot so dropdown meni, collapse, modal, tooltip ali carousel, potrebujejo JavaScript. V novejših projektih praviloma zadostuje ena bundle datoteka, ki vključuje vse potrebno za delovanje večine komponent.
Globalne opcije
Pri vseh komponentah je smiselno paziti na dostopnost: pravilne oznake, uporabne nadomestne opise, kontrast besedila in razumljivo strukturo vsebine. Bootstrap veliko od tega ponudi že privzeto, vendar mora razvijalec vseeno skrbeti za ustrezno uporabo razredov in semantičnih elementov.