Bootstrap (framework)

Z Wikipedii, wolnej encyklopedii
(Przekierowano z Twitter Bootstrap)
Skocz do: nawigacja, szukaj
Bootstrap
framework do front-endu
Logo Bootstrap
Logo programu
Autor Mark Otto, Jacob Thornton
Język programowania HTML, CSS, Sass, Less i JavaScript
Aktualna wersja stabilna 3.3.7 / 25.07.2016
Aktualna wersja testowa 4.0.0-beta / 10.08.2017
Licencja MIT
Strona internetowa
Przykładowa strona zbudowana z użyciem frameworka

Bootstrap - framework 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. Framework korzysta także z języka JavaScript.

Działanie i składnia[edytuj]

Wywołanie[edytuj]

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]

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 się sumować do 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]

Szerokość strony określana jest przez szerokość elementów typu container. Dwa 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]

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łą szerkość 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]

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

  1. License - Twitter Bootstrap (ang.). [dostęp 2013-02-10].
  2. Preprocessors - Bootstrap (ang.). [dostęp 2014-07-08].

Linki zewnętrzne[edytuj]