``` ### Offset, alignment ```html

Uprostřed (přeskočí 4 sloupce zleva)

``` --- ### Mobile-first přístup Bootstrap je **mobile-first**: třídy **bez** breakpointu platí pro **všechny** velikosti, třídy **s** breakpointem platí **od** dané velikosti **nahoru**. ```html

``` Bootstrap se píše **odzdola nahoru**: nejdřív definuj layout pro mobil, pak postupně přidávej třídy pro větší obrazovky. --- ### Typografie ### Display headings (velké nadpisy) Pro hero sekce a důležité nadpisy. Větší než klasické `h1`-`h6`. ```html

Display 1 (5rem)

Display 2 (4.5rem)

Display 3 (4rem)

Display 4 (3.5rem)

Display 5 (3rem)

Display 6 (2.5rem)

``` ### Lead odstavec ```html

Větší a výraznější odstavec, typicky pro intro text.

``` ### Text utility třídy ```html

Centrovaný

Vlevo (default)

Vpravo

Šedý text

Modrá barva

Červená

Bílá (na tmavé pozadí)

Tučný

Tenký

Kurzíva

VELKÁ

malá

První Písmena

Velikost 1 (největší, 2.5rem)

Velikost 6 (nejmenší, 1rem)

Dlouhý text se zkrátí třemi tečkami...

``` --- ### Komponenty ### Navbar Nejpoužívanější komponenta. Responzivní s hamburger menu. ```html ``` | Třída | Co dělá | | --- | --- | | `navbar` | Základní komponenta | | `navbar-expand-lg` | Plný navbar od `lg`, pod tím hamburger menu | | `bg-dark` / `bg-light` | Barva pozadí | | `navbar-dark` / `navbar-light` | Barva textu (světlá pro tmavé pozadí a naopak) | | `navbar-brand` | Logo / název webu | | `navbar-toggler` | Hamburger tlačítko | | `data-bs-target="#id"` | ID collapse divu (musí odpovídat) | | `ms-auto` | Odsune položky doprava (margin-start: auto) | | `nav-item`, `nav-link` | Položka menu | | `active` | Aktivní (současná) položka | | `sticky-top` | Navbar přilepený nahoře při scrollu | | `fixed-top` | Navbar fixně nahoře vždy | ### Card Univerzální komponenta pro produkty, články, profily. ```html

Název

Popis obsahu.

Více info

Aktualizováno před 3 minutami

``` | Třída | Co dělá | | --- | --- | | `card` | Hlavní kontejner | | `card-img-top` | Obrázek nahoře | | `card-body` | Sekce s odsazením a obsahem | | `card-title`, `card-text` | Nadpis a text | | `card-header`, `card-footer` | Záhlaví a zápatí karty | | `h-100` | Karta na plnou výšku sloupce (důležité v gridu) | | `shadow-sm` | Drobný stín | | `card-img-overlay` | Obsah přes obrázek | ### Buttons ```html ``` ### Badges (štítky) ```html

Nadpis Nové

Online Připraveno ``` ### Alert (upozornění) ```html

Operace proběhla úspěšně.

Něco se pokazilo. Zkus to znovu.

Pozor! Toto je důležité varování.

``` ### List group ```html

Aktivní položka
Druhá
Třetí
Zprávy 14

``` ### Forms (formuláře) ```html ``` **Klíčové formulářové třídy:** | Třída | Co dělá | | --- | --- | | `form-label` | Stylovaný label | | `form-control` | Stylovaný input/textarea | | `form-select` | Stylovaný select | | `form-check` | Wrapper pro checkbox/radio | | `form-check-input`, `form-check-label` | Checkbox/radio elementy | | `form-switch` | Stylování jako přepínač | | `form-text` | Pomocný text pod inputem | | `is-valid`, `is-invalid` | Validace (zelený/červený rámeček) | | `valid-feedback`, `invalid-feedback` | Zpráva pod inputem | ### Modal (dialog) Velmi často potřebný (přihlašovací formulář, potvrzení, "více info"). ```html ``` ### Carousel (slideshow) ```html

``` ### Accordion (rozbalovací sekce) ```html

Odpověď.

``` ### Pagination ```html ``` ### Spinner (loading) ```html

``` ### Progress bar ```html

67%

``` --- ### Utility třídy Single-purpose CSS třídy. Díky nim málokdy potřebuješ vlastní CSS. ### Spacing (mezery) Vzor: `{property}{side}-{size}` (například `mt-3`, `px-4`, `mb-0`) | Property | | | --- | --- | | `m` | margin | | `p` | padding | | Side | | | --- | --- | | `t` | top | | `b` | bottom | | `s` | start (vlevo v LTR) | | `e` | end (vpravo v LTR) | | `x` | x-axis (left + right) | | `y` | y-axis (top + bottom) | | *(prázdno)* | všechny strany | | Size | Hodnota | | --- | --- | | `0` | 0 | | `1` | 0.25rem (4 px) | | `2` | 0.5rem (8 px) | | `3` | 1rem (16 px) | | `4` | 1.5rem (24 px) | | `5` | 3rem (48 px) | | `auto` | auto | ```html

