# 15 - Bootstrap Komponenty

## 🎯 Co se naučíte

V této lekci se naučíte používat základní Bootstrap komponenty pro vytváření interaktivních webů.

## 📚 Témata lekce

- **Cards** - kartičky pro obsah
- **Buttons** - tlačítka různých stylů
- **Badges** - odznaky pro zvýraznění
- **Alerts** - upozornění a zprávy
- **Progress bars** - indikátory průběhu
- **Breadcrumbs** - navigační drobečková navigace
- **Pagination** - stránkování
- **List groups** - stylované seznamy
- **Forms** - formulářové komponenty

## 📂 Soubory v projektu

- `index.html` - ukázky Bootstrap komponent
- `css/bootstrap.css` - Bootstrap CSS
- `js/bootstrap.js` - Bootstrap JS

## 💻 Ukázky komponent

### Cards (Kartičky)
```html
<div class="card" style="width: 18rem;">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Nadpis karty</h5>
        <p class="card-text">Text karty...</p>
        <a href="#" class="btn btn-primary">Tlačítko</a>
    </div>
</div>
```

### Alerts
```html
<div class="alert alert-primary" role="alert">
    Primární alert
</div>
<div class="alert alert-success" role="alert">
    Úspěšná operace!
</div>
<div class="alert alert-danger" role="alert">
    Chyba!
</div>
```

### Badges
```html
<h1>Nadpis <span class="badge bg-secondary">Nový</span></h1>
<button class="btn btn-primary">
    Notifikace <span class="badge bg-danger">4</span>
</button>
```

### Progress Bar
```html
<div class="progress">
    <div class="progress-bar" role="progressbar"
         style="width: 75%" aria-valuenow="75"
         aria-valuemin="0" aria-valuemax="100">75%</div>
</div>

<!-- Barevné -->
<div class="progress">
    <div class="progress-bar bg-success" style="width: 50%">50%</div>
</div>
```

## 🚀 Jak s lekcí pracovat

1. Otevřete `index.html` v prohlížeči
2. Prozkoumejte různé komponenty
3. Vyzkoušejte změnit barvy komponent (primary → success)
4. Experimentujte s kombinacemi komponent
5. Zkuste vytvořit vlastní kartu s obrázkem a tlačítkem
6. Prozkoumejte Bootstrap dokumentaci pro více variant

## 💡 Tip pro studenty

### Card layout:
```html
<!-- Grid s kartami -->
<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Karta 1</h5>
                <p class="card-text">Obsah...</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">...</div>
    </div>
    <div class="col-md-4">
        <div class="card">...</div>
    </div>
</div>
```

### Bootstrap barvy (color variants):
Většina komponent podporuje barevné varianty:
- **primary** = modrá (hlavní)
- **secondary** = šedá
- **success** = zelená (úspěch)
- **danger** = červená (chyba)
- **warning** = žlutá (varování)
- **info** = světle modrá (info)
- **light** = světlá
- **dark** = tmavá

### List Groups:
```html
<ul class="list-group">
    <li class="list-group-item">První položka</li>
    <li class="list-group-item active">Aktivní položka</li>
    <li class="list-group-item">Třetí položka</li>
</ul>
```

### Breadcrumbs:
```html
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Produkty</a></li>
        <li class="breadcrumb-item active">Notebook</li>
    </ol>
</nav>
```

### Pagination:
```html
<nav>
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Předchozí</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Další</a></li>
    </ul>
</nav>
```

## 🎨 Praktické využití

**E-shop produkty** = Cards
**Úspěšné odeslání formuláře** = Alert success
**Počet položek v košíku** = Badge
**Upload souboru** = Progress bar
**Navigace kategoriemi** = Breadcrumbs
**Seznam článků** = Pagination

## 🔗 Související lekce

- **Předchozí:** 14_bootstrap_layout - Bootstrap layout
- **Další:**
  - 16_carousel - Bootstrap carousel (slider)
  - 17_modal - Bootstrap modal (okna)
- **Dokumentace:** [Bootstrap Components](https://getbootstrap.com/docs/5.3/components/)