Modalne okna, Toasts i Offcanvas w Bootstrap 5

1. Wprowadzenie

Bootstrap 5 oferuje kilka komponentów do wyświetlania treści w sposób interaktywny: * Modals – okna modalne (popupy) * Toasts – powiadomienia toast * Offcanvas – wysuwane panele boczne (nowość w Bootstrap 5) * Popovers – małe dymki informacyjne * Tooltips – podpowiedzi przy najechaniu

2. Modals (Okna modalne)

Modal to okno, które pojawia się na wierzchu strony i blokuje interakcję z resztą zawartości.

2.1. Podstawowy modal

Kluczowe elementy: * data-bs-toggle="modal" – włącza funkcjonalność modala * data-bs-target="#myModal" – wskazuje ID modala do otwarcia * .modal-header – nagłówek z tytułem i przyciskiem zamknięcia * .modal-body – główna treść * .modal-footer – stopka z przyciskami akcji

2.2. Rozmiary modali

Bootstrap oferuje różne rozmiary modali:

2.3. Wyśrodkowany modal

2.4. Modal z scrollowaniem

Gdy treść jest długa, możesz dodać scroll:

2.5. Modal z formularzem

2.6. Sterowanie modalem przez JavaScript

3. Toasts (Powiadomienia)

Toasts to lekkie, nienachalne powiadomienia, które pojawiają się zazwyczaj w rogu ekranu.

3.1. Podstawowy toast

3.2. Kolorowe toasts

3.3. Pozycjonowanie toastów

3.4. Stos toastów (stacking)

4. Offcanvas (Wysuwane panele)

Offcanvas to nowy komponent w Bootstrap 5 – wysuwane panele boczne (lub górne/dolne).

4.1. Podstawowy offcanvas

4.2. Kierunki offcanvas

4.3. Offcanvas jako menu nawigacyjne

4.4. Offcanvas z backdrop

5. Tooltips (Podpowiedzi)

Tooltips to małe dymki pojawiające się przy najechaniu na element.

5.1. Podstawowy tooltip

5.2. Pozycje tooltipa

5.3. HTML w tooltipie

6. Popovers (Dymki)

Popovers to większe od tooltipów dymki informacyjne z tytułem i treścią.

6.1. Podstawowy popover

6.2. Pozycje popovera

6.3. Popover z HTML

6.4. Dismiss na następne kliknięcie

7. Praktyczny przykład: Kompletna aplikacja

8. Podsumowanie

Bootstrap 5 oferuje bogate komponenty interaktywne:

  • Modals – okna modalne do wyświetlania ważnych treści
  • Toasts – lekkie powiadomienia w rogu ekranu
  • Offcanvas – wysuwane panele boczne (nowość w BS5)
  • Tooltips – małe podpowiedzi przy hover
  • Popovers – większe dymki informacyjne

Kluczowe punkty:

  • Tooltips i popovers wymagają inicjalizacji JS
  • Modals blokują interakcję z resztą strony
  • Offcanvas świetnie sprawdza się jako menu mobilne
  • Toasts są idealne do powiadomień o akcjach

Co dalej:

  • Zaawansowane komponenty (carousel, collapse, accordion)
  • Utility classes
  • Customizacja i theming
Wróć do spisu lekcji