# 14 - Bootstrap Layout
## 🎯 Co se naučíte
V této lekci se naučíte vytvářet kompletní layout stránky s pomocí Bootstrapu.
## 📚 Témata lekce
- **Header s navigací** - `nav`, `nav-pills`, `nav-item`
- **Flexbox utility třídy** - `d-flex`, `justify-content-center`, `align-items-center`
- **Main content** - hlavní obsah stránky
- **Jumbotron** - velká úvodní sekce (hero section)
- **Tabulky** - `table`, `table-hover`, `table-dark`, `table-info`
- **Footer** - patička stránky s `mt-auto`
- **Sticky footer** - přilepený footer (flexbox pattern)
- **Buttons** - `btn`, `btn-primary`
## 📂 Soubory v projektu
- `index.html` - kompletní layout s header, main, footer
- `css/bootstrap.css` - Bootstrap CSS
- `js/bootstrap.js` - Bootstrap JS
## 💻 Ukázka z lekce
```html
Hello world!
Lorem ipsum...
Více info
| Jméno |
Email |
| Jan |
jan@email.cz |
```
## 🚀 Jak s lekcí pracovat
1. Otevřete `index.html` v prohlížeči
2. Prozkoumejte strukturu: header → main → footer
3. Změňte velikost okna - sledujte responzivní navigaci
4. Vyzkoušejte hover efekt na tabulce
5. Experimentujte s barevnými třídami tabulek
6. Zkuste přidat další navigační položky
## 💡 Tip pro studenty
### Sticky Footer pattern:
```html
...
```
- **d-flex flex-column** = flexbox ve vertikálním směru
- **min-vh-100** = minimální výška 100% viewportu
- **mt-auto** = margin-top: auto (footer se přilepí dolů)
### Flexbox utility třídy:
```html
d-flex = display: flex
d-inline-flex = display: inline-flex
flex-row = řádkový (výchozí)
flex-column = sloupcový
justify-content-start = vlevo
justify-content-center = na střed
justify-content-end = vpravo
justify-content-between = mezi
align-items-start = nahoře
align-items-center = na střed
align-items-end = dole
```
### Navigace:
```html
```
### Tabulky:
```html
...
...
...
...
...
...
```
### Buttons:
```html
```
## 🔗 Související lekce
- **Předchozí:** 13_bootstrap_intro - úvod do Bootstrapu
- **Další:** 15_bootstrap_components - Bootstrap komponenty
- **Související:**
- 10_flex - Flexbox (pochopení flexbox utility tříd)
- AI/ai_02_semantic_portfolio - sémantická struktura stránky