Malý repozitář pro WTL 3.I 2025/2026

skrabanek 22ec18730f add AI material navíc, README popisky všude		7 days ago
..
css	bs intro fix	2 months ago
js	bs intro fix	2 months ago
README.md	add AI material navíc, README popisky všude	7 days ago
bootstrap-5.3.8-dist.zip	bs intro fix	2 months ago
index.html	bs intro fix	2 months ago

README.md

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

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

🎯 Další kroky

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

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