Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

Izdelava strani Blog

Spletno stran Blog izdelamo kot stran s krajšimi prispevki o uporabi Bootstrapa in izdelavi sodobnih spletišč. Blog uporabniku omogoča pregled praktičnih tem, kratkih razlag, novosti, priporočil in primerov uporabe. Vsebina mora biti urejena tako, da uporabnik hitro prepozna naslov prispevka, kratek povzetek, datum objave in povezane teme.

Stran sestavimo s pomočjo datoteke bootstrap.html. Iz nje pripravimo samostojno datoteko blog.html, v kateri ohranimo enotno navigacijo, glavni naslov in nogo, nato pa dodamo mrežo člankov ter desni vsebinski blok s temami bloga.

Pomni: Blog ni samo zaporedje naključno dodanih prispevkov. Vsak prispevek mora imeti jasen naslov, kratek povzetek, datum objave, smiselno sliko in vsebinsko povezavo s temo spletišča.

Osnovna pravila izdelave strani bloga

Pri strani bloga je pomembno, da uporabniku omogočimo hiter pregled vsebine. Prispevki naj bodo razvrščeni pregledno, najpomembnejši prispevek je lahko izpostavljen, dodatni prispevki pa so prikazani v karticah. Ob strani lahko dodamo seznam tem, oznak ali kratko razlago, ki pomaga pri razumevanju vsebinskega področja.

Področje Priporočilo
Naslov prispevka Naslov naj jasno pove, o čem govori prispevek.
Povzetek Kratek povzetek naj uporabniku pomaga presoditi, ali je prispevek zanj uporaben.
Datum objave Datum naj bo zapisan enotno in naj uporabniku pove, kako aktualen je prispevek.
Slika Slika naj podpira vsebino prispevka in naj ima ustrezen atribut alt.
Teme Teme ali oznake naj pomagajo pri razvrščanju vsebine, ne pa samo zapolniti prostor.

Pozor: Blog prispevki naj ne bodo generično besedilo. Tudi kratek povzetek mora imeti jasno informativno vrednost in mora uporabniku povedati, kaj bo v prispevku izvedel.

Predloga navigacije, naslova in noge spletne strani

V datoteki blog.html obdržimo navigacijo, glavni naslov in nogo. Posodobimo naslov dokumenta, meta opis, glavni naslov in uvodni opis ter v glavnem meniju označimo postavko Blog kot trenutno aktivno.

Uporabimo Bootstrap 5, odzivno navigacijo, glavo strani z razredom page-hero in Bootstrapovo JavaScript datoteko bootstrap.bundle.min.js, ki omogoča delovanje interaktivnih komponent.

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

Osnovna predloga uporablja enoten videz strani 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="Blog o uporabi in učenju Bootstrapa.">
  <meta name="keywords" content="Bootstrap, odzivno oblikovanje, mrežni sistem, komponente, dokumentacija">
  <meta name="author" content="eNSA">
  <title>eNSA | Spletišče: Blog</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>Blog</h1>
      <p class="lead mb-0">Kratki prispevki o praktični uporabi Bootstrapa pri izdelavi sodobnih spletišč.</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: blog1.html

Pomni: Pri podstrani Blog mora biti v navigaciji kot aktivna označena povezava do strani blog.html, ne povezava do domače strani.

Postavitev vsebine bloga

Pod glavni naslov dodamo glavni vsebinski odsek. Za postavitev uporabimo sodobno mrežo Bootstrap 5. Večji levi del vsebuje izpostavljen članek in dodatne kartice, desni del pa kartico s temami.

Pri blogu je smiselno uporabiti različno velikost vsebinskih blokov. Izpostavljen članek lahko zavzame širši stolpec, krajši prispevki pa so prikazani v manjših karticah. Tako uporabnik hitreje opazi najpomembnejšo vsebino.

