Osnovni koraki za vključitev Bootstrapa v projekt in razumevanje, kaj vsebuje ogrodje.
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.
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>Č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.
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.
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)