Bootstrap — szybkie i spójne stylowanie interfejsu

Po co się tego uczymy?

Komponenty Angulara, które zaczniesz budować w kolejnych lekcjach, na start wyglądają bardzo surowo — zwykły, nieostylowany HTML. Ręczne pisanie CSS dla każdego przycisku, formularza i układu strony od zera zajęłoby mnóstwo czasu. Bootstrap to gotowy zestaw stylów, który rozwiązuje ten problem — pozwala uzyskać schludny, spójny wygląd, dodając tylko odpowiednie klasy do znaczników HTML.

Teoria

Czym jest Bootstrap? To najpopularniejsza na świecie biblioteka CSS (razem z minimalnym JavaScriptem) dostarczająca gotowe style dla typowych elementów interfejsu — przycisków, formularzy, tabel, układu strony — oraz system SIATKI (grid) do responsywnego rozmieszczania elementów (automatyczne dostosowanie do szerokości ekranu: telefon/tablet/komputer).

Instalacja w projekcie Angular. npm install bootstrap (poznane polecenie z lekcji 5), a następnie dodanie ścieżki do pliku CSS Bootstrapa w konfiguracji angular.json, w sekcji "styles": "node_modules/bootstrap/dist/css/bootstrap.min.css" — od tego momentu WSZYSTKIE klasy Bootstrapa są dostępne w KAŻDYM komponencie aplikacji, bez dodatkowych importów.

System siatki (grid). Bootstrap dzieli szerokość strony na 12 kolumn — klasa container tworzy wyśrodkowany kontener o ograniczonej szerokości, row tworzy wiersz, a klasy col/col-6/col-md-4 itd. określają, ile z 12 kolumn zajmuje dany element (i dla jakiej szerokości ekranu — md = tablet i większe). Dzięki temu układ automatycznie "składa się" w jedną kolumnę na małych ekranach.

Klasa Bootstrap	Zastosowanie
`container` / `container-fluid`	wyśrodkowany kontener o ograniczonej / pełnej szerokości
`row`, `col`, `col-6`, `col-md-4`	system siatki 12-kolumnowej, responsywny (różne zachowanie wg szerokości ekranu)
`btn`, `btn-primary`, `btn-danger`	stylowanie przycisków (kolor określa "primary"/"danger"/"success" itd.)
`form-control`	stylowanie pól formularza (`<input>`, `<select>`, `<textarea>`)
`card`, `card-body`, `card-title`	"karta" — ramka z cieniem, popularny sposób prezentacji pojedynczego elementu (np. produktu)
`navbar`, `nav`, `nav-link`	pasek nawigacyjny (menu górne)
`d-flex`, `justify-content-center`, `align-items-center`	klasy narzędziowe (utility) do szybkiego centrowania/rozmieszczania elementów przez Flexbox
`text-center`, `mt-3`, `mb-4`, `p-2`	klasy narzędziowe do wyrównania tekstu i odstępów (margin-top-3, padding-2 itd. — liczba to umowna jednostka odstępu Bootstrapa)

Filozofia "utility-first" Bootstrapa (przynajmniej częściowa) — zamiast pisać własny CSS z regułami typu margin-top: 16px;, dodajesz gotową klasę mt-3 bezpośrednio w HTML. To szybsze na start, choć w większych projektach czasem miesza się z pisaniem WŁASNYCH, dodatkowych stylów CSS dla elementów, których Bootstrap nie pokrywa.

Komponenty JavaScript Bootstrapa (np. rozwijane menu, modale/okna dialogowe, karuzele) wymagają dodatkowo zaimportowania pliku JS Bootstrapa — w Angularze zwykle owija się je we własny komponent albo korzysta z dedykowanej biblioteki ng-bootstrap, żeby uniknąć konfliktów między JavaScriptem Bootstrapa a mechanizmem renderowania Angulara.

Schemat

npm install bootstrap
        │
        ▼
angular.json → "styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css"]
        │
        ▼
Klasy Bootstrap dostępne w KAŻDYM komponencie:

<div class="container">              ← wyśrodkowany kontener
  <div class="row">                  ← wiersz siatki
    <div class="col-md-6">...</div>  ← kolumna: połowa szerokości od "md" wzwyż
    <div class="col-md-6">...</div>  ← druga połowa
  </div>
  <button class="btn btn-primary">Zapisz</button>   ← stylowany przycisk
</div>

Szeroki ekran (desktop):        Wąski ekran (telefon):
[ col-md-6 ][ col-md-6 ]        [ col-md-6 ]
                                 [ col-md-6 ]  (automatycznie jedna pod drugą)

Przykład z życia