Za postavitev uporabimo naslednje Bootstrapove razrede:

  • container – vsebnik z omejeno širino,
  • row – vrstica mrežnega sistema,
  • g-4 – razmik med elementi mreže,
  • col-lg-8 – širši levi stolpec,
  • col-lg-4 – desni stolpec s temami,
  • col-md-6 – dva stolpca pri manjših člankih,
  • card – kartica vsebine.
Primer izdelave spletišča postavitev strani Blog postavitev vsebine bloga
...
<section class="py-5">
  <div class="container">
    <div class="row g-4">

      <div class="col-lg-8">
        <article class="article-card card overflow-hidden">
          ... <!-- Izpostavljen članek --> 
        </article>
      </div>

      <div class="col-lg-4">
        <div class="doc-card card p-4 h-100">
          ... <!-- Kartica s temami -->
        </div>
      </div>

      <div class="col-md-6">
        <article class="article-card card overflow-hidden h-100">
          ... <!-- Krajši članek --> 
        </article>
      </div>

      <div class="col-md-6">
        <article class="article-card card overflow-hidden h-100">
          ... <!-- Krajši članek --> 
        </article>
      </div>

    </div>
  </div>
</section>
...

V datoteko z oblikovnimi slogi spletišča slog.css lahko dodamo tudi osnovne sloge za ozadje in dodatne oznake:

/* Blog */
.article-card,
.doc-card{
  border:1px solid #e8e8e8;
  border-radius:.75rem;
}

.article-card img{
  aspect-ratio:16 / 9;
  object-fit:cover;
}

.badge-soft{
  display:inline-block;
  padding:.45rem .75rem;
  border-radius:999px;
  background:#eef4ff;
  color:#3566b8;
}

.blog-meta{
  color:#6c757d;
  font-style:italic;
}
Predogled: blog2.html

Pozor: Blog postavitev mora biti pregledna tudi na manjših zaslonih. Pred objavo je treba preveriti, kako se izpostavljen prispevek, kartica s temami in krajši članki zložijo na telefonu.

Okvir članka bloga

Za prikaz posameznega prispevka uporabimo Bootstrapovo kartico. Kartica vsebuje sliko, naslov, kratek povzetek in datum objave. Kartica je primerna, ker združi povezane informacije v en pregleden vsebinski blok.

Za prikaz uporabimo naslednje Bootstrapove razrede:

  • article-card – lasten razred za članek,
  • card – kartica,
  • overflow-hidden – skrije prelivajočo vsebino,
  • img-fluid – prilagodljiva slika,
  • card-body – vsebinski del kartice,
  • p-4 – notranji odmik,
  • h-100 – enaka višina kartice.
Primer izdelave spletišča postavitev strani Blog okvir članka bloga
...
<article class="article-card card overflow-hidden h-100">
  <img src="slike/blog/blog2.png" alt="Zakaj Bootstrap 5 ne potrebuje jQuery?" class="img-fluid">
  <div class="card-body p-4">
    <h2 class="h4">Zakaj Bootstrap 5 ne potrebuje jQuery?</h2>
    <p>Novejši pristop uporablja lasten JavaScript in bundle datoteko, zato je projekt lažji, manj odvisen od dodatnih knjižnic in preprostejši za vzdrževanje.</p>
    <p class="blog-meta mb-0">20. marec 2026</p>
  </div>
</article>
...
Predogled: blog3.html

Pomni: Kratek povzetek prispevka naj bo dovolj informativen, da uporabnik razume namen zapisa, vendar ne tako dolg, da kartica postane nepregledna.

Vsebina bloga

V zadnjem koraku dodamo izpostavljen prispevek, kartico s temami in še več krajših blog zapisov. Vsebina je usmerjena v praktično uporabo Bootstrapa: začetek dela, mrežni sistem, utility razrede, prilagoditev videza in pogosto uporabljene komponente.

