Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

Izdelava strani Bootstrap

Na tej strani izdelamo podstran Bootstrap, ki uporabniku predstavi namen ogrodja Bootstrap, njegove osnovne prednosti, načine vključitve in primere uporabe. Stran pripravimo na osnovi že izdelane domače strani, zato ponovno uporabimo skupne dele spletišča: glavo dokumenta, odzivno navigacijo, povezave do slogovnih datotek in nogo strani.

Bootstrap je sodobno odprtokodno ogrodje za izdelavo odzivnih spletnih strani in uporabniških vmesnikov. Vključuje mrežni sistem, pripravljene komponente, pomožne razrede in JavaScript vtičnike. Uporaben je zato, ker pokaže, kako lahko z urejeno strukturo HTML in premišljeno uporabo razredov hitro izdelamo pregledno in prilagodljivo spletno stran.

Pomni: Podstrani spletišča naj bodo oblikovno in strukturno skladne z domačo stranjo. Zato pri izdelavi nove podstrani pogosto uporabimo že pripravljeno predlogo in zamenjamo samo tiste dele, ki so značilni za novo vsebino.

Osnovna pravila izdelave podstrani Bootstrap

Podstran bootstrap.html oziroma bootstrap.php pripravimo tako, da iz domače strani ohranimo skupne elemente, vsebinske dele pa zamenjamo z novo vsebino. Tak način dela omogoča dosledno podobo spletišča in hitrejšo izdelavo več sorodnih strani.

Korak Opis
Kopiranje predloge Domačo stran kopiramo in jo shranimo kot novo podstran.
Prilagoditev glave dokumenta Spremenimo naslov strani, meta opis in po potrebi ključne besede.
Prilagoditev navigacije Aktivni razred active premaknemo na povezavo, ki predstavlja trenutno stran.
Zamenjava vsebine Odstranimo vsebino domače strani in vstavimo razdelke, ki pojasnjujejo Bootstrap.
Preverjanje odzivnosti Stran preverimo na večjih in manjših zaslonih ter popravimo razporeditev elementov.

Pozor: Pri kopiranju strani se pogosto zgodi, da ostanejo stari naslovi, meta opisi, aktivni elementi menija ali neustrezne povezave. Po kopiranju predloge je treba vse te dele skrbno pregledati.

Predloga navigacije in noge spletne strani

V datoteki bootstrap.php obdržimo HTML kodo glave dokumenta, odzivno navigacijo z logotipom ter nogo spletne strani, preostalo vsebino domače strani pa odstranimo. Nato spremenimo naslov strani in v meniju premaknemo razred active na povezavo Bootstrap.

V glavi dokumenta so pomembne povezave do ikone spletišča, spletne pisave, Bootstrapove slogovne datoteke, ikon in lastne slogovne datoteke. Bootstrapovo JavaScript datoteko vključimo na koncu dokumenta, pred zaključno oznako </body>.

Primer izdelave spletišča postavitev strani Bootstrap predloga navigacije in noge

Predloga spletne strani bootstrap.php s prenovljeno Bootstrap navigacijo, spremenjenim naslovom in nogo spletne strani:

<!DOCTYPE html>
<html lang="sl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Pregled Bootstrap ogrodja, namestitve in prednosti.">
  <meta name="keywords" content="Bootstrap, odzivno oblikovanje, mrežni sistem, komponente, dokumentacija">
  <meta name="author" content="eNSA">
  <title>eNSA | Spletišče: Bootstrap</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">
    <div class="container">
      <a class="navbar-brand" href="index.html"><img src="slike/index/logo.png" alt="eNSA logotip"></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#meni" aria-controls="meni" aria-expanded="false" aria-label="Preklopi navigacijo">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="meni">
        <ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
          <li class="nav-item"><a class="nav-link" href="index.html">Domov</a></li>
          <li class="nav-item"><a class="nav-link active" href="bootstrap.html" aria-current="page">Bootstrap</a></li>
          ...
        </ul>
      </div>
    </div>
  </nav>

  <footer>
    <div class="container">
      <div class="row align-items-center gy-3">
        ...
      </div>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Predogled: bootstrap1.html

Pomni: Razred active označuje trenutno stran v navigaciji. Uporabniku pomaga razumeti, kje v spletišču se nahaja.

Glava strani page-hero

