Ćwiczenie: Podstawy Bootstrap

🎯 Cel ćwiczenia

Bootstrap to najpopularniejszy framework CSS, który przyspiesza tworzenie responsywnych i profesjonalnie wyglądających stron internetowych. Zawiera gotowe komponenty, system siatki (grid) oraz narzędzia użytkowe.

Czego się nauczysz:

Instalacji i konfiguracji Bootstrap
Używania systemu siatki (Grid System)
Tworzenia responsywnych layoutów
Wykorzystywania gotowych komponentów
Stosowania klas użytkowych (utility classes)

🚀 Część 1: Instalacja Bootstrap

Metoda 1: CDN (najprostsza)

Dodaj następujące linki w sekcji <head> swojego dokumentu HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moja strona Bootstrap</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
          rel="stylesheet">
</head>
<body>

    <h1>Hello Bootstrap!</h1>

    <!-- Bootstrap JS (na końcu body) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
    </script>
</body>
</html>
            

Ważne! Meta tag viewport jest konieczny dla responsywności. Bez niego strona nie będzie się poprawnie skalować na urządzeniach mobilnych.

📐 Część 2: System Siatki (Grid System)

Bootstrap używa systemu 12 kolumn, który automatycznie dostosowuje się do rozmiaru ekranu.

Breakpointy (punkty przełamania)

Breakpoint	Klasa	Szerokość ekranu	Przykład urządzenia
Extra small	`.col-`	< 576px	Telefony pionowo
Small	`.col-sm-`	≥ 576px	Telefony poziomo
Medium	`.col-md-`	≥ 768px	Tablety
Large	`.col-lg-`	≥ 992px	Laptopy
Extra large	`.col-xl-`	≥ 1200px	Desktopy

Przykład 1: Podstawowy układ 3 kolumn

<div class="container">
    <div class="row">
        <div class="col-4">
            Kolumna 1 (4/12)
        </div>
        <div class="col-4">
            Kolumna 2 (4/12)
        </div>
        <div class="col-4">
            Kolumna 3 (4/12)
        </div>
    </div>
</div>
                

Wyjaśnienie: Każda kolumna zajmuje 4 jednostki z 12 dostępnych (4+4+4=12). Razem wypełniają cały wiersz.

Przykład 2: Responsywny układ

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4">
            Na telefonie: 100% szerokości
            Na tablecie: 50% szerokości
            Na desktopie: 33.33% szerokości
        </div>
        <div class="col-12 col-md-6 col-lg-4">
            Kolumna 2
        </div>
        <div class="col-12 col-md-6 col-lg-4">
            Kolumna 3
        </div>
    </div>
</div>
                

Wyjaśnienie: Kolumny zmieniają szerokość w zależności od rozmiaru ekranu. Na małych ekranach każda zajmuje całą szerokość, na średnich po 50%, a na dużych po 33%.

🎯 Część 3: Komponenty Bootstrap

Przyciski

Przykład 3: Różne style przycisków

<!-- Podstawowe style -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>

<!-- Przyciski z obramowaniem -->
<button class="btn btn-outline-primary">Outline</button>

<!-- Różne rozmiary -->
<button class="btn btn-primary btn-lg">Duży</button>
<button class="btn btn-primary">Normalny</button>
<button class="btn btn-primary btn-sm">Mały</button>
                

Nawigacja (Navbar)

Przykład 4: Responsywne menu nawigacyjne

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Moja Strona</a>
        
        <!-- Przycisk hamburgera (na małych ekranach) -->
        <button class="navbar-toggler" type="button" 
                data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <!-- Linki menu -->
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">O nas</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Kontakt</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
                

Karty (Cards)

Przykład 5: Karta z obrazem

<div class="card" style="width: 18rem;">
    <img src="obrazek.jpg" class="card-img-top" alt="Opis">
    <div class="card-body">
        <h5 class="card-title">Tytuł karty</h5>
        <p class="card-text">
            Krótki opis treści karty. Bootstrap cards są bardzo
            elastyczne i łatwe w użyciu.
        </p>
        <a href="#" class="btn btn-primary">Więcej</a>
    </div>
