Co to jest Bootstrap i jakie ma zastosowania - przykłady

Czym jest Bootstrap?

Bootstrap to popularny framework front-endowy, stworzony przez programistów Twittera, który ułatwia tworzenie nowoczesnych i responsywnych stron internetowych. Zawiera zestaw gotowych komponentów, stylów CSS i skryptów JavaScript, które pozwalają na szybkie budowanie estetycznych i funkcjonalnych interfejsów użytkownika. Bootstrap opiera się na siatce (grid) umożliwiającej łatwe tworzenie responsywnych layoutów, które automatycznie dopasowują się do różnych rozdzielczości ekranu, takich jak komputery, tablety czy telefony.

Zastosowania Bootstrapa

Responsywność: Automatyczne dostosowywanie strony do różnych urządzeń i rozdzielczości ekranu.
Szybki rozwój: Gotowe komponenty, takie jak formularze, przyciski, karty, nawigacja czy tabele, pozwalają na szybkie budowanie stron bez potrzeby pisania CSS i JavaScript od zera.
Spójny wygląd: Używając Bootstrapa, można łatwo utrzymać spójność stylu na całej stronie, co zapewnia estetyczny wygląd.
Integracja z JavaScript: Bootstrap dostarcza wbudowane skrypty JavaScript (np. modal, dropdown, tooltip), które pozwalają dodawać interaktywne elementy bez potrzeby samodzielnego pisania kodu.
Rozszerzalność: Jest łatwy do dostosowania za pomocą własnych stylów CSS lub nadpisywania domyślnych ustawień.

Przykłady komponentów Bootstrap, które można użyć na stronie

1. Przykład responsywnego layoutu z siatką (grid)

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strona z Bootstrapem</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">Kolumna 1</div>
            <div class="col-md-4">Kolumna 2</div>
            <div class="col-md-4">Kolumna 3</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Ten kod tworzy prosty, trójkolumnowy layout, który automatycznie dostosowuje się do różnych szerokości ekranu.

2. Przykład nawigacji (navbar)

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Strona główna</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">O nas</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Kontakt</a>
      </li>
    </ul>
  </div>
</nav>

To przykładowa nawigacja, która będzie responsywna – zmienia się w „burger menu” na urządzeniach mobilnych.

3. Przykład przycisku (button)

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

To prosty przykład przycisku, który korzysta z domyślnego stylu Bootstrapa.

4. Przykład karty (card)

<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Tytuł karty</h5>
    <p class="card-text">Krótki opis lub treść karty. Idealne do prezentacji produktów lub usług.</p>
    <a href="#" class="btn btn-primary">Dowiedz się więcej</a>
  </div>
</div>

Karty mogą być używane do wyświetlania informacji, obrazów, linków itp.

5. Przykład modala (popup okno)

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Otwórz Modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Tytuł Modala</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Treść Modala...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zamknij</button>
        <button type="button" class="btn btn-primary">Zapisz zmiany</button>
      </div>
    </div>
  </div>
</div>

Ten przykład pokazuje, jak można dodać okno modalne, które wyświetla dodatkowe informacje lub opcje użytkownikowi.

Jak używać Bootstrapa na własnej stronie?

Aby dodać Bootstrap do swojej strony, wystarczy:

Dodanie stylów CSS: Możesz zaimportować Bootstrap za pomocą CDN:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

Dodanie skryptów JavaScript: Skrypty Bootstrap mogą być dodane również przez CDN:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap to świetne narzędzie do tworzenia profesjonalnie wyglądających, responsywnych stron internetowych. Dzięki gotowym komponentom takim jak siatki, przyciski, formularze i modale, możesz znacznie przyspieszyć rozwój swojego projektu, jednocześnie dbając o jego spójność i estetykę.