margin-top: 1rem, margin-bottom: 3rem, padding-x: 1.5rem

centrování bloku

Žádné mezery

``` ### Display ```html

Skryté na mobilu, viditelné od md

Viditelné do lg, pak skryté

Flexbox

CSS Grid

Inline-block

``` ### Flexbox utility ```html

Vlevo Vpravo

Položky s gap 1rem

Nahoře

Dole (push to bottom)

Wrapování položek

Obrácené pořadí

``` | Justify content | Align items | | --- | --- | | `justify-content-start` | `align-items-start` | | `justify-content-end` | `align-items-end` | | `justify-content-center` | `align-items-center` | | `justify-content-between` | `align-items-baseline` | | `justify-content-around` | `align-items-stretch` | | `justify-content-evenly` | | ### Barvy ```html

Modré

Zelené

Světlé

Sekundární

Modrý text

Šedý text

Poloprůhledná bílá

``` ### Borders, shadows, rounded ```html

Hranice všude

Modrá hranice

Hranice jen nahoře, tlustá

Bez hranice

Standardní zaoblení

Více zaoblené

Pilulka (úplně zaoblené)

Kruh

Malý stín

Středně

Velký stín

``` ### Obrázky ```html

``` ### Sizing ```html

25% šířka

50%

75%

100%

auto

100% výška (vyžaduje rodič s výškou)

100% viewport height (celá obrazovka)

100% viewport width

``` ### Position ```html

Relativní (kontext pro absolutní)

Pravý horní roh

Fixní vlevo dole

Sticky nahoře

