Spletno stran Kontakt sestavimo s pomočjo datoteke bootstrap.html. Iz nje pripravimo samostojno datoteko kontakt.html, v kateri ohranimo enotno navigacijo, glavni naslov in nogo, nato pa dodamo kontaktne podatke, obrazec za sporočilo in vdelan zemljevid lokacije.
Predloga navigacije, naslova in noge spletne strani
V datoteki kontakt.html obdržimo navigacijo, glavni naslov in nogo. Posodobimo naslov strani, glavni naslov in uvodni opis ter v glavnem meniju označimo postavko Kontakt 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="Kontaktna stran za vprašanja o Bootstrapu.">
<meta name="keywords" content="Bootstrap, odzivno oblikovanje, mrežni sistem, komponente, dokumentacija">
<meta name="author" content="eNSA">
<title>eNSA | Spletišče: Kontakt</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>Kontakt</h1>
<p class="lead mb-0">Piši nam, če želiš pomoč pri učenju Bootstrapa, postavitvi projekta ali razumevanju dokumentacije.</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>Kontaktni podatki in uvodno besedilo
Pod glavni naslov dodamo glavni vsebinski odsek. Namesto stare enostavne vrstice z enim stolpcem uporabimo sodobnejšo postavitev z dvema karticama. V levi kartici so kontaktni podatki in kratek opis podpore, v desni pa bo obrazec za sporočilo.
Za postavitev uporabimo naslednje Bootstrapove razrede:
- container - okvir s fiksno širino
- row - vrstica
- g-4 - razmik med elementi mreže
- col-lg-5 - levi stolpec za kontaktne podatke
- col-lg-7 - desni stolpec za obrazec
- card - kartica vsebine
- p-4 - notranji odmik
- h-100 - enaka višina kartic
...
<section class="py-5">
<div class="container">
<div class="row g-4">
<div class="col-lg-5">
<div class="contact-card card p-4 h-100">
<h2 class="section-title h3">Kontaktni podatki</h2>
<ul class="contact-list list-unstyled mb-4">
<li><strong>eNSA Bootstrap</strong></li>
<li>Kidričeva cesta 55, 4000 Kranj</li>
<li>E-pošta: bootstrap@ensa.si</li>
<li>Telefon: +386 (0)4 000 00 00</li>
<li>Podpora: ponedeljek–petek, 8.00–15.00</li>
</ul>
<p>Na vprašanja o mrežnem sistemu, komponentah, obrazcih in prilagoditvah sloga odgovarjamo z usmeritvami za hitro in pregledno uporabo ogrodja.</p>
</div>
</div>
...
</div>
</div>
</section>
...V datoteko z oblikovnimi slogi spletišča slog.css lahko dodamo še osnovne sloge kontaktne kartice:
/* Kontakt - kartice in seznam */
.contact-card{
border:1px solid #e8e8e8;
border-radius:.75rem;
}
.contact-list li{
margin-bottom:.4rem;
}Obrazec
V desni kartici pripravimo obrazec za pošiljanje sporočila. Nova različica uporablja Bootstrap 5 razrede form-label, form-control in mrežo z razredom row g-3. Obrazec vsebuje polja za ime, e-pošto, zadevo in sporočilo ter gumb za pošiljanje.
Za oblikovanje uporabimo naslednje Bootstrapove razrede:
- row - vrstica
- g-3 - razmik med polji obrazca
- col-md-6 - dva stolpca pri prvih dveh poljih
- col-12 - polna širina pri večjih poljih
- form-label - oznaka polja
- form-control - vnosna polja in besedilno polje
- btn - osnovni gumb
- btn-primary - primarni gumb
- btn-lg - večji gumb
...
<div class="col-lg-7">
<div class="contact-card card p-4 h-100">
<h2 class="section-title h3">Pošlji sporočilo</h2>
<form class="row g-3">
<div class="col-md-6">
<label class="form-label" for="ime">Ime</label>
<input class="form-control" id="ime" type="text" placeholder="Vnesi ime">
</div>
<div class="col-md-6">
<label class="form-label" for="email">E-pošta</label>
<input class="form-control" id="email" type="email" placeholder="ime@primer.si">
</div>
<div class="col-12">
<label class="form-label" for="zadeva">Zadeva</label>
<input class="form-control" id="zadeva" type="text" placeholder="Npr. pomoč pri postavitvi mreže">
</div>
<div class="col-12">
<label class="form-label" for="sporocilo">Sporočilo</label>
<textarea class="form-control" id="sporocilo" rows="6" placeholder="Na kratko opiši vprašanje ali težavo."></textarea>
</div>
<div class="col-12">
<button class="btn btn-primary btn-lg" type="button">Pošlji sporočilo</button>
</div>
</form>
</div>
</div>
...Zemljevid
Pod kontaktni del dodamo še zemljevid lokacije. Namesto starega Google Maps API skripta z lastnim ključem uporabimo preprostejši in varnejši vdelani zemljevid prek elementa iframe. Takšna rešitev je za prikaz lokacije dovolj enostavna in ne zahteva dodatne JavaScript kode.
Za prikaz zemljevida uporabimo naslednje elemente in razrede:
- row - vrstica za zemljevid
- mt-4 - zgornji odmik
- col-12 - polna širina
- iframe - vdelani zemljevid
- map-frame - lasten razred za slog zemljevida
- shadow-sm - nežna senca
...
<div class="row mt-4">
<div class="col-12">
<iframe
class="map-frame shadow-sm"
title="Lokacija"
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps?q=Kidri%C4%8Deva%20cesta%2055%2C%204000%20Kranj&z=15&output=embed">
</iframe>
</div>
</div>
...V datoteko z oblikovnimi slogi spletišča slog.css zapišemo oblikovne sloge zemljevida:
/* Kontakt - zemljevid */
.map-frame{
width:100%;
min-height:420px;
border:0;
border-radius:.75rem;
}