Bootstrap

Słownik kwalifikacji INF.04 - Projektowanie, programowanie i testowanie aplikacji

Co to jest Bootstrap?

Bootstrap to popularny framework CSS służący do szybkiego tworzenia wyglądu stron internetowych i aplikacji webowych. Udostępnia gotowe klasy CSS, dzięki którym można budować układ strony, przyciski, formularze, menu, karty, modale i wiele innych elementów interfejsu.

Bootstrap jest używany głównie po stronie front-endu, czyli w warstwie widocznej dla użytkownika w przeglądarce.

Jak rozpoznać Bootstrap w kodzie?

W kodzie HTML często pojawiają się charakterystyczne klasy, np.:

<div class="col-sm-3 col-md-6 col-lg-4">
  <button class="btn btn-primary dropdown-toggle" type="button">
  </button>
</div>

Typowe klasy Bootstrapa to m.in.:

  • container, row, col-* - układ siatki,
  • btn, btn-primary, btn-danger - przyciski,
  • navbar - pasek nawigacyjny,
  • dropdown-toggle - element rozwijanej listy,
  • card, alert, badge - gotowe komponenty interfejsu.

System siatki Bootstrap

Klasy takie jak col-sm-3, col-md-6, col-lg-4 należą do responsywnego systemu siatki. Oznaczają szerokość elementu na różnych rozmiarach ekranu:

  • sm - małe ekrany,
  • md - średnie ekrany,
  • lg - duże ekrany.

Liczba po myślniku określa, ile z 12 kolumn zajmuje element.

Bootstrap a inne frameworki

Bootstrap nie jest frameworkiem back-endowym ani frameworkiem aplikacyjnym typu Angular. Jego główne zadanie to definiowanie wyglądu i układu strony za pomocą klas CSS.