``` --- ### Bootstrap Icons Bootstrap má vlastní knihovnu ikon. Není součástí core CSS, přidává se zvlášť. ```html Domů Kontakt Košík ``` Více než 2000 ikon: [icons.getbootstrap.com](https://icons.getbootstrap.com/) --- ### Customizace ### CSS Variables (Bootstrap 5) ```css :root { --bs-primary: #ff6b35; /* Přepíše modrou na oranžovou */ --bs-body-font-family: 'Inter', sans-serif; } ``` ### Vlastní CSS ```html ``` ```css /* moje-styly.css */ .btn-primary { background-color: #ff6b35; border-color: #ff6b35; } /* Override Bootstrap třídy přidáním specificity */ .navbar-brand.custom-logo { font-family: 'Lora', serif; font-size: 1.5rem; } ``` --- # Část 2: Praktická úloha ### Co může praktická úloha obsahovat Typická praktika v Bootstrapu: - **Navbar** s logem a hamburger menu pro mobil - **Hero sekce** s velkým nadpisem (display-*) a CTA tlačítkem - **Grid karet** (produkty, články, služby), responzivní 1/2/3 sloupce - **Dvou-sloupcová sekce** (text + obrázek), responzivně pod sebou - **Formulář** (kontakt, registrace, rezervace) - **Modal** (např. po kliknutí na "Rezervovat") - **List group** (otevírací doba, ceník) - **Footer** s informacemi a copyrightem ### Příklad zadání: Restaurant "U Starého Mlýna" Vytvoř stránku pro fiktivní restauraci pomocí Bootstrap 5. Dostaneš kostru HTML s CDN, ale chybí Bootstrap třídy a komponenty. **Co musíš doplnit:** 1. **Navbar** s logem, navigací (Domů, Jídelní lístek, O nás, Rezervace), responzivní hamburger 2. **Hero sekce** s nadpisem, podtitulem, tlačítkem "Rezervovat stůl" 3. **Grid s kartami**: 3 doporučená jídla (1 mobil / 3 desktop) 4. **Informační sekce**: 2 sloupce (otevírací doba + obrázek), na mobilu pod sebou 5. **Footer**: copyright, tmavé pozadí ### Řešení: kompletní index.html ```html U Starého Mlýna

Vítejte v restauraci U Starého Mlýna

Tradiční česká kuchyně v srdci města

Rezervovat stůl

Doporučujeme dnes

Svíčková na smetaně

Hovězí svíčková s houskovým knedlíkem.

Denní menu 189 Kč

Smažený řízek

Vepřový řízek s bramborovým salátem.

149 Kč

Hovězí guláš

Guláš s chlebovým knedlíkem a okurkou.

Bestseller 129 Kč

Navštivte nás

Pondělí - Pátek 11:00 - 22:00
Sobota 12:00 - 23:00
Neděle 12:00 - 20:00

``` --- ## Část 3: Tipy pro obhajobu ### Co u obhajoby říct > *"V zadání jsem dostal kostru webu pro restauraci a doplnil Bootstrap třídy a komponenty. Použil jsem mobile-first grid: 12 sloupcový flexbox systém. Nejdřív navbar s navbar-expand-lg (hamburger menu pod lg breakpointem), pak hero sekce s display-4 nadpisem a lead odstavcem. Pro karty jídel jsem použil row-cols-1 row-cols-md-3 pro responzivní mřížku 1 na mobilu, 3 na tabletu a výš, plus g-4 pro gutters. Informační sekce má dvou-sloupcový layout col-12 col-md-6, na mobilu se sloučí pod sebe. Obrázek používá img-fluid pro responzivitu. Footer je tmavý s text-white-50 pro decentní copyright."* > ### Klíčové pojmy pro teorii | Pojem | Rychlá odpověď | | --- | --- | | **Bootstrap** | CSS framework s předpřipravenými třídami, mobile-first | | **Grid systém** | 12-sloupcový flexbox layout s 6 breakpointy | | **Mobile-first** | Styluje se odzdola nahoru (mobil → tablet → desktop) | | **Breakpoint** | Šířka okna, kde se mění layout (sm 576, md 768, lg 992, xl 1200, xxl 1400) | | **Container** | Wrapper centrující obsah, limituje max-width | | **Row** | Flex řádek, MUSÍ být mezi container a col-* | | **`col-md-6`** | Prvek zabírá 6/12 sloupců od `md` breakpointu nahoru | | **Utility třídy** | Single-purpose třídy (mt-3, text-center, d-flex...) | | **CDN** | Content Delivery Network, načtení Bootstrap přímo z webu | | **Bootstrap JS bundle** | Obsahuje Popper.js, nutné pro modal, dropdown, tooltip | | **`img-fluid`** | Responzivní obrázek (max-width: 100%, height: auto) | | **`display-1` až `display-6`** | Velké display headings (5rem až 2.5rem) | | **`lead`** | Větší úvodní odstavec | | **`h-100`** | Karta na plnou výšku sloupce (důležité v gridu) | | **`ms-auto`** | Margin-start auto (odsune doprava ve flex) | | **`sticky-top`** | Element přilepený nahoře při scrollu | ### Časté chytáky | Otázka | Odpověď | | --- | --- | | *Kolik sloupců má Bootstrap grid?* | 12. Třídy se kombinují tak, aby v součtu na řádku tvořily 12. | | *Co je rozdíl `container` a `container-fluid`?* | Container má max-width podle breakpointu, container-fluid je vždy 100%. | | *Proč mobile-first?* | Mobil má menší obrazovku a méně místa, je jednodušší přidávat než ubírat. Plus většina návštěvníků dnes přichází z mobilu. | | *Co je `row-cols-md-3`?* | Od `md` breakpointu rozděl řádek na 3 stejně velké sloupce. | | *Kdy `col-12` a kdy `col`?* | `col-12` je vždy 100% (celá šířka). `col` (bez čísla) se dělí rovnoměrně se sourozenci. | | *Co dělá `g-4`?* | Nastaví gutters (mezery) mezi sloupci na 1.5rem. `gx-` jen horizontálně, `gy-` jen vertikálně. | | *Co je `data-bs-toggle`?* | HTML data atribut, který Bootstrap JavaScript hledá pro spouštění komponent (modal, collapse, tooltip). | | *Proč potřebuje Bootstrap JS Popper?* | Popper.js je pro pozicování plovoucích prvků (dropdown, tooltip, popover). Je součástí `bootstrap.bundle.min.js`. | | *Co je rozdíl `m-3` a `p-3`?* | `m` = margin (vnější mezera), `p` = padding (vnitřní mezera). | | *Co dělá `h-100` na kartě v gridu?* | Karta zaplní výšku celého sloupce, takže všechny karty v řádku jsou stejně vysoké. | ### Časté chyby v praktické úloze - Zapomenutý `row` mezi `container` a `col-*` (sloupce nebudou fungovat správně) - Chybějící `bootstrap.bundle.min.js` (modal/navbar collapse nefunguje) - `data-bs-target` nesouhlasí s `id` collapse divu (hamburger menu nefunguje) - `col-12 col-md-6` ale na desktopu nejde do dvou sloupců (chybí `row`) - `card-img-top` použitý mimo `card` strukturu - `img-fluid` zapomenutý u obrázku (na mobilu trčí ven) - `h-100` na kartě bez `h-100` na řádku (karty různě vysoké) - Hardcoded styly inline místo Bootstrap utility tříd - Kombinace `text-white` na `bg-light` (špatně viditelné) - `ms-auto` použit mimo `d-flex` kontext (nepracuje) - Bootstrap CSS načtený **po** vlastním CSS (vlastní styly přepsány Bootstrapem) - Chybějící `` (responzivita nefunguje)