Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

Izdelava strani Dokumentacija - Vsebina

Spletno stran Vsebina izdelamo kot dokumentacijsko stran, ki razlaga osnovne vsebinske elemente v Bootstrapu. Na strani predstavimo tipografijo, naslove, semantične HTML5 oznake, prikaz kode, slike in tabele. Namen strani je pokazati, kako Bootstrap dopolni običajne HTML elemente z urejenim privzetim videzom in uporabnimi razredi.

Stran 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.

Pomni: Bootstrap ne nadomesti pravilne HTML strukture. Najprej uporabimo ustrezne HTML elemente, nato pa z Bootstrapovimi razredi izboljšamo videz, odzivnost in preglednost.

Osnovna pravila dokumentacijske strani Vsebina

Pri dokumentacijski strani o vsebini je pomembno, da ne opisujemo samo videza elementov, ampak tudi njihovo pravilno uporabo. Naslovi morajo izražati strukturo, slike morajo imeti ustrezna nadomestna besedila, koda mora biti pravilno prikazana, tabele pa naj bodo uporabljene samo za podatke, ki so res tabelarični.

Področje Priporočilo
Tipografija Besedilo naj bo berljivo, razdeljeno v odstavke, sezname in jasno označene poudarke.
Naslovi Naslovni elementi naj sledijo pravilnemu zaporedju in naj ne služijo samo povečanju pisave.
Semantika Uporabimo elemente, ki opisujejo pomen vsebine, na primer main, section, article, nav in footer.
Slike Slike naj bodo odzivne, optimizirane in opremljene z atributom alt, kadar imajo vsebinski pomen.
Tabele Tabele uporabimo za podatke v vrsticah in stolpcih, ne za osnovno postavitev strani.

Pozor: Bootstrapovi razredi lahko izboljšajo videz vsebine, ne morejo pa popraviti nepravilno izbrane HTML oznake. Element <h2> naj pomeni naslov druge ravni, ne samo večje besedilo.

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 dokumenta, meta opis, glavni naslov in uvodni opis, da ustrezajo temi Vsebina.

Ker je stran shranjena v mapi 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/....

Primer izdelave spletišča postavitev strani Vsebina predloga navigacije, naslova in noge

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.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>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.3.8/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Predogled: vsebina1.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 tipografije, naslovov, slik ali tabel.

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.

Primer izdelave spletišča postavitev strani Vsebina stranski meni in postavitev

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{
   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;
   }
}
Predogled: vsebina2.html

Pozor: Povezava v stranskem meniju deluje samo, če se vrednost atributa href ujema z vrednostjo atributa id pri ustreznem poglavju.

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. Bootstrap določi osnovne tipografske nastavitve, vendar mora biti besedilo še vedno vsebinsko pravilno in pregledno zapisano.

Element ali razred Namen
p Odstavek besedila.
.lead Izpostavljen uvodni odstavek.
.text-center Poravnava besedila na sredino.
.fw-bold Poudarjena teža pisave.
Primer izdelave spletišča postavitev strani Vsebina vsebina: Tipografija
<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 class="lead">Razred <code>lead</code> uporabimo za izpostavljen uvodni odstavek.</p>
  <p class="fw-bold">Razred <code>fw-bold</code> besedilo poudari z debelejšo pisavo.</p>
</section>
Predogled: vsebina3.html

Vsebina: Naslovi

Razdelek Naslovi razloži uporabo elementov h1 do h6. Naslovi so pomembni za strukturo dokumenta, preglednost strani in dostopnost. Bootstrap poskrbi za njihov privzeti videz, vendar zaporedje naslovov ostaja odgovornost razvijalca.

Naslove uporabljamo po pomenu, ne po velikosti. Če želimo samo spremeniti videz besedila, je bolje uporabiti ustrezen razred ali lastni CSS, ne pa preskakovati naslovnih ravni.

Primer izdelave spletišča postavitev strani Vsebina vsebina: Naslovi
<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 uporabimo utility razrede za velikost, težo pisave in razmike.</p>
  <div class="doc-figure mt-3">
    <img src="../slike/dokumentacija/naslovi.png" alt="Primer naslovov od h1 do h6">
  </div>
</section>
Predogled: vsebina4.html

Pomni: Naslovi ustvarjajo zgradbo dokumenta. Uporabimo jih v pravilnem zaporedju, saj s tem izboljšamo preglednost strani in dostopnost.

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.

Semantični elementi povedo, kakšno vlogo ima posamezen del strani. To je pomembno za brskalnike, iskalnike, bralnike zaslona in razvijalce, ki stran kasneje vzdržujejo.

Primer izdelave spletišča postavitev strani Vsebina vsebina: Besedilne oznake HTML5
<section id="html5" class="mb-5">
  <h2>Besedilne oznake HTML5</h2>
  <p>Pomembno je, da uporabljamo 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 dopolni z razredi za videz in postavitev.</p>

  <article class="p-4 bg-light rounded-4">
    <h3 class="h5">Primer članka</h3>
    <p class="mb-0">Element <code>article</code> uporabimo za samostojen vsebinski sklop.</p>
  </article>
