Bootstrap (framework)
| ||
 Logo programu | ||
| Autor | Mark Otto, Jacob Thornton | |
| Aktualna wersja stabilna | 4.4.1 / 28.11.2019 | |
|---|---|---|
| Język programowania | HTML, CSS, Sass, Less i JavaScript | |
| Rodzaj | biblioteka do front-endu | |
| Licencja | MIT | |
| Strona internetowa | ||
Bootstrap - biblioteka CSS, rozwijany 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.
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].