Bootstrap – Biblioteka css do tworzenia responsywnych stron

Jak przeczytałem pierwszy raz czym jest Bootstrap, musiałem przetrzeć oczy i przeczytać jeszcze raz. Jest bowiem biblioteką css, języka, który wydawało mi się, nie może być już bardziej uproszczony. Biblioteka jest zbiorem gotowych klas css, które ułatwiają tworzenie interfejsu graficznego serwisu. Domyślić się można, że wiążą się z tym pewne ograniczenia. Mimo tego możliwości są ogromne.

Typowo dla bibliotek, klas czy frameworków. Wszystko zaczyna się od ściągnięcia paczki od twórców, w tym przypadku bibliotekę możesz ściągnąć z tego adresu. Następnie załączasz plik boostrap.css lub bootstrap.min.css oraz bootstrap.js.

 
<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="js/bootstrap.js"></script>

Możesz nie znać w ogóle css, a i tak podstawowa dokumentacja nie powinna sprawić najmniejszego kłopotu. Ponieważ całość polega na nadawaniu odpowiedniej klasy odpowiedniemu elementowi. Pełna paleta możliwości znajduje się na stronie stronie dokumentacji.

Na tym jednak nie koniec. Bootstrap posiada rozszerzenie dla języka JavaScript, znacznie powiększa wachlarz możliwości biblioteki. Wystarczy w sekcji head załączyć kolejne (dostępny w podstawowej paczce) pliki, np. bootstrap.alert.js lub bootstrap.dropdown.js by niemal podwoić ilość możliwości biblioteki.

 
    <script type="text/javascript" src="js/bootstrap.alert.js"></script>
    <script type="text/javascript" src="js/bootstrap.dropdown.js"></script>

Również w tym przypadku używanie przygotowanych rozwiązań jest maksymalnie uproszczone i wymaga jedynie zastosowania odpowiedniej nazwy klasy dla odpowiedniego elementu HTML. Jednak sama składnia HTML jest jednak nieco bardziej rozbudowana i jest stosowana jako komponent. Pakiet komponentów, przygotowanych przez twórców biblioteki, znajduje się pod tym adresem.

Ostatnią zaletą, jaką uraczyli nas twórcy jest, wspomniana w tytule, możliwość tworzenia responsywnych stron. Oznacza to tyle, że niezależnie od rozdzielczości (panoramiczny ekran, stary CRT, tablet, komórka) szerokość strony zostanie dopasowana automatycznie. Jest to dość niewygodne podczas kodowania szablonu. Wymaga podziału strony na 12 bloków (kolumn), na przykład 2/10, 4/8, w których znajduje się zawartość strony. W bibliotece Bootstrap wyróżnia się trzy najważniejsze klasy potrzebne do wykonania zadania. Są to row, span, offset.

Nazwa sama sugeruje do czego może służyć dany element, row, trzyma elementy w płaszczyźnie poziomej (tworzy pewnego rodzaju wiersze (ang. row)).
– Span z kolei jest wspomnianym blokiem (kolumną) i nazwa klas ma przypisywany numer od 1-12 w zależności od szerokości jaką ma zajmować (span1, span5, span9).
– Offset natomiast jest odstępem, od bloku (kolumny) z lewej strony. Zastosowanie jest identyczne jak span, tj. offset1 offset5, offset7.

Żeby biblioteka działała w trybie responsywnym musisz załączyć drugi plik css bootstrap-responsive.css lub bootstrap-responsive.min.css oraz dodać znacznik meta, który będzie informował, że strona jest responsywna. Wszystko to jest przejrzyście opisane na stronie.

 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Wpis miał być stworzony w celach informacyjnych, mniej jako tutorial, stąd brak jakiś przykładów. Przykłady znajdziesz, również, na stronie twórców. Tym razem pod takim adresem.

Krótkie podsumowanie, które chodzi mi po głowie. Nie specjalnie wygodne wydaje mi się stosowanie biblioteki do serwisu, czy portalu. Obsługuje głównie alerty, formularze, tabele, itp. Bardzo dobre zastosowanie może mieć w panelu administracyjnym lub w przypadku bardzo rozbudowanego profilu użytkownika, jak to ma miejsce na przykład na Twitterze.