</div>
                

🛠️ Część 4: Klasy Użytkowe (Utilities)

Marginesy i paddingi

<!-- Format: {property}{sides}-{size} -->

<!-- Marginesy (m) -->
<div class="m-3">Margines ze wszystkich stron</div>
<div class="mt-5">Margines tylko górny (top)</div>
<div class="mb-2">Margines tylko dolny (bottom)</div>
<div class="mx-auto">Automatyczne marginesy lewo-prawo (wyśrodkowanie)</div>

<!-- Paddingi (p) -->
<div class="p-4">Padding ze wszystkich stron</div>
<div class="px-3">Padding lewo-prawo</div>
<div class="py-2">Padding góra-dół</div>
            

Rozmiary: 0, 1, 2, 3, 4, 5 (gdzie 0 = 0, 1 = 0.25rem, 2 = 0.5rem, 3 = 1rem, 4 = 1.5rem, 5 = 3rem)

Kolory tekstu i tła

<!-- Kolory tekstu -->
<p class="text-primary">Niebieski tekst</p>
<p class="text-success">Zielony tekst</p>
<p class="text-danger">Czerwony tekst</p>
<p class="text-muted">Wyszarzony tekst</p>

<!-- Kolory tła -->
<div class="bg-primary text-white">Niebieskie tło</div>
<div class="bg-success text-white">Zielone tło</div>
<div class="bg-light">Jasne tło</div>
            

Display i Visibility

<!-- Ukrywanie elementów na różnych ekranach -->
<div class="d-none d-md-block">
    Widoczne tylko na tablecie i większych ekranach
</div>

<div class="d-block d-md-none">
    Widoczne tylko na telefonach
</div>

<!-- Flexbox -->
<div class="d-flex justify-content-center align-items-center">
    Wyśrodkowany content
</div>
            

✏️ ZADANIA PRAKTYCZNE

Zadanie 1: Portfolio - Landing Page

ŁATWY

Cel: Stwórz prostą stronę portfolio z sekcją hero, o mnie i portfolio.

Wymagania:

Navbar z linkami do sekcji
Sekcja Hero z dużym tytułem i przyciskiem
Sekcja "O mnie" z tekstem i zdjęciem obok (układ 2 kolumn na desktop)
Sekcja Portfolio z 3 kartami w rzędzie
Stopka z danymi kontaktowymi
Strona musi być responsywna (karty układają się w kolumnę na telefonie)

Wskazówka: Użyj container, row i col-* dla layoutu.

Zadanie 2: Formularz Kontaktowy

ŚREDNI

Cel: Stwórz stylowy formularz kontaktowy z walidacją Bootstrap.

Wymagania:

Formularz w karcie (card)
Pola: Imię, Email, Temat, Wiadomość
Użyj klas form-control dla inputów
Dodaj form-label dla etykiet
Przycisk submit w stylu primary
Formularz wyśrodkowany na stronie
Responsywność: pełna szerokość na telefonie, max 600px na desktop

Wskazówka: Użyj mx-auto do wyśrodkowania.

Zadanie 3: Galeria Zdjęć

ŚREDNI

Cel: Stwórz responsywną galerię zdjęć z modalnymi okienkami.

Wymagania:

Grid 4 kolumn na desktop, 2 na tablecie, 1 na telefonie
Każde zdjęcie w karcie z krótkim opisem
Po kliknięciu zdjęcie otwiera się w Bootstrap Modal
Modal z przyciskiem zamykania
Efekt hover na kartach (np. shadow)
Nagłówek sekcji ze stylowanym tytułem

Wskazówka: Dokumentacja modali: data-bs-toggle="modal"

Zadanie 4: Dashboard Administracyjny

TRUDNY

Cel: Stwórz dashboard z sidebar, kartami statystyk i tabelą.

