Twitter Bootstrap jest obecnie jedną z popularniejszych na świecie bibliotek (frameworków) CSS.
Znajdziecie w nim wiele gotowych już rozwiązań, modułów dzięki którym można przyspieszyć pracę nad budową nowej strony internetowej. W wielu przypadkach przyspiesza stworzenie strony nawet o kilka dni, ale co najważniejsze korzystanie z gotowej biblioteki standaryzuje nasze strony wszystko ma więc swoje miejsce. W efekcie kod jest nie tylko bardziej przejrzysty jest też łatwiejszy w późniejszej modyfikacji i rozbudowie.
W skład biblioteki Bootstrap wchodzi wiele elementów oczywiście główną jej część stanowią pliki CSS poza nimi dostępne są również skrypty JS (JavaScript – oparte o jquery) oraz zbiór fontów. Pliki CSS dostępne są w kilku różnych formatach poza standardową wersją np. jako less lub sass. Na dzień dzisiejszy na stronie projektu http://getbootstrap.com/ dostępna jest wersja 3.3.6 jednak już wkrótce oficjalną wersją będzie Bootstrap 4.
Dosyć istotną zasadą pracy z Bootstrapem jest to, że nie należy ingerować w samą bibliotekę – nie edytujemy domyślnych plików. Wszystkie zmiany wprowadzamy w osobnym pliku najlepiej poprzez dodanie nowej klasy lub id nadpisując ustawienia Bootstrap np. w style.css. W ten sposób w przyszłości można sobie zaoszczędzić dużo pracy.
Co znajdziesz w tym wpisie
Do czego nam Bootastrap?
- Zawiera gotowe rozwiązanie RWD (responsive design)
- Nie trzeba samodzielnie ustawiać wszystkich pól, elementów na stronie (np. formularzy, przycisków)
- Posiada już wbudowane funkcje takie jak: taby, karuzela (slider)
- jednym słowem ułatwia pracę nad stroną
Instalacja (dodanie do strony) Bootstrapa
Instalacja dodanie do strony Bootstrapa jest bardzo proste. Poniżej zamieściłam prosty kod strony pozbawiony większości elementów jednak rozszerzony o bibliotekę Bootstrap.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Tytuł strony z Twitter Bootstrap</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<!-- Zawartość strony -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
W najbliższych wpisach postaram się przybliżyć tematykę tej biblioteki.
Przygotowane lekcje:
- https://www.aurainweb.pl/2016/04/bootstrap-grid-system/
- https://www.aurainweb.pl/2016/04/frameworki-css-bootstrap/
- https://www.aurainweb.pl/2016/04/tabele-w-bootstrap/
- https://www.aurainweb.pl/2016/05/etykiety-bootstrap-badges-and-labels/
- https://www.aurainweb.pl/2016/04/zakladki-nav-tabs-pills-bootstrap-js/
- https://www.aurainweb.pl/2016/05/tworzenie-tooltips-wykorzystaniem-css3/
- https://www.aurainweb.pl/2016/06/pasek-postepu-bootstrap-progress-bars/
- https://www.aurainweb.pl/2016/05/bootstrap-glyphicons-dostepne-ikony/
- https://www.aurainweb.pl/2016/05/przyciski-w-bootstrap-buttons/
- https://www.aurainweb.pl/2016/05/grupy-przyciskow-bootstrap-button-groups/
dodatkowe tagi:
bootstrap instalacja
bootstrap pl
