Bootstrap (framework)
 Logo programu | |
| Autor | Mark Otto, Jacob Thornton |
|---|---|
| Aktualna wersja stabilna | 4.4.1 / 28.11.2019 |
| 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 | |
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[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]
- ↑ License - Twitter Bootstrap (ang.). [dostęp 2013-02-10].
- ↑ Preprocessors - Bootstrap (ang.). [dostęp 2014-07-08].
- ↑ Bootstrap in A List Apart No. 342, @mdo, 17 stycznia 2012 [dostęp 2021-03-16] (ang.).
- ↑ Bootstrap from Twitter, blog.twitter.com [dostęp 2021-03-16] (ang.).
- ↑ Mark Otto, Jacob Thornton, Bootstrap, About, getbootstrap.com [dostęp 2021-03-16] (ang.).
- ↑ Say hello to Bootstrap 2.0, blog.twitter.com [dostęp 2021-03-16] (ang.).
- ↑ Mark Otto, Bootstrap 3 released, Bootstrap Blog, 19 sierpnia 2013 [dostęp 2021-03-16] (ang.).
- ↑ Mark Otto, Bootstrap 3.3.0 released, Bootstrap Blog, 29 października 2014 [dostęp 2021-03-16] (ang.).
- ↑ Mark Otto, Bootstrap 5 Beta 1, Bootstrap Blog, 7 grudnia 2020 [dostęp 2021-03-16] (ang.).
- ↑ Bootstrap 5 beta 2 - Summary, download, tutorial & next releases, MDB - Material Design for Bootstrap [dostęp 2021-03-16] (ang.).
- ↑ Bootstrap 5 & Material Design 2.0, MDB - Material Design for Bootstrap [dostęp 2021-03-16] (ang.).