Bootstrap

Bootstrap to jedno z najpopularniejszych narzędzi do tworzenia responsywnych stron internetowych. Jest to otwarte oprogramowanie oparte na HTML, CSS i JavaScript, które pozwala projektantom i deweloperom na szybkie budowanie atrakcyjnych i funkcjonalnych interfejsów użytkownika. W artykule omówimy podstawy korzystania z Bootstrap oraz jego kluczowe komponenty, takie jak siatki, przyciski, karty i formularze.

Bootstrap – co to?

Bootstrap to framework front-endowy stworzony przez zespół Twittera, który zyskał ogromną popularność dzięki swojej prostocie, elastyczności oraz wszechstronności. Głównym celem Bootstrap jest umożliwienie tworzenia responsywnych stron internetowych, które automatycznie dostosowują się do różnych rozdzielczości ekranów – od komputerów stacjonarnych po smartfony. Dzięki wbudowanym komponentom i gotowym klasom CSS, programiści mogą oszczędzać czas i wysiłek podczas tworzenia interfejsów.

Instalacja Bootstrap

Aby rozpocząć korzystanie z Bootstrap, można użyć jednej z poniższych metod:

1. CDN (Content Delivery Network):
2. <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css” rel=”stylesheet”>

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

1. Pobranie plików ze strony Bootstrap.

Bootstrap grid – siatka

System siatki w Bootstrap jest jednym z najważniejszych elementów frameworka. Umożliwia on tworzenie responsywnych układów stron za pomocą podziału na kolumny i wiersze.

Bootstrap korzysta z systemu 12-kolumnowego, co oznacza, że każdy wiersz można podzielić maksymalnie na 12 równych części.

Oto podstawowy przykład:

<div class=”container”>

<div class=”row”>

<div class=”col-4″>Kolumna 1</div>

<div class=”col-4″>Kolumna 2</div>

<div class=”col-4″>Kolumna 3</div>

</div>

</div>

Bootstrap oferuje również różne klasy responsywne:

• col-sm dla małych ekranów,
• col-md dla średnich ekranów,
• col-lg dla dużych ekranów,
• col-xl dla bardzo dużych ekranów.

Przykład siatki z różnymi rozmiarami:

<div class=”container”>

<div class=”row”>

<div class=”col-sm-6 col-lg-3″>Kolumna 1</div>

<div class=”col-sm-6 col-lg-3″>Kolumna 2</div>

<div class=”col-sm-6 col-lg-3″>Kolumna 3</div>

<div class=”col-sm-6 col-lg-3″>Kolumna 4</div>

</div>

</div>

Bootstrap buttons – przyciski

Przyciski w Bootstrap są niezwykle wszechstronne i mogą być łatwo dostosowane za pomocą klas.

Przykładowe klasy przycisków:

• btn-primary (niebieski przycisk)
• btn-secondary (szary przycisk)
• btn-success (zielony przycisk)
• btn-danger (czerwony przycisk)
• btn-warning (pomarańczowy przycisk)
• btn-info (jasnoniebieski przycisk)

Przykład kodu:

<button type=”button” class=”btn btn-primary”>Przycisk Primary</button>

<button type=”button” class=”btn btn-success”>Przycisk Success</button>

<button type=”button” class=”btn btn-danger”>Przycisk Danger</button>

Można również dodawać modyfikatory rozmiaru:

<button type=”button” class=”btn btn-primary btn-lg”>Duży Przycisk</button>

<button type=”button” class=”btn btn-primary btn-sm”>Mały Przycisk</button>

 

Bootstrap cards – karty

Karty w Bootstrap to komponenty, które można używać do prezentowania informacji w estetyczny sposób. Karty mogą zawierać nagłówki, obrazy, przyciski i inne elementy.

Przykładowa karta:

<div class=”card” style=”width: 18rem;”>

<img src=”https://via.placeholder.com/150″ class=”card-img-top” alt=”Obraz karty”>

<div class=”card-body”>

<h5 class=”card-title”>Tytuł karty</h5>

<p class=”card-text”>To jest przykładowy opis karty.</p>

<a href=”#” class=”btn btn-primary”>Przejdź gdzieś</a>

</div>

</div>

Można tworzyć bardziej złożone układy kart, dodając listy, grupy przycisków czy elementy nawigacyjne.

 

Bootstrap forms – formularze

Formularze w Bootstrap są kluczowym elementem każdej strony. Framework oferuje wiele gotowych klas do tworzenia atrakcyjnych i funkcjonalnych pól formularzy.

Przykładowy formularz:

<form>

<div class=”mb-3″>

<label for=”exampleInputEmail1″ class=”form-label”>Adres e-mail</label>

<input type=”email” class=”form-control” id=”exampleInputEmail1″ aria-describedby=”emailHelp”>

<div id=”emailHelp” class=”form-text”>Nigdy nie udostępnimy Twojego e-maila.</div>

</div>

<div class=”mb-3″>

<label for=”exampleInputPassword1″ class=”form-label”>Hasło</label>

<input type=”password” class=”form-control” id=”exampleInputPassword1″>

</div>

<button type=”submit” class=”btn btn-primary”>Zaloguj się</button>

</form>

Bootstrap umożliwia również walidację formularzy za pomocą klas takich jak is-valid i is-invalid:

<input type=”text” class=”form-control is-valid” value=”Poprawne dane”>

<input type=”text” class=”form-control is-invalid” value=”Niepoprawne dane”>

 

Bootstrap to potężne narzędzie, które znacząco ułatwia tworzenie responsywnych i estetycznych stron internetowych. Dzięki komponentom takim jak siatka, przyciski, karty czy formularze można szybko i efektywnie budować różnorodne interfejsy użytkownika. Niezależnie od poziomu zaawansowania, Bootstrap to must-have dla każdego dewelopera front-endowego.