Pod navigacijo vstavimo glavo spletne strani z razredom page-hero. V njej sta glavni naslov in kratek opis strani. Ta del uporabniku takoj pove, da je vsebina strani namenjena predstavitvi ogrodja Bootstrap.

Primer izdelave spletišča postavitev strani Bootstrap glava strani

Vstavimo glavo strani z naslovom Bootstrap in kratkim uvodnim besedilom:

<header class="page-hero">
  <div class="container">
    <h1>Bootstrap</h1>
    <p class="lead mb-0">Pregled sodobnega ogrodja za odzivno postavitev, komponente in hitro gradnjo uporabniških vmesnikov.</p>
  </div>
</header>

V datoteko slog.css lahko dodamo tudi oblikovne sloge glave strani:

.page-hero{
   background-color:#553d7b;
   color:#fff;
   padding:3rem 0;
}

.page-hero .lead{
   color:#e6dff2;
   max-width:900px;
}
Predogled: bootstrap2.html

Pozor: Glava strani naj ne vsebuje predolgega besedila. Njena naloga je kratko predstaviti temo strani, ne pa nadomestiti celotne razlage.

Okvir Kaj je Bootstrap?

Pod glavo strani vstavimo razdelek z dvema stolpcema. V levem stolpcu je razlaga ogrodja Bootstrap in dva gumba, v desnem pa slika z logotipi. Na večjih zaslonih sta stolpca drug ob drugem, na manjših pa se prikažeta drug pod drugim.

Za postavitev uporabimo Bootstrapov mrežni sistem in razrede container, row, col-lg-6, btn, btn-primary in btn-outline-primary.

Primer izdelave spletišča postavitev strani Bootstrap okvir Kaj je Bootstrap?

Besedilo neposredno pojasnjuje namen in prednosti ogrodja Bootstrap:

<section class="py-5">
  <div class="container">
    <div class="row g-4 align-items-center">
      <div class="col-lg-6">
        <h2 class="section-title">Kaj je Bootstrap?</h2>
        <p>Bootstrap je zbirka CSS in JavaScript rešitev za izdelavo odzivnih spletišč...</p>
        <p>Pri učenju je posebej uporaben, ker pokaže, kako z nekaj premišljeno izbranimi razredi hitro zgradimo pregleden in prilagodljiv vmesnik...</p>
        <div class="d-flex flex-wrap gap-3 mt-4">
          <a href="dokument/zacetek.html" class="btn btn-primary btn-lg">Dokumentacija</a>
          <a href="https://getbootstrap.com/" class="btn btn-outline-primary btn-lg">Uradna stran</a>
        </div>
      </div>
      <div class="col-lg-6 text-center">
        <img src="slike/bootstrap/bootstrap-stack.png" alt="Bootstrap logotipi" class="img-fluid rounded-4 shadow-sm">
      </div>
    </div>
  </div>
</section>
Predogled: bootstrap3.html

Pomni: Bootstrapov mrežni sistem temelji na vsebniku, vrsticah in stolpcih. Razredi, kot je col-lg-6, določajo, kako širok naj bo stolpec pri določenih širinah zaslona.

Okvir s tremi karticami

Pod razdelek Kaj je Bootstrap? vstavimo razdelek s tremi karticami. Vsaka kartica vsebuje ikono, naslov in besedilo. V prvi je še blok kode, v tretji pa slika tem Bootstrap. Na mobilnih napravah se kartice prikažejo ena pod drugo.

Za oblikovanje uporabimo Bootstrapove razrede row, col-md-4, card in lastne razrede doc-card ter icon-round.

Primer izdelave spletišča postavitev strani Bootstrap okvir s 3 karticami

V karticah predstavimo namestitev, uporabo CDN različice in pregled pripravljenih predlog:

<section class="section-soft py-5">
  <div class="container">
    <div class="row g-4">
      <div class="col-md-4">
        <div class="doc-card card p-4">
          <div class="icon-round mb-3"><i class="fa fa-download"></i></div>
          <h3 class="h4">Namestitev</h3>
          <p>Bootstrap lahko dodaš prek CDN povezave, z upravljalnikom paketov ali s prenosom prevedenih datotek.</p>
          <pre class="mb-0"><code>npm install bootstrap

