Bootstrap (framework)

Z Wikipedii, wolnej encyklopedii
(Przekierowano z Twitter Bootstrap)
Bootstrap
Logo Bootstrap
Logo programu
Autor Mark Otto, Jacob Thornton
Aktualna wersja stabilna 5.3.2
(14 września 2023) [±]
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

Bootstrapbiblioteka CSS, rozwijana przez programistów Twittera, wydawana 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[edytuj | edytuj kod]

Wczesne początki[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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[edytuj | edytuj kod]

Wywołanie[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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:

4 / 4 / 4 3 kolumny o tej samej szerokości
8 / 4 dwie kolumny, prawa 2x węższa niż lewa
3 / 3 / 3 / 3 cztery komórki o równej szerokości

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[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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.

Telefony (<768px) Tablety (≥768px) Średnie ekrany (≥992px) Większe ekrany (≥1200px)
długość container auto 750px 970px 1170px
prefiks klasy .col-xs- .col-sm- .col-md- .col-lg-

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[edytuj | edytuj kod]

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[edytuj | edytuj kod]

  1. License - Twitter Bootstrap. [dostęp 2013-02-10]. (ang.).
  2. Preprocessors - Bootstrap. [dostęp 2014-07-08]. (ang.).
  3. Bootstrap in A List Apart No. 342, @mdo, 17 stycznia 2012 [dostęp 2021-03-16] (ang.).
  4. Bootstrap from Twitter, blog.twitter.com [dostęp 2021-03-16] (ang.).
  5. Mark Otto, Jacob Thornton, Bootstrap, About, getbootstrap.com [dostęp 2021-03-16] (ang.).
  6. Say hello to Bootstrap 2.0, blog.twitter.com [dostęp 2021-03-16] (ang.).
  7. Mark Otto, Bootstrap 3 released, Bootstrap Blog, 19 sierpnia 2013 [dostęp 2021-03-16] (ang.).
  8. Mark Otto, Bootstrap 3.3.0 released, Bootstrap Blog, 29 października 2014 [dostęp 2021-03-16] (ang.).
  9. Mark Otto, Bootstrap 5 Beta 1, Bootstrap Blog, 7 grudnia 2020 [dostęp 2021-03-16] (ang.).
  10. Bootstrap 5 beta 2 - Summary, download, tutorial & next releases, MDB - Material Design for Bootstrap [dostęp 2021-03-16] (ang.).
  11. Bootstrap 5 & Material Design 2.0, MDB - Material Design for Bootstrap [dostęp 2021-03-16] (ang.).

Linki zewnętrzne[edytuj | edytuj kod]