Bootstrap w projekcie

Czego się dziś nauczysz

Przygotowanie: lekcje 01–02 — masz działający projekt i wiesz, który plik za co odpowiada. Przewidywany czas: 45 min z zadaniami.

Po co nam gotowy CSS

Możesz napisać własny CSS do każdego ekranu w tym kursie. Tylko że wtedy połowa czasu zajęć zejdzie na obramowania i odstępy, a nie na Angulara.

Bootstrap daje gotowe klasy CSS: btn robi z przycisku przycisk, card rysuje kartę. Dopisujesz je do zwykłego HTML-a i wszystko wygląda spójnie. W dalszych lekcjach będziesz te klasy włączać i wyłączać z kodu — i wtedy zrobi się ciekawie.

Jak biblioteka trafia do projektu

npm install pobiera

Polecenie npm install bootstrap pobiera pliki do folderu node_modules i dopisuje jedną linijkę w package.json. Dzięki tej linijce kolega, który dostanie Twój projekt bez node_modules, odtworzy wszystko jednym poleceniem npm install.

angular.json podłącza

Samo pobranie nic nie zmienia. Angular musi wiedzieć, że ma dołączyć plik CSS do strony. Mówisz mu to, dopisując ścieżkę w tablicy "styles" w pliku angular.json. Kompilator skleja wszystkie pliki z tej tablicy w jeden arkusz i podłącza go do strony.

Dlaczego nie w stylach komponentu

Style komponentu są izolowane — CSS wpisany w jednym komponencie nie działa w innych. To dobra cecha, ale oznacza, że Bootstrap podłączony w jednym komponencie obowiązywałby tylko tam. My chcemy go wszędzie.

Klasy, których używamy w kursie

Bootstrap ma setki klas. Do całego kursu wystarczy kilkanaście — reszta jest w dokumentacji, gdy będzie potrzebna. Klasy się uzupełniają: btn nadaje kształt, btn-primary kolor, btn-sm rozmiar — piszesz je razem, oddzielone spacją.

Zainstaluj i podłącz Bootstrapa

Zatrzymaj serwer i wpisz polecenie w terminalu otwartym w folderze projektu.

npm install bootstrap

W angular.json znajdź tablicę "styles" (jest w sekcji "build" → "options") i dopisz ścieżkę przed src/styles.css:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

Uruchom serwer ponownie: npm start.

package.json:  "bootstrap": "^5.3.8"   (w sekcji "dependencies")
przeglądarka:  czcionka zmienia się na bezszeryfową, znikają domyślne marginesy

Zmiana czcionki to znak, że Bootstrap działa. Pliki z tablicy "styles" są dołączane w kolejności zapisu — dlatego Twój styles.css stoi drugi i może nadpisać styl Bootstrapa.

Przyciski

Bootstrap to zestaw klas CSS. Nie dodajesz żadnego kodu TypeScript — tylko klasy w HTML. Wklej przykład do app.html w miejsce dotychczasowej treści.

<div class="p-3">
  <button class="btn btn-primary me-2">Zapisz się</button>
  <button class="btn btn-outline-secondary me-2">Anuluj</button>
  <button class="btn btn-danger btn-sm">Usuń</button>
</div>

[ Zapisz się ]  (niebieski, wypełniony)
[ Anuluj ]      (szare obramowanie)
[ Usuń ]        (czerwony, mniejszy)

Trzy przyciski różnią się kolorem, wypełnieniem i rozmiarem, choć w kodzie różnią się tylko klasami. p-3 dodaje odstęp wokół całej grupy, me-2 — odstęp z prawej strony przycisku.

Karta wydarzenia

Karta to najczęściej używany element w tym kursie. Zapamiętaj jej budowę — wróci w wielu lekcjach.

<div class="card m-3" style="width: 20rem">
  <div class="card-body">
    <h5 class="card-title">Turniej retro</h5>
    <p class="card-text">Piątek, sala 12. Zostały ostatnie miejsca.</p>
    <span class="badge text-bg-warning me-2">2 miejsca</span>
    <button class="btn btn-primary btn-sm">Zapisz się</button>
  </div>
</div>

┌──────────────────────────────┐
│ Turniej retro                │
│ Piątek, sala 12. Zostały     │
│ ostatnie miejsca.            │
│ [2 miejsca] [Zapisz się]     │
└──────────────────────────────┘

Ramkę i zaokrąglone rogi daje card, odstęp od krawędzi — card-body. Odznaka text-bg-warning jest żółta z ciemnym tekstem; zmień ją na text-bg-success i zobacz zieloną. style="width: 20rem" to zwykły styl HTML — ogranicza szerokość karty, która inaczej zajęłaby całą stronę.

Trzy karty w siatce

Siatka Bootstrapa dzieli szerokość na 12 kolumn. Element z klasą col-md-4 zajmuje 4 z 12, więc w rzędzie mieszczą się trzy takie.

<div class="container mt-3">
  <h1 class="mb-3">Klub gier</h1>
  <div class="row g-3">
    <div class="col-12 col-md-4">
      <div class="card p-3">Turniej retro</div>
    </div>
    <div class="col-12 col-md-4">
      <div class="card p-3">Noc robotów</div>
    </div>
    <div class="col-12 col-md-4">
      <div class="card p-3">Warsztat druku 3D</div>
    </div>
  </div>
</div>

szeroki ekran:  [Turniej retro] [Noc robotów] [Warsztat druku 3D]
wąski ekran:    [Turniej retro]
                [Noc robotów]
                [Warsztat druku 3D]

Zwęź okno przeglądarki — karty ułożą się jedna pod drugą. To zasługa pary klas: col-12 (na małym ekranie cała szerokość) i col-md-4 (od średniej szerokości w górę — jedna trzecia). Hierarchia jest zawsze ta sama: container → row → col-* → treść.

Zestawienie elementów

Zanim utkniesz

Zadania

Co trzeba zapamiętać

• Bibliotekę pobiera npm install, a podłącza wpis w tablicy "styles" w angular.json.
• Po zmianie angular.json trzeba zrestartować serwer.
• Bootstrapa nie podłącza się w stylach komponentu, bo te działają tylko w jednym komponencie.
• W kursie używamy tylko CSS Bootstrapa; to, co reaguje na kliknięcia, robi Angular.
• btn nadaje kształt, btn-primary kolor — klasy się uzupełniają i oddziela się je spacją.
• Karta to card z card-body w środku.
• Siatka to container → row → col-*; rząd ma 12 kolumn.
• Odstępy: p-* wewnątrz, m-* na zewnątrz, liczby 0–5.

Sprawdź się: dlaczego po instalacji Bootstrapa trzeba uruchomić serwer ponownie, a po zmianie app.html już nie?

Dokumentacja: getbootstrap.com — Bootstrap 5.3.