<link href="bootstrap.min.css" rel="stylesheet">
<script src="bootstrap.bundle.min.js"></script></code></pre>
        </div>
      </div>

      <div class="col-md-4">
        <div class="doc-card card p-4">
          <div class="icon-round mb-3"><i class="fa fa-cloud-download"></i></div>
          <h3 class="h4">CDN in bundle</h3>
          <p>Bootstrap lahko vključimo s CDN povezavami. Datoteka bundle vsebuje tudi podporo za Popper, ki je potrebna pri nekaterih komponentah.</p>
        </div>
      </div>

      <div class="col-md-4">
        <div class="doc-card card p-4">
          <div class="icon-round mb-3"><i class="fa fa-cog"></i></div>
          <h3 class="h4">Predloge in komponente</h3>
          <p>Ogrodje ponuja veliko primerov postavitve, komponent in pomožnih razredov za hitrejšo izdelavo uporabniškega vmesnika.</p>
          <p class="mb-0"><img src="slike/bootstrap/bootstrap-themes.png" alt="Bootstrap teme" class="img-fluid rounded-3 mt-2"></p>
        </div>
      </div>
    </div>
  </div>
</section>

Primer dodatnih slogov za kartice in okrogle ikone:

.section-soft{
   background-color:#f5f5f5;
}

.doc-card{
   border:0;
   border-radius:1rem;
   box-shadow:0 0.5rem 1rem rgba(0,0,0,0.08);
   height:100%;
}

.icon-round{
   width:56px;
   height:56px;
   border-radius:50%;
   display:flex;
   align-items:center;
   justify-content:center;
   background:#e8f1ff;
   color:#4da6ff;
   font-size:1.4rem;
}
Predogled: bootstrap4.html

Primerjava načinov vključitve Bootstrapa

Bootstrap lahko v projekt vključimo na več načinov. Pri manjših učnih primerih je pogosto najpreprostejši CDN, pri večjih projektih pa je primernejša uporaba paketnega upravljalnika ali lokalnih datotek.

Način Prednost Primernost
CDN Hitra vključitev brez prenosa datotek. Primeren za učenje, prototipe in manjše strani.
Prenos prevedenih datotek Datoteke so shranjene lokalno in niso odvisne od zunanjega naslova. Primeren za projekte, kjer želimo več nadzora nad datotekami.
Paketni upravljalnik Lažje posodabljanje in vključitev v sodoben razvojni potek. Primeren za večje projekte in uporabo orodij, kot so Vite, Webpack ali Parcel.
Sass izvorne datoteke Omogočajo poglobljeno prilagoditev spremenljivk, map in komponent. Primerne za zahtevnejše projekte z lastno oblikovno podobo.

Pozor: Pri kopiranju kode iz različnih virov je treba paziti na različico Bootstrapa. Razredi in podatkovni atributi se med starejšimi in novejšimi različicami lahko razlikujejo.

Priporočila za uporabo Bootstrapa

  • Uporabljaj eno izbrano različico Bootstrapa in ne mešaj kode iz različnih različic.
  • Bootstrapovo CSS datoteko vključi pred lastno datoteko slog.css.
  • Za interaktivne komponente vključi tudi bootstrap.bundle.min.js.
  • Pri navigaciji pravilno označi trenutno stran z razredom active in atributom aria-current="page".
  • Za postavitev vsebine uporabljaj mrežni sistem z vsebnikom, vrsticami in stolpci.
  • Pri slikah uporabljaj razred img-fluid, kadar želiš, da se prilagajajo širini vsebnika.
  • Lastne sloge piši premišljeno in z njimi dopolni Bootstrap, ne pa po nepotrebnem podvajaj njegovih razredov.

Pogoste napake

  • Po kopiranju predloge ostane napačen naslov strani ali napačen meta opis.
  • Razred active ostane na povezavi Domov, čeprav je odprta stran Bootstrap.
  • V dokumentu manjka oznaka viewport, zato odzivno oblikovanje na mobilnih napravah ne deluje pravilno.
  • Bootstrapova JavaScript datoteka ni vključena, zato spustni meni ali druge interaktivne komponente ne delujejo.
  • V isti strani so pomešani primeri kode iz različnih različic Bootstrapa.
  • Stolpci so uporabljeni brez ustrezne strukture container, row in col.
  • Slike nimajo atributa alt ali pa nadomestno besedilo ne pojasni pomena slike.
  • Lastni CSS po nepotrebnem prepisuje preveč Bootstrapovih pravil, zato je stran težje vzdrževati.
Nazaj
Naprej