Responsywność i breakpointy w Bootstrap 5

1. Wprowadzenie

Responsywność to zdolność strony do dostosowania się do różnych rozmiarów ekranu – od smartfonów po duże monitory. Bootstrap 5 jest zbudowany z myślą o mobile-first, co oznacza, że projekt zaczyna się od małych ekranów, a potem jest rozszerzany na większe.

Kluczowe koncepty:

  • Breakpointy – punkty przełamywania, gdzie layout się zmienia
  • Mobile-first – projektowanie od najmniejszych ekranów
  • Flexbox & Grid – elastyczne układy
  • Media queries – warunki CSS dla różnych rozdzielczości

2. Breakpointy w Bootstrap 5

Bootstrap definiuje 6 breakpointów:

Breakpoint Prefix Szerokość ekranu Urządzenia
X-Small (brak) < 576px Telefony portret
Small sm ≥ 576px Telefony landscape
Medium md ≥ 768px Tablety
Large lg ≥ 992px Laptopy
Extra Large xl ≥ 1200px Desktopy
Extra Extra Large xxl ≥ 1400px Duże desktopy

3. System gridów i responsywność

3.1. Mobile-first approach

Klasy bez prefiksu odnoszą się do najmniejszych ekranów i są dziedziczone w górę:

3.2. Responsywne kolumny – przykłady

3.3. Praktyczny przykład: Galeria zdjęć

4. Responsywne utility classes

4.1. Display (widoczność)

4.2. Responsywne marginesy i paddingi

4.3. Responsywny tekst

5. Responsywne komponenty

5.1. Navbar responsywny

Breakpointy navbar:

  • navbar-expand – zawsze rozwinięte
  • navbar-expand-sm – hamburger poniżej 576px
  • navbar-expand-md – hamburger poniżej 768px
  • navbar-expand-lg – hamburger poniżej 992px (najczęściej używane)
  • navbar-expand-xl – hamburger poniżej 1200px
  • navbar-expand-xxl – hamburger poniżej 1400px

5.2. Karty responsywne

5.3. Tabele responsywne

6. Flexbox i responsywność

6.1. Responsywne kierunki flex

6.2. Responsywne justify-content

6.3. Responsywne align-items

7. Responsywne obrazy

7.1. Fluid images (dopasowane do szerokości)

.img-fluid odpowiada:

7.2. Różne obrazy dla różnych ekranów

8. Kontener responsywny

8.1. Container z breakpointami

9. Praktyczny przykład: Landing page responsywny

10. Testowanie responsywności

10.1. Narzędzia deweloperskie przeglądarki

  1. Otwórz DevTools (F12 lub Ctrl+Shift+I)
  2. Kliknij ikonę urządzenia mobilnego (Ctrl+Shift+M)
  3. Wybierz różne rozdzielczości

10.2. Popularne rozdzielczości do testowania

Urządzenie Rozdzielczość
iPhone SE 375 × 667
iPhone 12/13 Pro 390 × 844
iPhone 14 Pro Max 430 × 932
iPad 768 × 1024
iPad Pro 1024 × 1366
Desktop HD 1920 × 1080

11. Najlepsze praktyki responsywności

11.1. Mobile-first

Zawsze zacznij od projektowania dla małych ekranów:

11.2. Testuj na prawdziwych urządzeniach

Symulatory to tylko początek – testuj na fizycznych telefonach i tabletach.

11.3. Meta viewport

Zawsze dodawaj tag viewport:

11.4. Optymalizuj obrazy

Używaj odpowiednich rozmiarów obrazów dla różnych ekranów.

12. Podsumowanie

Responsywność w Bootstrap 5 to fundament nowoczesnego web designu:

Kluczowe elementy:

  • Breakpointy – 6 poziomów (xs, sm, md, lg, xl, xxl)
  • Mobile-first – projektowanie od najmniejszych ekranów
  • Grid system – responsywne kolumny (col-12, col-md-6, itp.)
  • Utility classes – responsywne marginesy, display, tekst
  • Flexbox – elastyczne układy

Breakpointy:

  • sm ≥ 576px
  • md ≥ 768px
  • lg ≥ 992px
  • xl ≥ 1200px
  • xxl ≥ 1400px

Co dalej:

  • Najlepsze praktyki
  • Performance i optymalizacja
  • Integracja z frameworkami
Wróć do spisu lekcji