Interaktívna učebnica k dvom vyučovacím hodinám. Čítaj, skúšaj a hneď vidíš výsledok.
Hotová kostra kódu s pravidlami, do ktorej vkladáme vlastný obsah.
@media pravidielMy voláme jej kód vtedy, keď ho práve potrebujeme. Program riadime my.
= náradie v dielni
Dáva kostru a pravidlá, do ktorých vkladáme obsah. Framework riadi nás.
= stavebnica s návodom
Najčastejšia chyba: kód nájdený na internete patrí k inej verzii.
| Kritérium | Bootstrap 3 2013 | Bootstrap 4 2018 | Bootstrap 5 2021 |
|---|
data-toggle (v4) → data-bs-toggle (v5)ml-3 / mr-3 (v4) → ms-3 / me-3 (v5, kvôli podpore RTL)img-responsive (v3) → img-fluid (v4 a v5)form-group (v4) → zrušené, použi mb-3 alebo g-3Tri spôsoby. Na hodine používame CDN.
Súbory sa načítajú priamo z internetu. Nič nesťahujeme. Bez pripojenia stránka stratí štýl.
<!-- 1. do <head> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 2. tesne pred </body> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>bundle znamená, že súbor obsahuje aj knižnicu Popper, ktorú potrebujú dropdown, tooltip a popover. Ak používaš len mriežku a farby, JavaScript pripájať nemusíš.
Na getbootstrap.com → Download → Compiled CSS and JS stiahneme ZIP, rozbalíme a priečinky css/ a js/ skopírujeme do projektu.
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>Pre väčšie projekty s nástrojmi Vite alebo Webpack, keď si chceme upraviť zdrojové SCSS premenné (napr. hlavnú farbu $primary).
npm install bootstrap@5.3.8
// potom v kóde projektu
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';Minimálna funkčná stránka. Bez značky <meta name="viewport"> sa na mobile mriežka vôbec nezalomí — je to najčastejšia príčina otázky „prečo mi to na telefóne nefunguje“.
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Moja prvá Bootstrap stránka</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
<h1 class="text-primary">Ahoj, Bootstrap!</h1>
<button class="btn btn-success">Funguje to</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Posúvaj jazdce a sleduj, ako sa mriežka mení. Kód sa generuje sám.
Zmenši okno prehliadača (alebo stlač F12 a zapni Toggle device toolbar) a sleduj, kedy sa stĺpce zalomia pod seba.
.container → .row → .col-*.
Stĺpec musí byť priamym potomkom riadku. Súčet stĺpcov v riadku má byť 12;
ak je viac, prebytok sa zalomí do ďalšieho riadku (nie je to chyba, ale musí to byť zámer).
Bootstrap pomenúva farby podľa významu, nie podľa odtieňa. Klikni na dlaždicu.
text-success — zelený text
bg-warning — žlté pozadie
text-bg-danger — pozadie + kontrastný text
border-info — farebný rámček
alert alert-info — informačná hláškaŠírka sa skokovo mení na breakpointoch, po bokoch ostávajú okraje. Vhodné pre články, blogy a bežný obsah.
Vhodné pre hlavičky, hero sekcie, administračné panely a galérie na celú obrazovku.
Zapínaj triedy a sleduj, ako sa obrázok mení.
Namiesto skutočnej fotografie je tu farebný blok, aby stránka fungovala aj bez internetu. Na skutočnom obrázku sa triedy správajú rovnako.
alt je povinný vždy. Číta ho čítačka obrazovky pre nevidiacich
a zobrazí sa, keď sa obrázok nenačíta. Bootstrap ho nenahrádza.
Skús formulár odoslať prázdny a pozri, ako funguje validácia.
form-label | popisok, prepojený cez for |
form-control | text, e-mail, heslo, textarea |
form-select | rozbaľovací zoznam |
form-check | checkbox a radio |
form-switch | prepínač (novinka v 5) |
form-range | posuvník |
form-floating | plávajúci popisok (novinka v 5) |
is-invalid | chybný stav + invalid-feedback |
form-group, form-row.
Medzery rieš triedami mb-3 alebo g-3 na riadku.
10 otázok z oboch hodín. Odpoveď sa vyhodnotí hneď.