Spletno stran Postavitev izdelamo kot dokumentacijsko stran, ki razlaga osnovna pravila razporejanja vsebine v Bootstrapu. Namen strani je prikazati, kako delujejo vsebniki, vrstice, stolpci, odzivne prelomne točke, poravnave, prilegajoča orodja in priprava strani za tiskanje.
Stran sestavimo s pomočjo dokumentacijske predloge. Iz že pripravljene strukture ustvarimo datoteko postavitev.html, ki jo shranimo v mapo dokument. Nato vanjo postopno dodamo stranski meni, vsebinske razdelke, slike in primere kode za razlago postavitve v Bootstrapu.
Pomni: Postavitev v Bootstrapu temelji na preprostem vzorcu: vsebnik, vrstica in stolpec. Ko razumemo ta vzorec, lahko sestavimo večino običajnih odzivnih spletnih strani.
Osnovna pravila dokumentacijske strani Postavitev
Dokumentacijska stran Postavitev mora uporabniku najprej razložiti osnovno logiko razporejanja vsebine. Bootstrapova mreža je odzivna, zato se isti elementi pri različnih širinah zaslona lahko razporedijo drugače. Pri razlagi zato uporabljamo kratke primere, primerjave in slike, ki pokažejo razliko med posameznimi možnostmi.
| Področje | Priporočilo |
|---|---|
| Vsebniki | Razloži razliko med omejeno širino vsebine in vsebino čez celotno širino zaslona. |
| Vrstice in stolpci | Poudari, da stolpce praviloma postavimo znotraj vrstic, vrstice pa znotraj vsebnikov. |
| Odzivnost | Prikaži, kako se razredi, kot so col-12, col-md-6 in col-lg-4, spreminjajo glede na širino zaslona. |
| Utility razredi | Razloži, da z njimi hitro določimo razmike, poravnavo, prikaz, širino, višino in druge pogoste prilagoditve. |
| Tiskanje | Pojasni, da lahko posamezne elemente pri tiskanju skrijemo ali prikažemo drugače. |
Pozor: Mrežni sistem ne pomeni, da mora biti vsak element na strani v stolpcu. Mrežo uporabimo takrat, ko želimo vsebino razporediti v odzivne stolpce ali jo uskladiti z drugimi deli strani.
Predloga navigacije, naslova in noge spletne strani
V datoteki postavitev.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 Postavitev.
Ker je datoteka shranjena v podmapi dokument, morajo biti poti do skupnih datotek prilagojene. Zato so povezave do slik, ikone spletišča in slogovne datoteke zapisane z začetkom ../.
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: postavitev.">
<meta name="keywords" content="Bootstrap, postavitev, mrežni sistem, container, row, col">
<meta name="author" content="eNSA">
<title>eNSA | Spletišče: Postavitev</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>Postavitev</h1>
<p class="lead mb-0">Razlaga vsebnikov, vrstic, stolpcev in uporabnih razredov za odzivno razporeditev vsebine.</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 moramo vedno preveriti relativne poti. Napačna pot do datoteke CSS ali slike je ena najpogostejših napak pri kopiranju predloge.
Postavitev dokumentacije in stranski meni
Pod glavo strani dodamo dokumentacijsko postavitev z dvema deloma: levo je stranski meni, desno pa vsebina. Stranski meni vsebuje povezave na posamezna poglavja iste strani. Uporabnik lahko tako hitro preide na razlago vsebnikov, mreže, poravnave ali tiskanja.
Za postavitev uporabimo razrede doc-layout, doc-sidebar in doc-content. Na večjih zaslonih sta meni in vsebina prikazana drug ob drugem, na manjših zaslonih pa se postavita drug pod drugega.
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="#pregled">Pregled</a>
<a href="#okvirji">Okvirji</a>
<a href="#mreza">Mrežni sistem</a>
<a href="#kako-deluje">Kako deluje</a>
<a href="#poravnava">Poravnava</a>
<a href="#media">Objekt media in sodobne alternative</a>
<a href="#orodja">Prilegajoča orodja</a>
<a href="#tiskanje">Tiskanje</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: Povezave v stranskem meniju morajo ustrezati poglavjem na strani. Če povezava kaže na #mreza, mora imeti ustrezni razdelek atribut id="mreza".
Vsebina: Pregled in Okvirji
V vsebinski del najprej dodamo razdelka Pregled in Okvirji. Besedilo pojasni osnovni vzorec container → row → col ter razliko med razredoma .container in .container-fluid.
| Razred | Namen |
|---|---|
.container |
Vsebino omeji na največjo širino glede na trenutno prelomno točko in jo poravna na sredino. |
.container-fluid |
Vsebina se raztegne čez celotno širino razpoložljivega prostora. |
.row |
Ustvari vrstico, v katero postavimo stolpce. |
.col |
Ustvari stolpec, ki se prilagodi razpoložljivemu prostoru. |
<section id="pregled" class="mb-5">
<h2>Pregled</h2>
<p>Postavitev v Bootstrapu temelji na kombinaciji vsebnikov, vrstic in stolpcev.</p>
<p>Ko razumemo osnovni vzorec <code>container → row → col</code>, lahko sestavimo večino običajnih strani.</p>
</section>
<section id="okvirji" class="mb-5">
<h2>Okvirji</h2>
<p>Razred <code>.container</code> omeji širino vsebine in jo poravna na sredino.</p>
<p>Razred <code>.container-fluid</code> pa omogoči, da vsebina uporabi celotno širino zaslona.</p>
<div class="row g-3 mt-2">
<div class="col-md-6">
<div class="doc-figure"><img src="../slike/dokumentacija/container.png" alt="Primer omejenega vsebnika"></div>
</div>
<div class="col-md-6">
<div class="doc-figure"><img src="../slike/dokumentacija/container-fluid.png" alt="Primer tekočega vsebnika"></div>
</div>
</div>
</section>Pomni: Razred .container je primeren za večino vsebinskih strani, razred .container-fluid pa za dele, ki morajo zavzeti celotno širino zaslona.
Vsebina: Mrežni sistem in Kako deluje
Naslednja razdelka razložita dvanajststolpčni mrežni sistem, odzivne prelomne točke in uporabo razredov, kot so col-12, col-md-6 in col-lg-4. Bootstrapova mreža je odzivna, zato lahko isti element na telefonu zavzame celotno širino, na tablici polovico, na večjem zaslonu pa tretjino vrstice.
Prelomne točke temeljijo na najmanjši širini zaslona. To pomeni, da razred col-md-6 velja od prelomne točke md naprej, razen če ga pri večjih širinah prepišemo z drugim razredom.
<section id="mreza" class="mb-5">
<h2>Mrežni sistem</h2>
<p>Mreža ima dvanajst stolpcev. Z razredi, kot so <code>col-md-6</code>, <code>col-lg-4</code> ali <code>col-12</code>, določiš širino elementa pri različnih velikostih zaslona.</p>
<div class="doc-figure mt-3">
<img src="../slike/dokumentacija/grid-system.jpg" alt="Mrežni sistem">
</div>
</section>
<section id="kako-deluje" class="mb-5">
<h2>Kako deluje</h2>
<p>Bootstrap uporablja odzivne prelomne točke. Element lahko na telefonu zavzame celotno širino, na tablici polovico, na večjem zaslonu pa tretjino vrstice.</p>
<pre><code><div class="row g-4">
<div class="col-12 col-md-6 col-lg-4">Prvi stolpec</div>
<div class="col-12 col-md-6 col-lg-4">Drugi stolpec</div>
<div class="col-12 col-lg-4">Tretji stolpec</div>
</div></code></pre>
</section>Pozor: Vsota stolpcev v eni vrstici naj bo premišljena. Če elementi skupaj presežejo dvanajst stolpcev, se del vsebine lahko prelomi v novo vrstico.
Vsebina: Poravnava
V razdelku Poravnava razložimo uporabo utility razredov za poravnavo po vodoravni in navpični osi, razmike med elementi ter nadzor nad razporeditvijo vsebine. Ti razredi so uporabni pri uvodnih razdelkih, karticah, obrazcih, gumbih in nogah strani.
| Razred | Namen |
|---|---|
align-items-center |
Elemente v vrstici navpično poravna na sredino. |
justify-content-between |
Elemente razporedi tako, da je med njimi čim več prostora. |
text-center |
Besedilo poravna na sredino. |
g-4 |
Določi razmik med stolpci in vrsticami v mreži. |
<section id="poravnava" class="mb-5">
<h2>Poravnava</h2>
<p>Poleg širine stolpcev lahko z utility razredi določimo poravnavo po vodoravni in navpični osi, razmik med elementi ter vrstni red prikaza.</p>
<p>To je uporabno pri uvodnih odsekih, karticah, obrazcih in nogah strani.</p>
<div class="row g-4 align-items-center">
<div class="col-md-6">Besedilo</div>
<div class="col-md-6 text-center">Slika</div>
</div>
</section>Vsebina: Objekt media in sodobne alternative
Ta razdelek pojasni, da je bil objekt .media značilen za starejše projekte. V sodobnih različicah Bootstrapa ga običajno nadomestimo s kombinacijo razredov za Flex, Grid in odzivno postavitev. Tako imamo več nadzora nad razporeditvijo slike, ikone, videa in besedila.
Pri slikah in videih lahko uporabimo tudi razrede za prileganje objekta, na primer object-fit-cover, kadar želimo, da slika zapolni določen okvir in pri tem ohrani ustrezno razmerje.
<section id="media" class="mb-5">
<h2>Objekt media in sodobne alternative</h2>
<p>Starejši projekti pogosto uporabljajo objekt <code>.media</code>.</p>
<p>V sodobnih različicah ga običajno nadomestimo s kombinacijo Flex utilities in Grid utilities, ki ponujajo več nadzora nad razporeditvijo slike in besedila.</p>
<div class="d-flex gap-3 align-items-start">
<img src="../slike/dokumentacija/media.png" class="rounded object-fit-cover" width="120" height="90" alt="Primer slike ob besedilu">
<div>
<h3 class="h5">Slika in besedilo</h3>
<p>S kombinacijo razredov <code>d-flex</code>, <code>gap-3</code> in <code>align-items-start</code> sestavimo sodobno različico media postavitve.</p>
</div>
</div>
</section>Vsebina: Prilegajoča orodja
V razdelku Prilegajoča orodja poudarimo uporabnost Bootstrapovih utility razredov za odmike, robove, širino, višino, poravnavo, prikaz in odzivnost. Ti razredi omogočajo hitro prilagoditev videza brez pisanja dodatnega CSS za vsako manjšo spremembo.
Utility razrede uporabljamo premišljeno. Dobri so za pogoste prilagoditve, kot so mt-4, p-3, d-flex, text-center, w-100 ali d-none d-md-block. Kadar se isti vzorec pogosto ponavlja, je lahko bolj smiselno pripraviti lasten razred v CSS datoteki.
<section id="orodja" class="mb-5">
<h2>Prilegajoča orodja</h2>
<p>Bootstrap vsebuje razrede za odmike, robove, širino, višino, poravnavo, prikaz in odzivnost.</p>
<p>Namesto pisanja novega CSS-ja lahko veliko tipičnih prilagoditev naredimo neposredno z utility razredi.</p>
<div class="p-4 mt-3 bg-light rounded-4 d-flex flex-column flex-md-row gap-3 align-items-md-center">
<div class="fw-bold">Primer utility razredov</div>
<div class="text-muted">Razredi določajo odmik, ozadje, zaobljenost, prikaz in poravnavo.</div>
</div>
<div class="doc-figure mt-3">
<img src="../slike/dokumentacija/orodja.png" alt="Primer utility razredov">
</div>
</section>Pozor: Utility razredi so uporabni, vendar jih ne smemo uporabljati brez reda. Preveč razredov na enem elementu lahko poslabša berljivost HTML kode.
Vsebina: Tiskanje
V zadnjem razdelku pojasnimo, da lahko v posebnih primerih določimo, kaj se pri tiskanju skrije in kaj ostane vidno. To je uporabno pri poročilih, računih, potrdilih in drugih poslovnih dokumentih.
Bootstrap omogoča uporabo posebnih razredov za tiskanje, na primer d-print-none, d-print-block in d-print-flex. Z njimi lahko določimo, da se navigacija pri tiskanju skrije, vsebina dokumenta pa ostane vidna.
<section id="tiskanje" class="mb-5">
<h2>Tiskanje</h2>
<p>Pri posebnih primerih lahko določimo, kaj se ob tiskanju skrije ali ostane vidno.</p>
<p>Čeprav to ni najpogostejši scenarij pri predstavitvenih straneh, je v poslovnih aplikacijah pomembno, da so računi, potrdila ali poročila urejeno pripravljena tudi za tisk.</p>
<nav class="d-print-none">Navigacija se pri tiskanju skrije.</nav>
<div class="d-none d-print-block">To besedilo je vidno samo pri tiskanju.</div>
</section>Priporočila za uporabo Bootstrap postavitve
- Najprej določi osnovno strukturo strani in šele nato dodajaj podrobnosti oblikovanja.
- Za običajne vsebinske strani uporabi
.container, za polno širino pa.container-fluid. - Stolpce postavljaj znotraj vrstic, vrstice pa znotraj vsebnikov.
- Pri odzivni postavitvi začni z manjšimi zasloni in nato dodaj razrede za večje zaslone.
- Za razmike med stolpci in vrsticami uporabi razrede
g-*, na primerg-4. - Za pogoste prilagoditve uporabi utility razrede, vendar ohrani HTML kodo pregledno.
- Slike opremi z atributom
altin po potrebi uporabi razrede za odzivno velikost ali prileganje. - Pri straneh, ki se tiskajo, preveri tudi tiskani prikaz.
Pogoste napake
- Vrstice in stolpci niso zapisani v pravilnem zaporedju
container → row → col. - Stolpci so uporabljeni brez razumevanja dvanajststolpčnega sistema.
- Razredi za različne prelomne točke so izbrani naključno, zato se postavitev na nekaterih zaslonih poruši.
- Uporabljen je
.container-fluid, čeprav bi bila omejena širina vsebine bolj berljiva. - Utility razredov je preveč, zato HTML koda postane nepregledna.
- Povezave v stranskem meniju ne kažejo na pravilne vrednosti atributa
id. - Slike se ne prilagajajo ustrezno širini vsebnika ali nimajo nadomestnega besedila.
- Pri strani, ki je namenjena tudi tiskanju, ni preverjeno, kaj se dejansko natisne.