Spletno stran Vodiči sestavimo s pomočjo datoteke bootstrap.html. Iz nje pripravimo samostojno datoteko vodici.html, v kateri ohranimo enotno navigacijo, glavni naslov in nogo, nato pa dodamo mrežo kartic z izbranimi video vodiči za Bootstrap.
Predloga navigacije, naslova in noge spletne strani
V datoteki vodici.html obdržimo navigacijo, glavni naslov in nogo. Posodobimo besedilo naslova in uvodnega opisa ter v glavnem meniju označimo postavko Vodiči kot trenutno aktivno. Nova različica uporablja Bootstrap 5 in sodobnejšo navigacijo brez odvisnosti od jQuery.
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="Izbor vodičev za Bootstrap in odzivno oblikovanje.">
<meta name="keywords" content="Bootstrap, odzivno oblikovanje, mrežni sistem, komponente, dokumentacija">
<meta name="author" content="eNSA">
<title>eNSA | Spletišče: Vodiči</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>Vodiči</h1>
<p class="lead mb-0">Izbrani video vodiči za spoznavanje Bootstrapa, od osnov do praktične izdelave odzivnih strani.</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 odseka vodičev
Pod naslov strani dodamo odsek s karticami vodičev. Namesto stare postavitve s štirimi stolpci col-sm-3 uporabimo prilagodljivo mrežo Bootstrap 5 z razredi row g-4, col-md-6 in col-xl-3. Tako je prikaz bolj odziven na različnih napravah.
Za postavitev uporabimo naslednje Bootstrapove razrede:
- container - okvir s fiksno širino
- row - vrstica
- g-4 - razmik med stolpci in vrsticami
- col-md-6 - dva stolpca na srednje velikih zaslonih
- col-xl-3 - štirje stolpci na zelo širokih zaslonih
...
<section class="py-5">
<div class="container">
<div class="row g-4">
<div class="col-md-6 col-xl-3">
<a class="text-decoration-none text-dark" href="#" target="_blank" rel="noopener noreferrer">
<div class="guide-card card h-100">
<img src="slike/vodici/yt-1.jpg" alt="Bootstrap Tutorial" class="img-fluid">
<div class="card-body">
</div>
</div>
</a>
</div>
<div class="col-md-6 col-xl-3">
</div>
<div class="col-md-6 col-xl-3">
</div>
<div class="col-md-6 col-xl-3">
</div>
</div>
</div>
</section>
...Kartica vodiča
Vsak vodič prikažemo kot kartico s sliko, naslovom, kratkim opisom in vrstico za odpiranje zunanje povezave. Namesto starega lastnega okvirja uporabimo Bootstrapovo kartico skupaj z dodatnima razredoma guide-card in guide-meta.
...
<a class="text-decoration-none text-dark" href="https://www.youtube.com/watch?v=gqOEoUR5RHg" target="_blank" rel="noopener noreferrer">
<div class="guide-card card h-100">
<img src="slike/vodici/yt-1.jpg" alt="Bootstrap Tutorial" class="img-fluid">
<div class="card-body">
<h3 class="h5">Bootstrap Tutorial</h3>
<p>Kratek uvod v uporabo mrežnega sistema, komponent in osnovnih utility razredov.</p>
<p class="guide-meta mb-0">Odpri zunanji vodič</p>
</div>
</div>
</a>
...V datoteko z oblikovnimi slogi spletišča slog.css zapišemo tudi osnovne sloge za kartice vodičev:
/* Vodiči */
.guide-card{
border:1px solid #e8e8e8;
transition:transform .2s ease, box-shadow .2s ease;
}
.guide-card:hover{
transform:translateY(-4px);
box-shadow:0 12px 24px rgba(0,0,0,.08);
}
.guide-meta{
color:#6c757d;
font-size:.95rem;
font-style:italic;
}Vsebina vodičev
V zadnjem koraku v mrežo dodamo izbrane vodiče s konkretnimi povezavami, slikami in kratkimi opisi. V novi različici opisi niso več generični Lorem ipsum, ampak na kratko povedo, kaj uporabnik v posameznem vodiču dobi.
...
<section class="py-5">
<div class="container">
<div class="row g-4">
<div class="col-md-6 col-xl-3">
<a class="text-decoration-none text-dark" href="https://www.youtube.com/watch?v=gqOEoUR5RHg" target="_blank" rel="noopener noreferrer">
<div class="guide-card card h-100">
<img src="slike/vodici/yt-1.jpg" alt="Bootstrap Tutorial" class="img-fluid">
<div class="card-body">
<h3 class="h5">Bootstrap Tutorial</h3>
<p>Kratek uvod v uporabo mrežnega sistema, komponent in osnovnih utility razredov.</p>
<p class="guide-meta mb-0">Odpri zunanji vodič</p>
</div>
</div>
</a>
</div>
<div class="col-md-6 col-xl-3">
<a class="text-decoration-none text-dark" href="https://www.youtube.com/watch?v=eIWRbvE1B2E" target="_blank" rel="noopener noreferrer">
<div class="guide-card card h-100">
<img src="slike/vodici/yt-3.jpg" alt="Responsive Website From Scratch" class="img-fluid">
<div class="card-body">
<h3 class="h5">Responsive Website From Scratch</h3>
<p>Postopna gradnja odzivne strani s poudarkom na razporejanju vsebine.</p>
<p class="guide-meta mb-0">Odpri zunanji vodič</p>
</div>
</div>
</a>
</div>
...
</div>
</div>
</section>
...