Spletno stran Bootstrap sestavimo s pomočjo domače strani index.php. Datoteko kopiramo, jo shranimo kot bootstrap.php in nato prilagodimo vsebino. Pri izdelavi sledimo zgradbi dokumenta od vrha spletne strani proti dnu po naslednjih korakih:
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.
Predloga spletne strani bootstrap.php s prenovljeno Bootstrap 5 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.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">
<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.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>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 nadomesti staro vijolično glavo s preprostejšo in sodobnejšo strukturo.
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;
}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.
Besedilo ni več generično, ampak 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>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.
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>Novejše različice ne potrebujejo jQuery...</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...</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;
}