Spletno stran Komponente sestavimo s pomočjo dokumentacijske predloge. Iz pripravljene strukture ustvarimo datoteko komponente.html, ki jo shranimo v mapo dokument. Nato vanjo postopno dodamo stranski meni, vsebinske razdelke in primere najpogostejših Bootstrap komponent.
Predloga navigacije, naslova in noge spletne strani
V datoteki komponente.html najprej pripravimo osnovno strukturo dokumenta: glavo, navigacijo, glavni naslov strani in nogo. Posodobimo naslov strani, glavni naslov in uvodni opis, da ustrezajo temi Komponente.
Osnovna predloga uporablja Bootstrap 5, enotno navigacijo in glavo z razredom page-hero:
<!DOCTYPE html>
<html lang="sl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Dokumentacija Bootstrapa: komponente.">
<meta name="keywords" content="Bootstrap, komponente, opozorila, gumbi, dokumentacija">
<meta name="author" content="eNSA">
<title>eNSA | Spletišče: Komponente</title>
<link rel="icon" href="../slike/favicon.ico" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/slog.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light site-navbar sticky-top">...</nav>
<header class="page-hero">
<div class="container">
<h1>Komponente</h1>
<p class="lead mb-0">Najpogosteje uporabljene Bootstrap komponente in njihova smiselna uporaba.</p>
</div>
</header>
<footer>...</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Postavitev dokumentacije in stranski meni
Pod glavo strani dodamo dokumentacijsko postavitev z levim stranskim menijem in desnim vsebinskim delom. Uporabimo razrede doc-layout, doc-sidebar in doc-content.
Stranski meni vsebuje povezave na posamezna poglavja iste strani:
<section class="py-5">
<div class="container">
<div class="doc-layout">
<aside class="doc-sidebar">
<h2 class="h5 mb-3">Vsebina strani</h2>
<a href="#opozorila">Opozorila</a>
<a href="#primeri">Primeri</a>
<a href="#barve">Barve povezav</a>
<a href="#vsebina">Dodatna vsebina</a>
<a href="#gumbi">Gumbi</a>
<a href="#seznam">Seznam vseh komponent</a>
</aside>
<div class="doc-content">
...
</div>
</div>
</div>
</section>Primer slogov za takšno postavitev:
.doc-layout{
display:grid;
grid-template-columns:280px 1fr;
gap:2rem;
}
.doc-sidebar a{
display:block;
padding:.35rem 0;
}
@media (max-width: 991px){
.doc-layout{
grid-template-columns:1fr;
}
}Vsebina: Opozorila
V vsebinski del najprej dodamo razdelek Opozorila, ki pojasni namen opozorilnih komponent. Te komponente hitro prikažejo sporočilo o uspehu, napaki ali opozorilu in so uporabne v obrazcih, administrativnih vmesnikih ter informacijskih obvestilih.
<section id="opozorila" class="mb-5">
<h2>Opozorila</h2>
<p>Komponente opozoril hitro prikažejo sporočilo o uspehu, napaki ali opozorilu. Dobro delujejo v obrazcih, administrativnih vmesnikih in informacijskih obvestilih.</p>
<div class="alert alert-primary" role="alert">To je primer osnovnega obvestila z Bootstrap razredi.</div>
</section>Vsebina: Primeri
Razdelek Primeri pojasni, da je komponente smiselno najprej preizkusiti na manjšem delu strani. Tako hitreje ugotovimo, kateri razredi vplivajo na videz in kateri na obnašanje komponente.
<section id="primeri" class="mb-5">
<h2>Primeri</h2>
<p>Pri delu z Bootstrapom je priporočljivo, da komponente najprej preizkusiš na manjšem odseku strani in šele nato vključiš v širšo postavitev.</p>
<p>Tako hitreje razumeš, kateri razredi vplivajo na videz in kateri na obnašanje.</p>
</section>Vsebina: Barve povezav
V tem razdelku poudarimo pomen barvnega sistema pri povezavah, gumbih in oznakah. Ob tem mora ostati kontrast dovolj močan, da je vsebina dobro berljiva in dostopna.
<section id="barve" class="mb-5">
<h2>Barve povezav</h2>
<p>Barvni sistem lahko uporabiš tudi za poudarjanje povezav, gumbov in oznak.</p>
<p>Pomembno pa je, da kljub izbiri barv ostane kontrast dovolj močan za dobro berljivost in dostopnost.</p>
</section>Vsebina: Dodatna vsebina
Razdelek Dodatna vsebina pojasni, kako lahko s karticami, zavihki, harmonikami, dropdown meniji in modalnimi okni vsebino prikažemo postopoma in bolj pregledno.
<section id="vsebina" class="mb-5">
<h2>Dodatna vsebina</h2>
<p>Kartice, zavihki, harmonike, dropdown meniji in modalna okna omogočajo, da več vsebine prikažeš postopoma.</p>
<p>To je posebej koristno pri daljših straneh, kjer želiš zmanjšati občutek prenatrpanosti.</p>
</section>Vsebina: Gumbi
V razdelku Gumbi pojasnimo, da imajo gumbi več različic: osnovne, obrobne, večje in manjše. S pravilno izbiro hitro nakažemo, katero dejanje je glavno in katera so pomožna.
<section id="gumbi" class="mb-5">
<h2>Gumbi</h2>
<p>Gumbi imajo več različic: osnovne, obrobe, večje in manjše. S pravilno izbiro hitro nakažeš, katero dejanje je glavno in katera so pomožna.</p>
<div class="d-flex flex-wrap gap-2">
<button class="btn btn-primary" type="button">Primarni</button>
<button class="btn btn-outline-primary" type="button">Obroba</button>
<button class="btn btn-success" type="button">Uspeh</button>
<button class="btn btn-danger" type="button">Brisanje</button>
</div>
</section>Vsebina: Seznam vseh komponent
V zadnjem razdelku poudarimo, da so med pogosto uporabljenimi komponentami navigacija, offcanvas meni, accordion, card, badge, breadcrumb, modal, spinner, toast in pagination. Ključno je, da izberemo le tiste komponente, ki res izboljšajo razumljivost in uporabo strani.
<section id="seznam" class="mb-5">
<h2>Seznam vseh komponent</h2>
<p>Med pogosto uporabljenimi komponentami so navigacija, offcanvas meni, accordion, card, badge, breadcrumb, modal, spinner, toast in pagination.</p>
<p>Ključno je, da izbereš le tiste komponente, ki res izboljšajo razumljivost in uporabo strani.</p>
<p>Namesto kopičenja učinkov je praviloma boljša umirjena in dosledna uporaba nekaj osnovnih gradnikov.</p>
</section>