</section>
Predogled: vsebina5.html

Pozor: Semantičnih elementov ne izbiramo po videzu. Element nav uporabimo za navigacijo, element footer za nogo strani, element article pa za samostojen vsebinski sklop.

Vsebina: Koda

Razdelek Koda pojasni uporabo elementov code ter pre skupaj z code. Krajše dele kode zapišemo znotraj elementa code, večvrstične odlomke pa zapišemo v element pre, v njem pa uporabimo še code.

Pri prikazu HTML kode moramo posebne znake zapisati kot entitete. Znak < na primer zapišemo kot &lt;, da se koda prikaže kot besedilo in se ne izvede kot HTML.

Primer izdelave spletišča postavitev strani Vsebina vsebina: Koda
<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>&lt;button class="btn btn-primary"&gt;Pošlji&lt;/button&gt;</code></pre>
</section>
Predogled: vsebina6.html

Vsebina: Slike

V razdelku Slike pojasnimo uporabo razreda img-fluid, ki omogoča odzivno prilagajanje slike širini nadrejenega elementa. Bootstrap pri tem uporabi največjo širino 100% in samodejno višino, zato slika ne preseže razpoložljivega prostora.

Dodaten videz dosežemo z razredi za zaobljene robove, sence ali okvirje. Pomembno pa je, da videz ne nadomesti vsebinske pravilnosti: slika mora biti ustrezno velika, optimizirana in po potrebi opremljena z nadomestnim besedilom.

Primer izdelave spletišča postavitev strani Vsebina vsebina: Slike
<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žemo 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" class="img-fluid rounded shadow-sm" alt="Primer odzivne slike z zaobljenimi robovi"></div>
    </div>
    <div class="col-md-6">
      <div class="doc-figure"><img src="../slike/dokumentacija/img2.png" class="img-fluid img-thumbnail" alt="Primer slike z okvirjem"></div>
    </div>
  </div>
</section>
Predogled: vsebina7.html

Pomni: Razred img-fluid poskrbi za odzivno širino slike, ne poskrbi pa za izbiro kakovostne, primerno velike in vsebinsko ustrezne slike.

Vsebina: Tabele

V zadnjem razdelku pojasnimo uporabo tabel in razredov table, table-striped, table-hover ter odzivnega ovoja table-responsive. Bootstrapovi slogi za tabele niso uporabljeni samodejno; tabeli moramo dodati osnovni razred table.

Pri manjših zaslonih je koristno, da tabelo ovijemo v element z razredom table-responsive. Tako se lahko tabela po potrebi vodoravno pomika, ne da bi porušila postavitev strani.

Primer izdelave spletišča postavitev strani Vsebina vsebina: Tabele
<section id="tabele" class="mb-5">
  <h2>Tabele</h2>
  <p>Tabele lahko hitro naredimo preglednejše z razredi za obrobe, črtaste vrstice in odzivni ovoj.</p>
  <p>Posebej pri manjših zaslonih je koristno, da jih ovijemo v element z razredom <code>table-responsive</code>.</p>
  <div class="table-responsive">
    <table class="table table-striped table-bordered table-hover 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>
Predogled: vsebina8.html

Pozor: Tabel ne uporabljamo za postavitev strani. Namenjene so prikazu podatkov, ki imajo smiselno razmerje med vrsticami in stolpci.

Priporočila za uporabo vsebinskih elementov

  • Najprej izberi pravilen HTML element, šele nato dodaj Bootstrapove razrede.
  • Naslove uporabljaj v pravilnem zaporedju in po pomenu vsebine.
  • Za uvodne odstavke lahko uporabiš razred lead, vendar zmerno.
  • Za prikaz kode uporabi code za kratke dele in pre skupaj s code za daljše odlomke.
  • Pri prikazu HTML kode uporabi entitete, na primer &lt; za znak <.
  • Slike naj bodo odzivne, optimizirane in opremljene z ustreznim atributom alt.
  • Tabele uporabljaj za podatke, ne za postavitev strani.
  • Pri širših tabelah uporabi ovoj table-responsive.

Pogoste napake

  • Naslovni elementi se uporabljajo samo zaradi velikosti pisave, ne pa zaradi pomena vsebine.
  • V dokumentu so preskočene naslovne ravni, zato je struktura strani manj jasna.
  • Semantični elementi so izbrani po videzu namesto po pomenu.
  • HTML koda v primerih ni zapisana z entitetami, zato jo brskalnik poskuša izvesti kot oznake.
  • Slike nimajo razreda img-fluid, zato lahko presežejo širino vsebnika.
  • Slike nimajo smiselnega atributa alt.
  • Tabele nimajo osnovnega razreda table, zato ne dobijo Bootstrapovega sloga.
  • Široke tabele niso ovite v table-responsive, zato lahko pokvarijo prikaz na manjših zaslonih.
Nazaj
Naprej