Komponenty zaawansowane w Bootstrap 5

1. Wprowadzenie

Bootstrap 5 oferuje zaawansowane komponenty, które dodają interaktywność i funkcjonalność do strony: * Carousel – karuzela zdjęć * Accordion – składane sekcje (akordeon) * Collapse – zwijane elementy * Scrollspy – nawigacja reagująca na scroll * Pagination – paginacja * Placeholder – szkielety ładowania

Carousel to komponent do prezentacji treści w formie slajdów.

2.1. Podstawowa karuzela

Kluczowe elementy: * .carousel – główny kontener * .carousel-inner – kontener slajdów * .carousel-item – pojedynczy slajd (pierwszy musi mieć .active) * .carousel-indicators – kropki/wskaźniki * .carousel-caption – podpis slajdu * .carousel-control-prev/next – przyciski nawigacji

2.2. Karuzela z fade (efekt płynnego przejścia)

2.3. Karuzela z ciemnym wariantem

2.4. Karuzela bez autoplay

2.5. Kontrola interwału

3. Accordion (Akordeon)

Accordion pozwala na składanie i rozwijanie sekcji treści.

3.1. Podstawowy accordion

Kluczowe elementy: * .accordion – główny kontener * .accordion-item – pojedyncza sekcja * .accordion-header – nagłówek sekcji * .accordion-button – przycisk rozwijający * .accordion-collapse – zawartość do zwinięcia * data-bs-parent – zapewnia, że tylko jedna sekcja jest rozwinięta jednocześnie

3.2. Accordion bez automatycznego zamykania

3.3. Flush accordion (bez obramowania)

4. Collapse (Zwijanie)

Collapse pozwala ukrywać i pokazywać elementy.

4.1. Podstawowy collapse

4.2. Wiele przycisków dla jednego collapse

4.3. Collapse poziomy (horizontal)

5. Scrollspy (Nawigacja śledzenia przewijania)

Scrollspy automatycznie aktualizuje nawigację w zależności od pozycji przewijania.

6. Pagination (Paginacja)

Pagination służy do nawigacji między stronami wyników.

6.1. Podstawowa paginacja

6.2. Pagination z ikonami

6.3. Rozmiary paginacji

6.4. Disabled i active states

7. Placeholder (Szkielety ładowania)

Placeholders to "szkielety" używane podczas ładowania treści.

7.1. Podstawowy placeholder

7.2. Animacje placeholder

7.3. Rozmiary placeholder

7.4. Kolorowe placeholders

8. Praktyczny przykład: Dashboard z zaawansowanymi komponentami

9. Podsumowanie

Bootstrap 5 oferuje zaawansowane komponenty do budowy interaktywnych stron:

  • Carousel – karuzela zdjęć z automatycznym przełączaniem
  • Accordion – składane sekcje treści
  • Collapse – zwijane elementy
  • Scrollspy – nawigacja reagująca na scroll
  • Pagination – nawigacja między stronami
  • Placeholder – szkielety ładowania treści

Kluczowe punkty:

  • Carousel świetnie sprawdza się do prezentacji zdjęć
  • Accordion idealny do FAQ i długich treści
  • Collapse pozwala oszczędzać miejsce na stronie
  • Placeholders poprawiają UX podczas ładowania

Co dalej:

  • Utility classes
  • Customizacja i theming
  • JavaScript API
Wróć do spisu lekcji