Bootstrap (framework)

Bootstrap

Logo programu
Autor	Mark Otto, Jacob Thornton
Aktualna wersja stabilna	5.2.1 / 7.09.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

(c) Bootstrap team and contributors, CC BY 3.0

Przykładowa strona zbudowana z użyciem biblioteki

Bootstrap – biblioteka CSS, rozwijana przez programistów Twittera, wydawany na licencji MIT^[1]. 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^[2]) 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^[3].

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^[4]. 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^[5].

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)^[6].

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^[7].

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^[8]. 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^[9]. Obecnie najnowszą wersją pakietu jest Beta 2, która została wydana 10 lutego 2021 roku^[10].

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^[11]

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.

Przypisy

Linki zewnętrzne

• Strona domowa
• Zestaw UI