Bootstrap je eden izmed najbolj priljubljenih CSS frameworkov za razvoj odzivnih, mobilnim napravam prijaznih spletnih strani. Omogoča hitrejše in lažje oblikovanje spletnih mest z uporabo prednastavljenih stilov, mrežnega sistema (grid system), komponent in pripomočkov. V tem vodiču za začetnike bomo preučili osnove Bootstrap-a, kako ga integrirati v projekte, ter kako uporabljati njegov mrežni sistem, komponente in pripomočke.
1. Kaj je Bootstrap?
Bootstrap je odprtokodni CSS framework, ki ga je razvila ekipa Twitterja. Njegov namen je poenostaviti razvoj spletnih strani in omogočiti hitro izdelavo odzivnih spletnih mest. Bootstrap vključuje:
- Mrežni sistem (grid system) za postavitev strani.
- Komponente (gumbi, obrazci, navigacijski meniji) za enostavno dodajanje interaktivnih elementov.
- Pripomočke in orodja za prilagajanje videza in obnašanja elementov.
Bootstrap omogoča enotno oblikovanje spletne strani, ki je privzeto prilagojeno za mobilne naprave (mobile-first).
2. Kako vključiti Bootstrap v projekt?
Bootstrap lahko vključite na več načinov: z uporabo CDN (omrežja za dostavo vsebine) ali z lokalno namestitvijo. Priporočljiv in najlažji način za začetnike je uporaba CDN-ja.
Kako vključiti Bootstrap z uporabo CDN:
1. Odprite svoj HTML dokument.
2. V <head> oznako dodajte naslednje povezave za CSS in JavaScript knjižnice Bootstrap:
Primer:<head> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap JS (potrebno za interaktivne komponente) --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script></head>
S tem je Bootstrap vključen in pripravljen za uporabo.
3. Osnove mrežnega sistema (Grid System)
Ena izmed najpomembnejših lastnosti Bootstrap-a je njegov mrežni sistem, ki omogoča enostavno postavljanje elementov na stran. Mrežni sistem je sestavljen iz vrstic (rows) in stolpcev (columns), ki so prilagodljivi in odzivni.
Osnovni princip:
- Spletna stran je razdeljena v 12 stolpcev.
- Elementi se postavljajo v vrste (
<div class="row">). - Stolpci zasedajo prostor glede na določeno število stolpcev, npr.
col-6pomeni, da stolpec zaseda polovico širine vrstice (6 od 12 stolpcev).
Primer osnovne postavitve s Bootstrap mrežnim sistemom:<div class="container"> <div class="row"> <div class="col-6"> Leva polovica </div> <div class="col-6"> Desna polovica </div> </div></div>
Različne velikosti zaslona:
Bootstrap omogoča prilagoditev postavitve glede na različne širine zaslonov (odzivni dizajn). Mrežni sistem je razdeljen glede na velikost zaslona:
col-sm-*: majhni zasloni (do 576px)col-md-*: srednje veliki zasloni (do 768px)col-lg-*: veliki zasloni (do 992px)col-xl-*: zelo veliki zasloni (nad 1200px)
Primer odzivne postavitve:<div class="container"> <div class="row"> <div class="col-sm-12 col-md-6 col-lg-4"> Stolpec za različne velikosti zaslonov </div> <div class="col-sm-12 col-md-6 col-lg-8"> Drugi stolpec </div> </div></div>
V zgornjem primeru:
- Na majhnih zaslonih bo vsak stolpec zasedel celotno širino (12 stolpcev).
- Na srednje velikih zaslonih bo vsak stolpec zasedel polovico širine (6 stolpcev).
- Na velikih zaslonih bo prvi stolpec zasedel tretjino (4 stolpci), drugi pa dve tretjini (8 stolpcev).
4. Osnovne komponente Bootstrap
Bootstrap vključuje vrsto pripravljenih komponent, ki poenostavijo dodajanje interaktivnih elementov na spletno stran. Te komponente so stilizirane in pripravljene za takojšnjo uporabo.
Gumbi:
Bootstrap ponuja vrsto prednastavljenih slogov za gumbe, ki jih lahko prilagodite z razredi.
Primer gumbov:<button class="btn btn-primary">Primarni gumb</button><button class="btn btn-secondary">Sekundarni gumb</button><button class="btn btn-success">Uspeh</button><button class="btn btn-danger">Napaka</button>
Razredi, kot so `btn-primary`, `btn-secondary`, `btn-success` in `btn-danger`, določajo različne barvne sheme za gumbe.
Obrazci:
Bootstrap olajša ustvarjanje obrazcev z lepo oblikovanimi polji za vnos, gumbi in oznakami.
Primer obrazca:<form> <div class="mb-3"> <label for="email" class="form-label">Email naslov</label> <input type="email" class="form-control" id="email" placeholder="Vnesite svoj email"> </div> <div class="mb-3"> <label for="geslo" class="form-label">Geslo</label> <input type="password" class="form-control" id="geslo" placeholder="Geslo"> </div> <button type="submit" class="btn btn-primary">Pošlji</button></form>
Navigacija:
Bootstrap omogoča enostavno ustvarjanje navigacijskih menijev, ki so odzivni in vključujejo prilagoditev za mobilne naprave.
Primer navigacijskega menija:<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Moj Splet</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Domov</a> </li> <li class="nav-item"> <a class="nav-link" href="#">O nas</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Kontakt</a> </li> </ul> </div></nav>
Ta navigacijski meni se avtomatsko prilagaja mobilnim napravam in omogoča prikaz t.i. »hamburger« menija.
Kartice:
Kartice so priročen način za prikazovanje vsebine v vizualno privlačnih blokih.
Primer kartice:<div class="card" style="width: 18rem;"> <img src="/slika.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Naslov kartice</h5> <p class="card-text">Tukaj je nekaj hitrega besedila kot vsebina kartice.</p> <a href="#" class="btn btn-primary">Pojdi nekam</a> </div></div>
5. Bootstrap pripomočki
Bootstrap vključuje vrsto pripomočkov za enostavno oblikovanje in postavitev elementov, vključno s poravnavo, razmiki, plavajočimi elementi in še več.
Razmiki:
Bootstrap omogoča enostavno upravljanje z razmiki (robovi in oblazinjenjem) z uporabo pripomočkov za maržo (`m-`) in oblazinjenje (`p-`).
Primer upravljanja razmikov:<div class="m-3 p-3 bg-light"> Ta element ima oblazinjenje in robove nastavljene na 3 enote.</div>
- `m-3`: Doda maržo (zunanji rob) z vsemi štirimi stranicami.
- `p-3`: Doda oblazinjenje (notranji rob) z vsemi štirimi stranicami.
Barve in ozadja:
Bootstrap vsebuje že pripravljene razrede za barvno shemo in ozadja, ki jih lahko hitro uporabite.
Primer barv in ozadij:<div class="bg-primary text-white p-3"> Primarno ozadje in belo besedilo.</div><div class="bg-secondary text-dark p-3"> Sekundarno ozadje in temno besedilo.</div>
6. Odzivno oblikovanje (Responsive Design)
Bootstrap sledi pristopu "mobile-first", kar pomeni, da so vse komponente in mrežni sistem privzeto optimizirani za mobilne naprave. To zagotavlja, da se spletne strani pravilno prilagajajo različnim velikostim zaslonov.
Skrivanje in prikazovanje elementov:
Z uporabo Bootstrap razredov lahko določite, kateri elementi naj se prikazujejo ali skrivajo glede na velikost zaslona.
Primer:<div class="d-none d-md-block"> Ta element je skrit na mobilnih napravah in viden na srednje velikih in večjih zaslonih.</div>
- `d-none`: Element je skrit na vseh napravah.
- `d-md-block`: Element je prikazan kot blok na srednje velikih zaslonih in večjih.
7. Praktični primer: Ustvarjanje preproste spletne strani z Bootstrap
Zdaj, ko poznate osnove Bootstrap-a, lahko ustvarimo preprosto spletno stran z mrežnim sistemom, gumbi, navigacijskim menijem in obrazcem.
HTML koda:<!DOCTYPE html><html lang="sl"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Preprosta Bootstrap stran</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"></head><body>
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Moj Splet</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Domov</a> </li> <li class="nav-item"> <a class="nav-link" href="#">O nas</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Kontakt</a> </li> </ul> </div> </nav>
<div class="container mt-5"> <div class="row"> <div class="col-md-8"> <h1>Dobrodošli na naši strani!</h1> <p>To je preprosta spletna stran, ustvarjena s pomočjo Bootstrap frameworka.</p> </div> <div class="col-md-4"> <div class="card"> <div class="card-body"> <h5 class="card-title">Kontaktirajte nas</h5> <form> <div class="mb-3"> <label for="email" class="form-label">Email naslov</label> <input type="email" class="form-control" id="email"> </div> <button type="submit" class="btn btn-primary">Pošlji</button> </form> </div> </div> </div> </div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script></body></html>
8. Povzetek
V tem vodiču smo obravnavali osnove Bootstrap-a, vključno z:
- Namestitvijo Bootstrap-a prek CDN-ja.
- Uporabo mrežnega sistema za prilagodljivo postavitev elementov.
- Uporabo komponent, kot so gumbi, obrazci in navigacijski meniji.
- Upravljanje z razmiki, barvami in drugimi pripomočki.
- Odzivno oblikovanje, ki zagotavlja pravilno prilagajanje na različnih napravah.
Bootstrap je izjemno orodje za hitro in enostavno ustvarjanje odzivnih spletnih strani brez potrebe po naprednem znanju CSS ali JavaScript.
