Komponenty podstawowe w Bootstrap 5

1. Wprowadzenie do komponentów

Bootstrap oferuje dziesiątki gotowych komponentów UI (User Interface), które można od razu użyć w projekcie. Komponenty są w pełni responsywne i dostosowują się do różnych rozmiarów ekranu.

W tej lekcji poznasz najważniejsze podstawowe komponenty: * Przyciski * Karty * Alerty * Badges * Breadcrumbs * List groups

2. Przyciski (Buttons)

2.1. Podstawowe style

Bootstrap oferuje 9 predefiniowanych stylów przycisków:

2.2. Outline buttons (kontury)

2.3. Rozmiary przycisków

2.4. Blokowe przyciski (pełna szerokość)

2.5. Stany przycisków

2.6. Grupy przycisków

3. Karty (Cards)

Karty to uniwersalne kontenery na treść.

3.1. Podstawowa karta

3.2. Karta z obrazkiem

3.3. Karta z headerem i footerem

3.4. Kolorowe karty

3.5. Układy kart (Card Layouts)

Grupa kart:

Grid kart:

4. Alerty (Alerts)

Alerty służą do wyświetlania komunikatów użytkownikowi.

4.1. Podstawowe alerty

4.2. Alert z dodatkową treścią

4.3. Alert z przyciskiem zamknięcia

4.4. Alert z linkiem

5. Badges (Plakietki)

Badges to małe etykiety używane do oznaczania liczników, statusów, itp.

5.1. Podstawowe badges

5.2. Kolorowe badges

5.3. Pill badges (zaokrąglone)

5.4. Badges w przyciskach

6. Breadcrumbs (Ścieżka nawigacyjna)

Breadcrumbs pokazują użytkownikowi, gdzie się znajduje w hierarchii strony.

Custom separator (własny separator)

7. List Groups (Grupy list)

List groups to elastyczne komponenty do wyświetlania list elementów.

7.1. Podstawowa lista

7.2. Lista z aktywnym elementem

7.3. Lista z wyłączonym elementem

7.4. Lista z linkami

7.5. Kolorowe list items

7.6. Lista z badges

8. Spinners (Wskaźniki ładowania)

8.1. Border spinner

8.2. Kolorowe spinnery

8.3. Growing spinner

8.4. Różne rozmiary

9. Progress Bars (Paski postępu)

9.1. Podstawowy pasek postępu

9.2. Z etykietą

9.3. Kolorowe paski

9.4. Animowany pasek

10. Praktyczny przykład: Profil użytkownika

11. Podsumowanie

Bootstrap 5 oferuje bogaty zestaw gotowych komponentów, które można od razu wykorzystać w projekcie:

  • Przyciski – różne style, rozmiary i stany
  • Karty – uniwersalne kontenery na treść
  • Alerty – komunikaty dla użytkownika
  • Badges – małe etykiety i liczniki
  • Breadcrumbs – nawigacja hierarchiczna
  • List groups – elastyczne listy
  • Spinners – wskaźniki ładowania
  • Progress bars – paski postępu

Co dalej:

  • Nawigacja i menu
  • Formularze i walidacja
  • Modalne okna i offcanvas
  • Zaawansowane komponenty (tooltips, popovers, carousel)
Wróć do spisu lekcji