Bootstrap i JavaScript

1. Wprowadzenie

Bootstrap 5 oferuje bogaty zestaw funkcjonalności JavaScript do tworzenia interaktywnych komponentów. W przeciwieństwie do Bootstrap 4, wersja 5 nie wymaga jQuery – wszystkie funkcje są napisane w czystym JavaScript (vanilla JS).

Główne funkcje:

  • Programowe sterowanie komponentami
  • API dla każdego komponentu
  • Eventy (zdarzenia) Bootstrap
  • Integracja z frameworkami (React, Vue, Angular)

2. Dołączanie Bootstrap JavaScript

2.1. Przez CDN

2.2. Przez NPM

3. Podstawy API Bootstrap

Każdy komponent ma swoje API do programowego sterowania.

3.1. Tworzenie instancji komponentu

3.2. Pobieranie istniejącej instancji

4. Modal (Okno modalne)

4.1. Podstawowe sterowanie

4.2. Opcje modala

4.3. Metody modala

4.4. Eventy modala

5. Toast (Powiadomienia)

5.1. Programowe wyświetlanie

5.2. Dynamiczne tworzenie toastów

6. Tooltip (Podpowiedzi)

6.1. Inicjalizacja tooltipów

Tooltips wymagają manualnej inicjalizacji:

6.2. Programowe sterowanie

7. Popover (Dymki)

7.1. Inicjalizacja popoverów

7.2. Dismissible popover

8. Collapse (Zwijanie)

8.1. Programowe sterowanie

8.2. Metody collapse

8.3. Eventy collapse

9.1. Programowe sterowanie

10. Offcanvas (Panel boczny)

10.1. Programowe sterowanie

11. Dropdown (Lista rozwijana)

11.1. Programowe sterowanie

12. Walidacja formularzy

12.1. Walidacja HTML5 z Bootstrap

13. Praktyczny przykład: System notyfikacji

14. Podsumowanie

Bootstrap 5 oferuje potężne API JavaScript:

Główne komponenty:

  • Modal – okna modalne z pełną kontrolą
  • Toast – lekkie powiadomienia
  • Tooltip/Popover – podpowiedzi i dymki
  • Collapse – zwijane elementy
  • Carousel – karuzela z API
  • Offcanvas – panele boczne
  • Dropdown – listy rozwijane

Kluczowe koncepty:

  • Brak zależności od jQuery
  • Czysty JavaScript (vanilla JS)
  • API dla każdego komponentu
  • Eventy Bootstrap
  • Opcje konfiguracji

Co dalej:

  • Responsywność i breakpointy
  • Integracja z frameworkami (React, Vue)
  • Najlepsze praktyki
Wróć do spisu lekcji