Bootstrap (framework)

Bootstrap

Logo programu
Autor	Mark Otto, Jacob Thornton
Aktualna wersja stabilna	5.2.3 (22 listopada 2022) [±]
Aktualna wersja testowa	5.0.0-beta2 (10 lutego 2021) [±]
Język programowania	HTML, CSS, Sass, Less i JavaScript
Rodzaj	biblioteka do front-endu
Licencja	MIT
Strona internetowa

Przykładowa strona zbudowana z użyciem biblioteki

Bootstrap – biblioteka CSS, rozwijana przez programistów Twittera, wydawany na licencji MIT. Zawiera zestaw przydatnych narzędzi ułatwiających tworzenie interfejsu graficznego stron oraz aplikacji internetowych. Bazuje głównie na gotowych rozwiązaniach HTML oraz CSS (kompilowanych z plików Less) i może być stosowany m.in. do stylizacji takich elementów jak teksty, formularze, przyciski, wykresy, nawigacje i innych komponentów wyświetlanych na stronie. Biblioteka korzysta także z języka JavaScript.

Historia

Wczesne początki

Bootstrap, pierwotnie nazwany Twitter Blueprint, został opracowany przez Marka Otto i Jacoba Thorntona z Twittera jako platforma zachęcająca do spójności między wewnętrznymi narzędziami. Przed Bootstrapem do tworzenia interfejsu używano różnych bibliotek, co prowadziło do niespójności i dużego obciążenia konserwacją. Według twórcy Twittera Marka Otto:

Zebraliśmy się razem z bardzo małą grupą programistów, aby zaprojektować i zbudować nowe wewnętrzne narzędzie i zobaczyliśmy okazję, aby zrobić coś więcej. Zauważyliśmy, że w trakcie tego procesu tworzymy coś znacznie bardziej istotnego niż inne wewnętrzne narzędzie. Kilka miesięcy później skończyliśmy z wczesną wersją Bootstrap jako sposobu dokumentowania i udostępniania wspólnych wzorców projektowych i zasobów w firmie.

Po kilku miesiącach tworzenia przez niewielką grupę entuzjastów, wielu programistów z Twittera zaczęło wnosić swój wkład w projekt w ramach Hack Week – tygodnia w stylu hackathonu dla zespołu programistów z Twittera. Projekt został przemianowany z Twitter Blueprint na Bootstrap i wydany 19 sierpnia 2011 roku jako projekt open source. Utrzymywany przez Marka Otto, Jacoba Thorntona oraz niewielką grupę programistów projekt, zaczął gromadzić wokół siebie coraz większą społeczność współtwórców.

Bootstrap 2

31 stycznia 2012 wydany został Bootstrap 2, który dodał wbudowaną obsługę Glifikonów, kilka nowych komponentów, a także zmiany w wielu z istniejących. Ta wersja obsługuje responsywne projektowanie witryn internetowych, co oznacza, że układ stron internetowych dostosowuje się dynamicznie, biorąc pod uwagę charakterystykę używanego urządzenia (komputer stacjonarny, tablet lub telefon komórkowy).

Bootstrap 3

19 sierpnia 2013 roku został wydany Bootstrap 3. Przeprojektowano komponenty, aby dostosotwać je do flat design i urządzeń mobilnych. Do Bootstrap 3 dodany został nowy system wtyczek oraz porzucono obsługę Internet Explorer 7 i Firefox 3.6, jednakże został dodany opcjonalny plik polyfill dla tych przeglądarek.

Bootstrap 4

Zespół Bootstrapa zawiesił prace nad wersją 3, aby mieć więcej czasu na rozwój Bootstrap 4. 23 kwietnia 2015 roku Mark Otto ogłosił, że Bootstrap 4 jest w fazie rozwoju. Pierwsza wersja alfa Bootstrap 4 została wdrożona już 19 sierpnia 2015 roku.

Bootstrap 5

Bootstrap 5 Alpha został oficjalnie wydany 16 czerwca 2020 roku. Po niespełna pół roku, 7 grudnia 2020 roku, Mark Otto ogłosił wydanie pierwszej wersji Beta. Obecnie najnowszą wersją pakietu jest Beta 2, która została wydana 10 lutego 2021 roku.

Pierwsze przypadki użycia wersji Bootstrap 5 pojawiły się zaledwie kilka dni po oficjalnej premierze, z których najważniejszy to:

• MDB 5 – Material Design UI Kit for Bootstrap 5

Działanie i składnia

Wywołanie

Bootstrap wywołujemy poprzez zaciągnięcie odpowiedniej biblioteki CSS oraz opcjonalnie JS (bez pliku JS nie zadziałają wszelkie animacje, np. rozwijane menu).

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Struktura 12 kolumn

Bootstrap używamy dzieląc stronę w pionie na poszczególne rzędy (ang. rows), a rzędy na kolumny (komórki). Szerokość każdej kolumny określana jest liczbą, a suma szerokości w rzędzie powinna być równa 12.

Przykłady:

Przykładowy kod wywołania rzędu z 2 kolumnami, z których prawa jest 2x węższa, to:

<div class="row">
  <div class="col-sm-8">zawartość komórki</div>
  <div class="col-sm-4">zawartość komórki</div>
</div>

Szerokość strony

Szerokość strony określana jest przez szerokość elementów typu container. Dwie podstawowe klasy dla container:

• container – szerokość 1170px na większych ekranach
• container-fluid – szerokość 100% na większych ekranach

Przykładowy kod szkieletu strony HTML, zakładając, że element header ma być na całą szerokość strony:

...
<body>
<div class="container" id="menu">
  <div class="row">
    ...
  </div>
</div>
<div class="container-fluid" id="header">
  <div class="row">
    ...
  </div>
</div>
<div class="container" id="tresc">
  <div class="row">
    ...
  </div>
</div>
<div class="container" id="stopka">
  <div class="row">
    ...
  </div>
</div>
</body>

Dzięki używaniu poprawnych klas dla kontenerów i kolumn strona będzie odpowiednio skalować się i dostosowywać do urządzeń mobilnych.

Klasy mobilne

Komórka w Bootstrapie może mieć różne proporcje względem sąsiednich, w zależności od szerokości ekranu urządzenia na jakim jest oglądana.

Na przykład układ

<div class="row">
  <div class="col-xs-12 col-md-8">zawartość komórki</div>
  <div class="col-xs-6 col-md-4">zawartość komórki</div>
</div>

oznacza, że pierwsza komórka na telefonach będzie zajmować całą szerokość ekranu, a na średnich i większych ekranach będzie miała 2/3 szerokości wiersza, a po jej prawej będzie druga komórka na 1/3 wiersza.

Odstępy

Jeśli na danej szerokości ekranu ma pojawić się odstęp na lewo od danej komórki, dodajemy klasę z przedrostkiem mobilnym + offset-.

Na przykład:

<div class="row">
  <div class="col-md-4">pierwsza komórka</div>
  <div class="col-md-4 col-md-offset-4">prawa komórka</div>
</div>

W powyższym układzie druga komórka będzie w odstępie 1/3 długości wiersza od pierwszej komórki.

Linki zewnętrzne

• Strona domowa
• Zestaw UI