Bootstrap – tutorial, czy warto używać?

Wprowadzenie

Bootstrap to bardzo popularny framework webowy służący do tworzenia responsywnych stron internetowych. Został on stworzony przez Marka Otto i Jacoba Thorntona – programistów twittera. Przy użyciu Bootstrapa bardzo łatwo można stworzyć przyzwoite menu nawigacyjne, karty, karuzelę (prosty slajder).

Instalacja

Style CSS

W sekcji head dokumentu HTML dodajemy następującą linię:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

Uwaga: Bootstrap musi zostać dodany PRZED własnymi stylami CSS – inaczej zostaną one nadpisane.

Opcjonalne Skrypty JS

Większość funkcjonalności Bootstrapa to efekty wizualne nie wymagające do działania żadnych skryptów, jednak zdarzają się wyjątki – np. rozwijane menu, karuzela. Skrypty najlepiej dodać przed tagiem zamykającym </body>.

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>

Funkcjonalności

1. Responsywne Menu (Hamburger)

Proste w pełni responsywne menu możemy stworzyć takim kodem:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
 
  </div>
</nav>

2. Kolumny

Responsywne Kolumny

Bootstrap wyróżnia 5 typów responsywnych kolumn:

• .col- (bardzo małe urządzenia – szerokość ekranu mniejsza niż 576 pikseli)
• .col-sm- (małe urządzenia – szerokość ekranu równa lub większa niż 576 pikseli)
• .col-md- (średniej wielkości urządzenia – szerokość ekranu równa lub większa niż 768 pikseli)
• .col-lg- (duże urządzenia – szerokość ekranu równa lub większa niż 992 pikseli)
• .col-xl- (bardzo duże urządzenia – szerokość ekranu równa lub większa niż 1200 pikseli)

Klasy kolumn można łączyć, aby tworzyć bardziej dynamiczne i elastyczne układy.

Demo poniżej w ramce lub pod adresem https://cybertutorials.pl/dev/bootstrap-cols-responsive.html

Nieresponsywne Kolumny

Nieresponsywne Kolumny tworzymy używając divu klasy „col”:

<div class="container">

<div class="row">

<div class="col" style="background:#bfbfbf;">

Kolumna 1

</div>

<div class="col" style="background:#bfbfbf;">

Kolumna 2

</div>

</div>

</div>

3. Przyciski

Bootstrap ma kilka predefiniowanych stylów przycisków. Przyciski można dodawać jako link z klasą btn btn-*.

* – kolor.

<a href="#" class="btn btn-primary">.btn btn-primary</a> <!-- primary - niebieski -->
<a href="#" class="btn btn-secondary">.btn btn-secondary</a> <!-- secondary - szary -->
<a href="#" class="btn btn-success">.btn btn-success</a> <!-- success - zielony -->
<a href="#" class="btn btn-danger">.btn btn-danger</a> <!-- danger - czerwony -->
<a href="#" class="btn btn-warning">.btn btn-warning</a> <!-- warning - żółty -->
<a href="#" class="btn btn-info">.btn btn-info</a> <!-- info - miętowy -->
<a href="#" class="btn btn-light">.btn btn-light</a> <!-- light - biały -->
<a href="#" class="btn btn-dark">.btn btn-dark</a> <!-- dark - czarny -->

4. Karty

Bootstrap Tutorial: Podsumowanie

Wymienione przeze mnie w tym wpisie możliwości Bootstrapa to jak narazie wierzchołek góry lodowej – resztę, równie ciekawych funkcjonalności można znaleźć na oficjalnej stronie – https://getbootstrap.com

Źródła

https://getbootstrap.com/

https://getbootstrap.com/docs/4.0/components/buttons/

https://getbootstrap.com/docs/4.0/components/navbar/

https://getbootstrap.com/docs/4.0/components/carousel/

https://getbootstrap.com/docs/4.0/components/card/