Formularz logowania zbudowany z gołego HTML wygląda jak z lat 90. — pola bez ramek, przycisk bez stylu. Dodanie klas form-control do pól i btn btn-primary do przycisku, plus container/row/col do układu, zamienia go w kilka sekund w coś, co wygląda profesjonalnie — dokładnie tak, jak wyglądają formularze na niezliczonych prawdziwych stronach internetowych korzystających z Bootstrapa.

formularz-logowania.component.html

<!-- Przykład formularza ze stylowaniem Bootstrap -->
<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <div class="card">
        <div class="card-body">
          <h3 class="card-title text-center">Logowanie</h3>

          <div class="mb-3">
            <label class="form-label">E-mail</label>
            <input type="email" class="form-control" placeholder="jan@przyklad.pl" />
          </div>

          <div class="mb-3">
            <label class="form-label">Hasło</label>
            <input type="password" class="form-control" />
          </div>

          <button class="btn btn-primary w-100">Zaloguj się</button>
        </div>
      </div>
    </div>
  </div>
</div>

Komentarz i wyjaśnienie kodu

row justify-content-center centruje CAŁĄ kolumnę col-md-6 w poziomie — bez tego formularz rozciągnąłby się na całą dostępną szerokość ekranu, co wyglądałoby nienaturalnie na szerokich monitorach. col-md-6 oznacza "zajmij 6 z 12 kolumn (czyli połowę szerokości), ale TYLKO na ekranach szerokości "md" (tablet, ok. 768px) i większych — na telefonie ten sam element zajmie CAŁĄ dostępną szerokość (12 z 12 kolumn to domyślne zachowanie col-md-6 poniżej progu "md").

card + card-body + card-title to standardowy, trzypoziomowy wzorzec "karty" w Bootstrapie — card daje ramkę i cień, card-body dodaje wewnętrzny odstęp (padding), a card-title odpowiednio stylizuje nagłówek. mb-3 (margin-bottom, poziom 3) i w-100 (width: 100%) to przykłady klas narzędziowych — drobne, pojedyncze reguły CSS dostępne jako gotowe klasy.

Ćwiczenie samodzielne

Zainstaluj Bootstrap w projekcie Angular z lekcji 3 (npm install bootstrap + wpis w angular.json) i przebuduj (albo stwórz od nowa) prosty formularz, stosując klasy z tabeli w tej lekcji — porównaj wygląd PRZED i PO dodaniu klas Bootstrap.

Zadania do pracy własnej

Zbuduj prosty pasek nawigacyjny (navbar) z logo (tekstem) po lewej i trzema linkami po prawej, korzystając wyłącznie z gotowych klas Bootstrap (bez własnego CSS).
Zbuduj siatkę 3 "kart" produktów (obraz zastępczy, nazwa, cena, przycisk) obok siebie na szerokim ekranie, automatycznie układających się jedna pod drugą na wąskim ekranie telefonu — przetestuj to, zmieniając szerokość okna przeglądarki (albo Narzędzia deweloperskie → tryb responsywny).
Zbuduj kompletny layout strony z Bootstrapem: górny navbar, główna treść w container z siatką 2-kolumnową (np. treść artykułu + boczny panel "podobne artykuły"), i stopkę na dole strony — sprawdź poprawne responsywne zachowanie na trzech szerokościach ekranu (telefon/tablet/desktop) przez zmianę rozmiaru okna przeglądarki.

Typowe błędy

Zapomnienie o dodaniu ścieżki do CSS Bootstrapa w angular.json po instalacji przez npm — samo npm install bootstrap pobiera pliki, ale NIE włącza ich automatycznie do budowanej aplikacji; trzeba jawnie wskazać plik CSS w konfiguracji.

Mylenie klas Bootstrap z własnymi, potrzebnymi nazwami klas CSS — jeśli chcesz dodać WŁASNY styl (np. konkretny odcień koloru marki), rób to w OSOBNYM pliku .css komponentu, nie próbując "naginać" gotowych klas Bootstrapa do niestandardowych potrzeb.

Nadmierne komplikowanie prostego układu przez ręczne obliczanie liczby kolumn zamiast skorzystania z gotowych klas col (bez liczby) automatycznie dzielących dostępną szerokość po równo między wszystkie elementy w wierszu.

Nawiązanie do egzaminu zawodowego

To realizacja INF.04.7.2 (frameworki i biblioteki do budowy interfejsu aplikacji webowych) — Bootstrap, choć nie jest wymieniony wprost w liście z podstawy programowej jak Angular czy React, jest tak powszechnie z nimi łączony w praktyce zawodowej (i na żywym przykładzie tego kursu), że warto go znać jako standardowe narzędzie stylowania. Kolejne trzy lekcje przechodzą do sedna tego działu — samego frameworka Angular.