Spletno stran Vsebina sestavimo s pomočjo dokumentacijske predloge. Iz pripravljene strukture ustvarimo datoteko vsebina.html, ki jo shranimo v mapo dokument. Nato vanjo postopno dodamo stranski meni, vsebinske razdelke, slike, primere kode in tabelo, ki pojasnjujejo osnovne vsebinske elemente v Bootstrapu.
Predloga navigacije, naslova in noge spletne strani
V datoteki vsebina.html najprej pripravimo osnovno strukturo dokumenta: glavo, navigacijo, glavni naslov strani in nogo. Posodobimo naslov strani, glavni naslov in uvodni opis, da ustrezajo temi Vsebina.
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: vsebina.">
<meta name="keywords" content="Bootstrap, tipografija, slike, koda, tabele, dokumentacija">
<meta name="author" content="eNSA">
<title>eNSA | Spletišče: Vsebina</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>Vsebina</h1>
<p class="lead mb-0">Pregled tipografije, slik, kode in tabel z vidika uporabe v Bootstrapu.</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="#tipografija">Tipografija</a>
<a href="#naslovi">Naslovi</a>
<a href="#html5">Besedilne oznake HTML5</a>
<a href="#koda">Koda</a>
<a href="#slike">Slike</a>
<a href="#tabele">Tabele</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: Tipografija
V vsebinski del najprej dodamo razdelek Tipografija, ki pojasni osnovni vizualni red besedila v Bootstrapu: naslove, odstavke, sezname, poudarke in razmike med elementi.
<section id="tipografija" class="mb-5">
<h2>Tipografija</h2>
<p>Bootstrap poskrbi za osnovni vizualni red tipografije: naslove, odstavke, sezname, poudarke in berljiv razmik med elementi.</p>
<p>S tem dobi stran urejeno osnovo, ki jo lahko pozneje prilagodiš lastni grafični podobi.</p>
</section>Vsebina: Naslovi
Razdelek Naslovi razloži uporabo elementov h1 do h6 ter prikaže, kako Bootstrap poskrbi za njihovo velikost, razmik in berljivost.
<section id="naslovi" class="mb-5">
<h2>Naslovi</h2>
<p>Naslovni elementi <code>h1</code> do <code>h6</code> ostanejo semantični, Bootstrap pa jim doda privzeto velikost, razmik in razmerje med vrsticami.</p>
<p>Za dodatno prilagoditev lahko uporabiš utility razrede za velikost, težo pisave in razmike.</p>
<div class="doc-figure mt-3">
<img src="../slike/dokumentacija/naslovi.png" alt="Naslovi">
</div>
</section>Vsebina: Besedilne oznake HTML5
V tem razdelku poudarimo pomen semantičnih elementov, kot so main, section, article, nav in footer. Bootstrap teh oznak ne nadomesti, ampak jih dopolni z razredi za videz in postavitev.
<section id="html5" class="mb-5">
<h2>Besedilne oznake HTML5</h2>
<p>Pomembno je, da uporabljaš semantične elemente, kot so <code>main</code>, <code>section</code>, <code>article</code>, <code>nav</code> in <code>footer</code>.</p>
<p>Bootstrap jih ne nadomesti, temveč jih lepo dopolni z razredi za videz in postavitev.</p>
</section>Vsebina: Koda
Razdelek Koda pojasni uporabo elementov code ter pre skupaj z code za prikaz krajših in daljših odlomkov kode v dokumentaciji.
<section id="koda" class="mb-5">
<h2>Koda</h2>
<p>Za poudarjanje kratkih delov kode je primeren element <code>code</code>, za večje bloke pa <code>pre</code> in <code>code</code> skupaj.</p>
<p>To je uporabno v učnih gradivih, dokumentaciji in primerih uporabe razredov.</p>
<pre><code><button class="btn btn-primary">Pošlji</button></code></pre>
</section>Vsebina: Slike
V razdelku Slike pojasnimo uporabo razreda img-fluid, ki omogoča odzivno prilagajanje slike širini nadrejenega elementa. Dodaten videz dosežemo z zaobljenimi robovi, sencami ali okvirji.
<section id="slike" class="mb-5">
<h2>Slike</h2>
<p>Razred <code>img-fluid</code> poskrbi, da se slika prilagaja širini nadrejenega elementa in ne preseže razpoložljivega prostora.</p>
<p>Dodaten videz dosežeš z zaobljenimi robovi, sencami ali okvirji.</p>
<div class="row g-3 mt-2">
<div class="col-md-6">
<div class="doc-figure"><img src="../slike/dokumentacija/img1.png" alt="Primer slike 1"></div>
</div>
<div class="col-md-6">
<div class="doc-figure"><img src="../slike/dokumentacija/img2.png" alt="Primer slike 2"></div>
</div>
</div>
</section>Vsebina: Tabele
V zadnjem razdelku pojasnimo uporabo tabel in razredov table, table-striped, table-hover ter odzivnega ovoja table-responsive.
<section id="tabele" class="mb-5">
<h2>Tabele</h2>
<p>Tabele lahko hitro narediš preglednejše z razredi za obrobe, črtaste vrstice in odzivni ovoj.</p>
<p>Posebej pri manjših zaslonih je koristno, da jih oviješ v element z razredom <code>table-responsive</code>.</p>
<div class="table-responsive">
<table class="table table-striped table-bordered align-middle">
<thead>
<tr>
<th>Razred</th>
<th>Namen</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>table</code></td>
<td>Osnovni videz tabele</td>
</tr>
<tr>
<td><code>table-striped</code></td>
<td>Izmenično obarvane vrstice</td>
</tr>
<tr>
<td><code>table-hover</code></td>
<td>Poudarek vrstice ob prehodu</td>
</tr>
</tbody>
</table>
</div>
</section>