Kartica s temami uporabniku pomaga razumeti, katera področja blog obravnava. Oznake, kot so grid, utility, komponente in obrazci, naj bodo uporabljene dosledno in naj se navezujejo na dejansko vsebino prispevkov.

Primer izdelave spletišča postavitev strani Blog vsebina bloga
...
<section class="py-5">
  <div class="container">
    <div class="row g-4">
        
      <div class="col-lg-8">
        <article class="article-card card overflow-hidden">
          <img src="slike/blog/blog1.png" alt="Kako začeti z Bootstrapom?" class="img-fluid">
          <div class="card-body p-4">
            <h2 class="h3">Kako začeti z Bootstrapom?</h2>
            <p>Učinkovit začetek se začne z osnovnim HTML ogrodjem, vključitvijo CSS datoteke in pravilnim odzivnim meta pogledom.</p>
            <p class="blog-meta mb-0">26. marec 2026</p>
          </div>
        </article>
      </div>
        
      <div class="col-lg-4">
        <div class="doc-card card p-4 h-100">
          <h3 class="h5">Teme</h3>
          <div class="d-flex flex-wrap gap-2 mb-3">
            <span class="badge-soft">grid</span>
            <span class="badge-soft">utility</span>
            <span class="badge-soft">komponente</span>
            <span class="badge-soft">obrazci</span>
          </div>
          <p class="mb-0">Vsak zapis povzema eno praktično področje uporabe Bootstrapa in pokaže, kje ogrodje najbolj prihrani čas pri izdelavi strani.</p>
        </div>
      </div>

      <div class="col-md-6">
        <article class="article-card card overflow-hidden h-100">
          ...
        </article>
      </div>

    </div>
  </div>
</section>
...
Predogled: blog4.html

Dostopnost in preglednost bloga

Blog mora biti pregleden tudi za uporabnike, ki stran pregledujejo s tipkovnico ali bralnikom zaslona. Naslovi prispevkov naj bodo zapisani kot pravi naslovni elementi, slike naj imajo ustrezna nadomestna besedila, datumi naj bodo zapisani razumljivo, povezave pa naj jasno povedo, kam vodijo.

Če je slika vsebinsko povezana s prispevkom, naj atribut alt opiše vsebino slike ali naslov prispevka. Če je slika izključno okrasna, je lahko nadomestno besedilo prazno, vendar so pri blog karticah slike običajno vsebinsko povezane s prispevkom.

Pozor: Naslovov prispevkov ne uporabljamo samo zaradi velikosti pisave. Naslovni elementi morajo izražati strukturo strani, zato naj bo zaporedje naslovov smiselno.

Priporočila za stran bloga

  • Izpostavi najpomembnejši ali najnovejši prispevek.
  • Vsak prispevek naj ima jasen naslov, kratek povzetek, datum in po potrebi sliko.
  • Slike naj bodo enotnih razmerij in opremljene z atributom alt.
  • Za prispevke uporabi Bootstrapove kartice in po potrebi lastne dopolnilne razrede.
  • Za odzivno postavitev uporabi mrežo, na primer row g-4, col-lg-8, col-lg-4 in col-md-6.
  • Teme ali oznake naj se nanašajo na dejansko vsebino prispevkov.
  • Datume zapisuj v enotni obliki.
  • Stran preveri na telefonu, tablici in večjem zaslonu.

Pogoste napake

  • Kartice nimajo enotne strukture, zato je stran videti neurejena.
  • Slike nimajo atributa alt ali niso vsebinsko povezane s prispevkom.
  • Datumi objav niso zapisani dosledno.
  • Teme v stranskem bloku niso povezane z dejanskimi prispevki.
  • Postavitev je preverjena samo na velikem zaslonu, ne pa tudi na manjših napravah.
  • Naslovi so izbrani zaradi videza in ne zaradi strukture dokumenta.
  • V glavnem meniju ni pravilno označena trenutna stran Blog.
Nazaj
Naprej