3I_WTL_2025/novyprojekt_bootstrap

Nový Bootstrap Projekt

🎯 Účel projektu

Tento projekt slouží jako prázdná šablona pro vytváření nových Bootstrap projektů. Obsahuje základní připojení Bootstrap CSS a JS.

📚 Co projekt obsahuje

• Bootstrap 5.x - lokální soubory CSS a JS
• Základní HTML struktura - připravená pro vývoj
• Viewport meta tag - pro responzivitu

📂 Soubory v projektu

• index.html - základní HTML s připojeným Bootstrapem
• css/bootstrap.css - Bootstrap CSS (lokální soubor)
• js/bootstrap.js - Bootstrap JavaScript (lokální soubor)

🚀 Jak použít tento projekt

Krok 1: Zkopírujte složku

# Zkopírujte celou složku novyprojekt_bootstrap
# Přejmenujte na název vašeho projektu, např.:
- muj_novy_projekt/
- portfolio_stranky/
- eshop_projekt/

Krok 2: Upravte index.html

<!DOCTYPE html>
<html lang="cs">  <!-- změňte jazyk na cs -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Můj projekt</title>  <!-- změňte title -->
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
    <div class="container">
        <h1 class="display-1">Hello World with Bootstrap!</h1>
        <!-- Začněte psát váš kód zde -->
    </div>

    <script src="js/bootstrap.js"></script>
</body>
</html>

Krok 3: Začněte vyvíjet

Přidejte Bootstrap komponenty:

<!-- Navigace -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">Logo</a>
    </div>
</nav>

<!-- Grid -->
<div class="container">
    <div class="row">
        <div class="col-md-6">Sloupec 1</div>
        <div class="col-md-6">Sloupec 2</div>
    </div>
</div>

<!-- Tlačítka -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>

<!-- Karty -->
<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">Název karty</h5>
        <p class="card-text">Text karty</p>
        <a href="#" class="btn btn-primary">Tlačítko</a>
    </div>
</div>

💡 Užitečné Bootstrap třídy

Container a Grid:

<div class="container">          <!-- Fixní šířka, centrovaný -->
<div class="container-fluid">    <!-- 100% šířka -->

<div class="row">                 <!-- Řádek -->
<div class="col-md-6">            <!-- 50% na tabletu+ -->

Utility třídy:

<!-- Margin a Padding -->
m-3     = margin všude
mt-2    = margin-top
px-4    = padding vlevo a vpravo

<!-- Barvy -->
text-primary    = modrý text
bg-danger       = červené pozadí

<!-- Display -->
d-flex              = display: flex
d-none d-md-block   = skryto na mobilu, zobrazeno na tabletu+

Komponenty:

<!-- Buttons -->
<button class="btn btn-primary">Primary</button>

<!-- Alerts -->
<div class="alert alert-success">Success!</div>

<!-- Cards -->
<div class="card">...</div>

<!-- Modal -->
<button data-bs-toggle="modal" data-bs-target="#myModal">
    Open Modal
</button>

🔗 Bootstrap dokumentace

• Oficiální dokumentace: https://getbootstrap.com/docs/5.3/
• Bootstrap Icons: https://icons.getbootstrap.com/
• Bootstrap Examples: https://getbootstrap.com/docs/5.3/examples/

📚 Související lekce

Před použitím tohoto projektu se ujistěte, že jste prošli:

• 13_bootstrap_intro - úvod do Bootstrapu
• 14_bootstrap_layout - Bootstrap layout
• 15_bootstrap_components - Bootstrap komponenty

💡 Tip pro studenty

Kdy použít tento projekt:

• ✅ Nový Bootstrap projekt od nuly
• ✅ Prototypování webové stránky
• ✅ Cvičení Bootstrap komponent
• ✅ Školní projekty

Alternativa - CDN (online Bootstrap):

<!-- Místo lokálních souborů můžete použít CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Výhody lokálních souborů:

• Funguje offline
• Rychlejší (není potřeba stahovat z internetu)

Výhody CDN:

• Menší velikost projektu
• Možná už v cache prohlížeče

⚠️ Důležité poznámky

1. Bootstrap.js vyžaduje - carousel, modal, dropdown fungují jen s připojeným JS
2. Viewport meta tag je povinný - bez něj responzivita nebude fungovat
3. jQuery není potřeba - Bootstrap 5 už jQuery nepotřebuje

🎯 Další kroky

1. Prozkoumejte Bootstrap dokumentaci
2. Vyzkoušejte různé komponenty
3. Vytvořte vlastní projekt pomocí této šablony
4. Experimentujte s utility třídami

Hodně štěstí s vaším projektem! 🚀