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).
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.
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>
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>
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 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>
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 -->
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
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/
Dodaj Komentarz