Wymagania:

Górny navbar z logo i przyciskiem menu
Boczny sidebar z nawigacją (collapsible na mobile)
4 karty statystyk z ikonami i liczbami (2x2 grid)
Tabela z danymi użytkowników (użyj table klas Bootstrap)
Tabela responsywna (przewijalna na małych ekranach)
Przyciski akcji w tabeli (edytuj/usuń)
Użyj odpowiednich kolorów dla różnych typów danych

Wskazówka: Użyj Flexbox dla układu sidebar + content.

Zadanie 5: Blog Layout

TRUDNY

Cel: Stwórz layout strony blogowej z artykułami i sidebatem.

Wymagania:

Navbar z logo i menu
Layout 2 kolumn: content (8 kol) + sidebar (4 kol)
W content: 3 karty artykułów z obrazkiem, tytułem, opisem i datą
W sidebar: sekcja "Popularne posty" i "Kategorie"
Pagination pod artykułami
Na telefonie sidebar pod artykułami
Breadcrumb nawigacja nad artykułami

Wskazówka: Użyj col-lg-8 i col-lg-4 dla układu.

💡 WSKAZÓWKI I NAJLEPSZE PRAKTYKI

1. Mobile First

Bootstrap jest zaprojektowany z myślą o podejściu "mobile first". Zacznij od projektowania dla małych ekranów, a następnie dodawaj style dla większych.

<!-- Dobrze: Mobile first -->
<div class="col-12 col-md-6 col-lg-4"></div>

<!-- Źle: Desktop first -->
<div class="col-lg-4 col-md-6 col-12"></div>
                

2. Nie nadużywaj !important

Bootstrap używa specyficzności CSS. Zamiast nadpisywać style z !important, używaj własnych klas lub zwiększ specyficzność selektora.

3. Używaj zmiennych CSS Bootstrap

Możesz dostosować kolory i inne wartości Bootstrap używając zmiennych CSS:

:root {
  --bs-primary: #6a11cb;
  --bs-secondary: #2575fc;
  --bs-border-radius: 0.5rem;
}
                

4. Container vs Container-Fluid

.container - stała szerokość, wyśrodkowany, z marginami
.container-fluid - pełna szerokość ekranu (100%)
.container-{breakpoint} - pełna szerokość do określonego breakpointu

Częste błędy do uniknięcia:

❌ Zagnieżdżanie .container w .container
❌ Używanie .row bez .container
❌ Umieszczanie treści bezpośrednio w .row (zawsze używaj .col-*)
❌ Mieszanie różnych wersji Bootstrap w jednym projekcie
❌ Modyfikowanie plików Bootstrap bezpośrednio

🔧 Część 5: Przykład Kompletnej Strony

Pełny przykład - Strona produktu

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sklep - Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
          rel="stylesheet">
</head>
<body>

    <!-- Nawigacja -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="#">Mój Sklep</a>
            <button class="navbar-toggler" type="button" 
                    data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Produkty</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Kontakt</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="bg-light py-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <h1 class="display-4 fw-bold">Najlepsze produkty</h1>
                    <p class="lead">Odkryj naszą kolekcję wysokiej jakości produktów</p>
                    <button class="btn btn-primary btn-lg">Zobacz więcej</button>
                </div>
                <div class="col-lg-6">
                    <img src="hero.jpg" class="img-fluid rounded" alt="Hero">
                </div>
            </div>
        </div>
    </section>

    <!-- Produkty -->
    <section class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">Nasze Produkty</h2>
            <div class="row g-4">
                <!-- Produkt 1 -->
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="card h-100 shadow-sm">
                        <img src="product1.jpg" class="card-img-top" alt="Produkt 1">
                        <div class="card-body">
                            <h5 class="card-title">Produkt 1</h5>
                            <p class="card-text">Opis produktu...</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="h5 mb-0">99.99 PLN</span>
                                <button class="btn btn-primary">Kup</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Powtórz dla innych produktów -->
            </div>
        </div>
    </section>

    <!-- Stopka -->
    <footer class="bg-dark text-white py-4">
        <div class="container text-center">
            <p class="mb-0">© 2025 Mój Sklep. Wszelkie prawa zastrzeżone.</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
    </script>
