Spletno stran Komponente izdelamo kot dokumentacijsko stran, ki predstavi najpogosteje uporabljene Bootstrapove komponente. Komponente so pripravljeni gradniki, s katerimi lahko hitreje izdelamo opozorila, gumbe, kartice, navigacijo, zložljive razdelke, modalna okna, oznake, navigacijsko pot, paginacijo in druge dele spletne strani.
Stran 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.
Pomni: Bootstrapova komponenta ni samo skupina razredov za videz. Pri nekaterih komponentah so pomembni tudi pravilna HTML struktura, dostopnostni atributi in Bootstrapova JavaScript datoteka.
Osnovna pravila uporabe komponent
Komponente uporabljamo takrat, ko izboljšajo razumljivost, preglednost ali uporabnost strani. Pred uporabo se vprašamo, kaj komponenta sporoča uporabniku in ali je res potrebna. Preveč komponent na eni strani lahko povzroči zmedo, počasnejše razumevanje in slabšo uporabniško izkušnjo.
| Področje | Priporočilo |
|---|---|
| Izbira komponente | Izberemo komponento, ki ustreza vsebini in dejanju, na primer opozorilo za sporočilo ali gumb za dejanje. |
| Struktura | Uporabimo pravilno HTML strukturo, osnovne razrede in po potrebi dodatne kontekstne razrede. |
| Dostopnost | Pri pomembnih sporočilih, gumbih in interaktivnih komponentah uporabimo ustrezne atribute, na primer role, aria-label ali aria-expanded. |
| JavaScript | Komponente, kot so modalna okna, spustni meniji, zložljivi razdelki in zapiralna opozorila, potrebujejo Bootstrapovo JavaScript datoteko. |
| Doslednost | Na celotnem spletišču uporabljamo enotna pravila za barve, gumbe, opozorila in druge gradnike. |
Pozor: Komponent ne uporabljamo samo zato, ker so na voljo. Njihova uporaba mora imeti jasno funkcijo: sporočanje, usmerjanje, razvrščanje vsebine ali omogočanje dejanja.
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 dokumenta, meta opis, glavni naslov in uvodni opis, da ustrezajo temi Komponente.
Ker je stran shranjena v podmapi dokument, morajo povezave do skupnih datotek kazati eno mapo višje. Zato uporabljamo poti, kot so ../css/slog.css, ../slike/favicon.ico in ../slike/dokumentacija/....
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, kartice, modalna okna, 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.3.8/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.3.8/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Pomni: Pri dokumentacijskih straneh v podmapi je treba posebno pozornost nameniti relativnim potem do slik, slogovnih datotek in drugih strani.
Postavitev dokumentacije in stranski meni
Pod glavo strani dodamo dokumentacijsko postavitev z levim stranskim menijem in desnim vsebinskim delom. Stranski meni vsebuje povezave na poglavja iste strani. Tako lahko uporabnik hitro preide na razlago opozoril, gumbov, kartic ali drugih komponent.
Uporabimo razrede doc-layout, doc-sidebar in doc-content. Na večjih zaslonih sta stranski meni in vsebina prikazana drug ob drugem, na manjših zaslonih pa se zložita v en stolpec.
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{
background:#f8f9fa;
border-radius:1rem;
padding:1.25rem;
align-self:start;
}
.doc-sidebar a{
display:block;
padding:.35rem 0;
color:#553d7b;
text-decoration:none;
}
.doc-sidebar a:hover{
text-decoration:underline;
}
@media (max-width: 991px){
.doc-layout{
grid-template-columns:1fr;
}
}Pozor: Povezava v stranskem meniju deluje samo, če se vrednost atributa href ujema z vrednostjo atributa id pri ustreznem poglavju.
Vsebina: Opozorila
V vsebinski del najprej dodamo razdelek Opozorila, ki pojasni namen opozorilnih komponent. Opozorila uporabniku sporočajo uspeh, napako, opozorilo ali dodatno informacijo. Uporabna so pri obrazcih, administrativnih straneh, prijavah, shranjevanju podatkov in drugih postopkih, kjer je pomembno jasno povratno sporočilo.
Opozorilo praviloma vsebuje osnovni razred alert, kontekstni razred, na primer alert-success ali alert-danger, ter po potrebi atribut role="alert".
<section id="opozorila" class="mb-5">
<h2>Opozorila</h2>
<p>Komponente opozoril hitro prikažejo sporočilo o uspehu, napaki ali opozorilu.</p>
<div class="alert alert-primary" role="alert">
To je primer osnovnega informativnega obvestila.
</div>
<div class="alert alert-success" role="alert">
Podatki so bili uspešno shranjeni.
</div>
<div class="alert alert-warning" role="alert">
Pred nadaljevanjem preveri vnesene podatke.
</div>
</section>Pomni: Barva opozorila naj se ujema s pomenom sporočila. Uspeh, napaka, opozorilo in informacija naj imajo na celotnem spletišču dosledno uporabljene sloge.
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. Pri interaktivnih komponentah preverimo tudi, ali je vključena datoteka bootstrap.bundle.min.js.
| Vrsta komponente | Preverimo |
|---|---|
| Vizualna komponenta | Ali so vključeni osnovni in kontekstni razredi. |
| Interaktivna komponenta | Ali so pravilni podatkovni atributi in ali je vključena Bootstrapova JavaScript datoteka. |
| Dostopna komponenta | Ali so dodani smiselni atributi, na primer aria-label, aria-expanded ali role. |
<section id="primeri" class="mb-5">
<h2>Primeri</h2>
<p>Pri delu z Bootstrapom je priporočljivo, da komponente najprej preizkusimo na manjšem odseku strani in šele nato vključimo v širšo postavitev.</p>
<p>Tako hitreje razumemo, kateri razredi vplivajo na videz in kateri na obnašanje.</p>
<div class="card">
<div class="card-body">
<h3 class="h5 card-title">Primer kartice</h3>
<p class="card-text">Kartica je prilagodljiv vsebinski gradnik za besedilo, slike, povezave ali sezname.</p>
<a href="#" class="btn btn-primary">Več o tem</a>
</div>
</div>
</section>Vsebina: Barve povezav
V tem razdelku poudarimo pomen barvnega sistema pri povezavah, gumbih, opozorilih in oznakah. Barve pomagajo uporabniku razlikovati med pomenom sporočil in dejanji. Kljub temu informacije ne smejo biti odvisne samo od barve.
Pri povezavah in gumbih mora ostati kontrast dovolj močan, da je besedilo dobro berljivo. Če z barvo označimo stanje ali opozorilo, dodamo tudi besedilo, ikono ali drug jasen znak.
<section id="barve" class="mb-5">
<h2>Barve povezav</h2>
<p>Barvni sistem lahko uporabimo 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>
<p>
<a href="#" class="link-primary">Primarna povezava</a> |
<a href="#" class="link-success">Uspešna povezava</a> |
<a href="#" class="link-danger">Nevarno dejanje</a>
</p>
</section>Pozor: Informacije ne smejo biti izražene samo z barvo. Povezava, opozorilo ali gumb naj ima tudi jasno besedilo, po potrebi pa še ikono ali opis.
Vsebina: Dodatna vsebina
Razdelek Dodatna vsebina pojasni, kako lahko s karticami, zavihki, zložljivimi razdelki, spustnimi meniji in modalnimi okni vsebino prikažemo postopoma in bolj pregledno. To je posebej koristno pri daljših straneh, kjer želimo zmanjšati občutek prenatrpanosti.
Pri komponentah, ki skrivajo ali prikazujejo dodatno vsebino, je pomembno, da uporabnik razume, kaj se bo zgodilo ob kliku. Gumbi in povezave naj imajo jasne napise, na primer Prikaži več, Odpri podrobnosti ali Zapri okno.
<section id="vsebina" class="mb-5">
<h2>Dodatna vsebina</h2>
<p>Kartice, zavihki, zložljivi razdelki, spustni meniji in modalna okna omogočajo, da več vsebine prikažemo postopoma.</p>
<div class="accordion" id="primerAccordion">
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#odsek1" aria-expanded="true" aria-controls="odsek1">
Prikaži podrobnosti
</button>
</h3>
<div id="odsek1" class="accordion-collapse collapse show" data-bs-parent="#primerAccordion">
<div class="accordion-body">
Tukaj je dodatna vsebina, ki se prikaže ob odprtju razdelka.
</div>
</div>
</div>
</div>
</section>Vsebina: Gumbi
V razdelku Gumbi pojasnimo, da imajo gumbi več različic: osnovne, obrobne, večje, manjše, aktivne in onemogočene. S pravilno izbiro hitro nakažemo, katero dejanje je glavno in katera so pomožna.
Gumb naj ima jasno besedilo. Napisi, kot so Pošlji, Shrani, Prekliči ali Izbriši, so razumljivejši kot nejasni napisi brez konteksta. Za nevarna dejanja uporabimo previdno oblikovanje in po potrebi dodatno potrditev.
<section id="gumbi" class="mb-5">
<h2>Gumbi</h2>
<p>Gumbi imajo 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.</p>
<div class="d-flex flex-wrap gap-2">
<button class="btn btn-primary" type="button">Shrani</button>
<button class="btn btn-outline-primary" type="button">Več informacij</button>
<button class="btn btn-success" type="button">Potrdi</button>
<button class="btn btn-danger" type="button">Izbriši</button>
</div>
</section>Pomni: Primarni gumb naj bo uporabljen za glavno dejanje. Če je na strani preveč primarnih gumbov, uporabnik težje prepozna najpomembnejšo možnost.
Vsebina: Seznam vseh komponent
V zadnjem razdelku poudarimo, da Bootstrap vsebuje veliko komponent. Med pogosto uporabljenimi so navigacija, vrstica za krmarjenje, stranski oziroma prekrivni meni, zložljivi razdelki, kartice, oznake, navigacijska pot, gumbi, skupine gumbov, opozorila, modalna okna, kazalniki nalaganja, kratka obvestila, paginacija, skupine seznamov, spustni meniji in vrtiljak.
Ključno je, da izberemo le tiste komponente, ki res izboljšajo razumljivost in uporabo strani. Namesto kopičenja učinkov je praviloma boljša umirjena in dosledna uporaba nekaj osnovnih gradnikov.
<section id="seznam" class="mb-5">
<h2>Seznam vseh komponent</h2>
<p>Med pogosto uporabljenimi komponentami so navigacija, vrstica za krmarjenje, stranski oziroma prekrivni meni, zložljivi razdelki, kartice, oznake, navigacijska pot, modalna okna, kazalniki nalaganja, kratka obvestila in paginacija.</p>
<p>Ključno je, da izberemo 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>Priporočila za uporabo komponent
- Komponento izberi glede na namen vsebine ali dejanja.
- Uporabi pravilno osnovno strukturo in potrebne Bootstrapove razrede.
- Pri opozorilih uporabi jasna sporočila in ustrezen pomen barve.
- Pri gumbih jasno loči glavno in pomožna dejanja.
- Interaktivne komponente preizkusi s klikom, tipkovnico in na manjšem zaslonu.
- Preveri, ali je vključena datoteka
bootstrap.bundle.min.js, kadar komponenta potrebuje JavaScript. - Ne izražaj informacij samo z barvo; dodaj tudi besedilo, ikono ali opis.
- Komponente uporabljaj dosledno na vseh straneh spletišča.
Pogoste napake
- Komponente so uporabljene brez jasnega namena in zato zmanjšajo preglednost strani.
- Manjka osnovni razred komponente, na primer
alertpri opozorilu alibtnpri gumbu. - Barve se uporabljajo nedosledno ali brez zadostnega kontrasta.
- Informacija je izražena samo z barvo, brez besedila ali dodatnega pojasnila.
- Interaktivna komponenta je dodana brez Bootstrapove JavaScript datoteke.
- Gumbi imajo nejasna besedila, zato uporabnik ne ve, kaj se bo zgodilo ob kliku.
- Na strani je preveč primarnih gumbov, zato glavna možnost ni več jasno prepoznavna.
- Povezave v stranskem meniju ne kažejo na pravilne vrednosti atributa
id.