Kompletny przewodnik po komponentach Bootstrap 5

Bootstrap 5 to jeden z najpopularniejszych frameworków CSS i JavaScript do tworzenia responsywnych stron internetowych. Oferuje on szeroki zestaw gotowych komponentów, które ułatwiają projektowanie interfejsów użytkownika (UX). Poniżej przedstawiamy wszystkie kluczowe komponenty Bootstrap 5, ich przeznaczenie, zastosowania oraz przykłady użycia.

1. Alerty (Alerts)

Przeznaczenie: Informowanie użytkownika o istotnych zdarzeniach (ostrzeżenia, sukces, błąd, info).
Zastosowanie: Komunikaty o błędach, powiadomienia o zapisaniu zmian.

<div class="alert alert-success" role="alert">
  Operacja zakończona sukcesem!
</div>

2. Odznaki (Badges)

Przeznaczenie: Oznaczanie elementów, np. licznik powiadomień. Zastosowanie: W menu, przy nazwach użytkowników, w nawigacji.

<span class="badge bg-primary">Nowe</span>

Nowe

3. Breadcrumbs (Okruszki)

Przeznaczenie: Nawigacja wskazująca pozycję użytkownika w hierarchii strony.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

4. Przyciski (Buttons)

Przeznaczenie: Interaktywne elementy do inicjowania akcji użytkownika.

<button type="button" class="btn btn-primary">Kliknij mnie</button>

5. Grupa przycisków (Button Group)

Przeznaczenie: Grupowanie przycisków w jeden element UI.

<div class="btn-group" role="group">
  <button type="button" class="btn btn-primary">Lewy</button>
  <button type="button" class="btn btn-primary">Środkowy</button>
  <button type="button" class="btn btn-primary">Prawy</button>
</div>

6. Karty (Cards)

Przeznaczenie: Prezentacja zawartości w estetycznych panelach.

<div class="card" style="width: 18rem;">
  <img src="example.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Tytuł karty</h5>
    <p class="card-text">Przykładowy tekst.</p>
    <a href="#" class="btn btn-primary">Przejdź dalej</a>
  </div>
</div>

Tytuł karty

Przykładowy tekst.

Przejdź dalej

7. Karuzela (Carousel)

Przeznaczenie: Prezentacja dynamicznych obrazków.

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="slide2.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
  </button>
</div>

8. Listy grupowe (List Group)

Przeznaczenie: Tworzenie uporządkowanych list elementów.

<ul class="list-group">
  <li class="list-group-item">Element 1</li>
  <li class="list-group-item">Element 2</li>
  <li class="list-group-item">Element 3</li>
</ul>

• Element 1
• Element 2
• Element 3

9. Modale (Modals)

Przeznaczenie: Wyświetlanie okienek modalnych.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Otwórz modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Tytuł modalu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        Treść okienka.
      </div>
    </div>
  </div>
</div>

10. Paginacja (Pagination)

Przeznaczenie: Nawigacja po stronach w systemach paginacji.

<nav>
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Poprzednia</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">Następna</a></li>
  </ul>
</nav>

Podsumowanie

Bootstrap 5 oferuje szeroką gamę komponentów ułatwiających tworzenie atrakcyjnych, responsywnych i interaktywnych interfejsów. Dzięki nim można szybko wdrażać nowoczesne rozwiązania UX, poprawiając doświadczenie użytkowników i skracając czas pracy nad front-endem. Wykorzystanie gotowych komponentów pozwala także zachować spójność stylistyczną na różnych stronach i aplikacjach.