# 13 - Úvod do Bootstrapu

## 🎯 Co se naučíte

V této lekci se seznámíte s Bootstrap frameworkem a jeho základními komponentami.

## 📚 Témata lekce

- **Co je Bootstrap** - CSS framework pro rychlý vývoj
- **Připojení Bootstrapu** k projektu (lokální soubory)
- **Container** - základní obal pro obsah (`.container`)
- **Grid systém** - 12sloupcová mřížka
  - `.row` - řádek
  - `.col` - sloupce (automatická šířka)
  - `.col-6` - sloupec se šířkou 6/12
- **Responzivní třídy** - `col-md-6`, `col-lg-3`
- **Typography** - `display-1`, `display-5`
- **Utility třídy**:
  - Okraje: `m-2`, `mx-2`, `p-2`
  - Borders: `border`, `border-danger`, `rounded`
  - Další: `<mark>`, `<code>`, `<kbd>`

## 📂 Soubory v projektu

- `index.html` - HTML s Bootstrap třídami
- `css/bootstrap.css` - Bootstrap CSS (lokální)
- `js/bootstrap.js` - Bootstrap JavaScript (lokální)

## 💻 Ukázka z lekce

```html
<!-- Container -->
<div class="container">
    <h1 class="display-1">Hello, Bootstrap!</h1>

    <!-- Grid systém -->
    <div class="row">
        <div class="col-md-6 col-lg-3">
            <div class="border border-primary rounded m-2 p-2">
                Obsah sloupce
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            Další sloupec
        </div>
    </div>
</div>
```

## 🚀 Jak s lekcí pracovat

1. Otevřete `index.html` v prohlížeči
2. Prozkoumejte Bootstrap třídy v HTML
3. Změňte velikost okna - sledujte responzivní chování
4. Vyzkoušejte Developer Tools (F12) - Device Toolbar
5. Experimentujte s různými utility třídami
6. Změňte `col-md-6` na `col-lg-4` a sledujte změny

## 💡 Tip pro studenty

### Bootstrap Grid System:
- **12 sloupců celkem** v každém řádku
- **col-6** = 6/12 = 50% šířky
- **col-4** = 4/12 = 33.33% šířky
- **col** = automatická šířka (rovnoměrně rozdělí prostor)

### Responzivní breakpointy:
- **xs** (extra small) = < 576px (mobil) - není třeba psát, je výchozí
- **sm** (small) = ≥ 576px
- **md** (medium) = ≥ 768px (tablet)
- **lg** (large) = ≥ 992px (desktop)
- **xl** (extra large) = ≥ 1200px

### Příklad responzivity:
```html
<div class="col-12 col-md-6 col-lg-3">
    <!-- Mobil: 100% šířky (12/12) -->
    <!-- Tablet: 50% šířky (6/12) -->
    <!-- Desktop: 25% šířky (3/12) -->
</div>
```

### Container vs Container-fluid:
- **container** = fixní šířka, centrovaný
- **container-fluid** = 100% šířky

### Důležité:
- VŽDY používejte **row** pro řádky
- Sloupce (**col**) musí být uvnitř **row**
- Celkový součet sloupců by měl být **12** (nebo méně)

## 🎨 Utility třídy:

```html
<!-- Okraje (margin) -->
m-2   = margin všude
mx-2  = margin vlevo a vpravo
my-3  = margin nahoře a dole
mt-4  = margin nahoře

<!-- Padding -->
p-2   = padding všude
px-3  = padding vlevo a vpravo

<!-- Borders -->
border              = přidá border
border-primary      = modrý border
border-3            = tlustší border
rounded             = zaoblené rohy
```

## 🔗 Související lekce

- **Předchozí:** 12_grid - CSS Grid (pochopení grid systému)
- **Důležité přípravné projekty:**
  - AI_extra_material/ai_01_grid_responsive - CSS Grid praxe
  - AI_extra_material/ai_04_prep_bootstrap - komplexní příprava
- **Další:** 14_bootstrap_layout - pokročilejší Bootstrap layouty
- **Související:** 15_bootstrap_components - Bootstrap komponenty