Podstawowy · lekcja 7
Bootstrap — szybkie i spójne stylowanie interfejsu
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 st...
Zacznij tutaj
Po co się tego uczymy?
Wprowadzenie
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.
Zobacz zależności
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ą)
Połącz z praktyką
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.