</body>
</html>
                

📚 Cheat Sheet - Najważniejsze Klasy

Layout

.container - kontener o stałej szerokości
.container-fluid - kontener na 100% szerokości
.row - wiersz dla kolumn
.col-* - kolumna (1-12)
.col-{breakpoint}-* - responsywna kolumna

Spacing

.m-{0-5} - margin
.p-{0-5} - padding
.mt-*, .mb-*, .ms-*, .me-* - marginesy kierunkowe
.mx-auto - wyśrodkowanie poziome

Tekst

.text-start, .text-center, .text-end - wyrównanie
.text-primary, .text-success, .text-danger - kolory
.fw-bold, .fw-normal, .fw-light - grubość
.fs-1 do .fs-6 - rozmiar czcionki

Display

.d-none, .d-block, .d-flex - typy wyświetlania
.d-{breakpoint}-{value} - responsywne ukrywanie
.d-flex + .justify-content-* - flexbox

📚 DODATKOWE ZASOBY

🎓 Test Wiedzy

Pytania kontrolne - sprawdź swoją wiedzę!

Ile kolumn ma system siatki Bootstrap? (Odp: 12)
Jaki jest największy breakpoint w Bootstrap 5? (Odp: xxl - 1400px)
Która klasa służy do wyśrodkowania elementu poziomo? (Odp: mx-auto)
Jak nazywa się podejście, które Bootstrap stosuje domyślnie? (Odp: Mobile First)
Jaka klasa sprawia, że kontener zajmuje 100% szerokości? (Odp: container-fluid)
Która klasa ukrywa element na małych ekranach? (Odp: d-none d-md-block)
Jak dodać margines górny o wartości 3? (Odp: mt-3)
Która klasa tworzy przycisk w stylu primary? (Odp: btn btn-primary)

⚡ Zadania Dodatkowe (Dla Chętnych)

Wyzwanie 1: Strona E-commerce

Stwórz pełną stronę sklepu internetowego z:

Navbar z koszykiem (badge z liczbą produktów)
Filtry boczne (kategorie, cena)
Siatka produktów z paginacją
Modal ze szczegółami produktu
Formularz newsletter w stopce

Wyzwanie 2: Landing Page SaaS

Zaprojektuj nowoczesny landing page dla aplikacji SaaS:

Navbar transparentny na hero, stały przy scrollu
Hero z animowanym tekstem i CTA buttons
Sekcja Features z ikonami (grid 3 kolumn)
Sekcja Pricing z 3 planami (cards)
Sekcja Testimonials (carousel)
FAQ (accordion)
Stopka z social media icons

🎉 PODSUMOWANIE

Gratulacje! Po ukończeniu tego ćwiczenia powinieneś umieć:

✅ Instalować i konfigurować Bootstrap
✅ Używać systemu siatki do tworzenia responsywnych layoutów
✅ Stosować gotowe komponenty Bootstrap
✅ Wykorzystywać klasy użytkowe do szybkiego stylowania
✅ Tworzyć profesjonalnie wyglądające strony internetowe
✅ Budować responsywne interfejsy Mobile First

Następny krok: Eksperymentuj z różnymi komponentami, łącz Bootstrap z własnymi stylami CSS i twórz unikalne projekty!

Powodzenia w nauce Bootstrap! 🚀

💼 Porady zawodowe

Bootstrap jest wykorzystywany przez miliony stron na całym świecie
Znajomość Bootstrap znacznie przyspiesza proces tworzenia stron
Wiele firm szuka programistów znających Bootstrap
Bootstrap to świetna baza do nauki responsywnego designu
Po opanowaniu Bootstrap, będzie Ci łatwiej nauczyć się innych frameworków (Tailwind, Foundation)