Bootstrap jest jednym z najpopularniejszych frameworków HTML, CSS, JS. Pod tym specjalistycznym określeniem kryje się zasób modelowych rozwiązań w zakresie wymienionych wyżej technologii. Tworząc strony zmuszeni jesteśmy stale wykonywać takie elementy jak menu, przyciski, tabele itp., nadawać style CSS, wstawiać skrypty JS - są to czynności dość powtarzalne. Bootstrap umożliwia zaoszczędzenie czasu i pracy w ten sposób, że

oferuje nam wiele już przygotowanych elementów składowych, które wymagają niejednokrotnie jedynie prostej adaptacji do konkretnego projektu witryny internetowej. Oczywiście zdanie się wyłącznie na Bootstrap sprawić może, że strona będzie silnie naznaczona stylistyką tego rozwiązania, co grozi tym, że może okazać się ona podobna do wielu już istniejących serwisów WWW. Tego rodzaju framework powinien raczej być traktowany jako swoisty szkielet, jako baza do budowy stron, a nie jako agregat finalnych rozwiązań.

Według mnie, najcenniejszym elementem Boostrap jest możliwość zastosowania tzw. siatki (ang. grid) umożliwiającej tworzenie responsywnych stron, tzn. takich, które dopasowują się do różnorodnych ekranów, co ma szczególne znaczenia w przypadku wyświetlania strony na urządzeniach mobilnych – tablety, smartfony itp.. Siatka jest niczym innym jak zdefiniowaną elastyczną strukturą strony. W przypadku Bootstrap jest to siatka dwunastokolumnowa, co w praktyce oznacza, że strona dzielona jest na 12 elastycznych kolumn o równej szerokości, na których twórca strony układa poszczególne elementy składowe witryny. Jeżeli strona zostanie konsekwentnie oparta na takiej platformie, to można mieć pewność, że będzie poprawnie wyświetlać się na urządzeniach mobilnych. Tworząc element strony np. jakiś blok „div” lub tabelę można określić jej rozpiętość, podając informację na ile kolumn ma się ona rozciągać. Jeżeli chcemy aby zajmowała pół obszaru przewidzianego na stronę, definiujemy jej rozpiętość na 6 kolumn, jeżeli ma zajmować ¼ - wpisujemy 3 kolumny. Tego rodzaju szerokość elementów możemy zdefiniować osobno dla czterech typów ekranów: xs (bardzo małe ekrany), sm (małe ekrany), md (średnie ekrany), lg (duże ekrany). Aby siatka w Boostrap stała się bardziej zrozumiała, najlepiej zapoznać się poniższym kodem.

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Bootstrap w działaniu</title>

<!--Definicje kolorów i wysokości poszczególnych bloków-->
<style>
.czerwony {background-color: #F00; height: 100px; }
.niebieski {background-color: #00F; height: 100px; }
.zielony {background-color: #0C3; height: 100px;}
.zolty {background-color: #FF0; height: 100px;}
.szary {background-color: #CCC; height: 100px;}
.brazowy {background-color: #963; height: 100px;}
.fioletowy {background-color: #939; height: 100px;}
</style>

<!--Załączenie plików Bootstrap CSS -->
<link rel="stylesheet" href="/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="/bootstrap-theme.css" type="text/css" />

</head>

<body>

<!--Kontener, w którym zawarta jest struktura siatki Bootstrap. W tym wypadku jest to kontener zwyczajny tzn. nieobejmujący całości ekranu fragment, który jest wyśrodkowany. Aby rozszerzyć zasięg kontenera na cały ekran należy zmienić klasę container na container-fluid-->

<div class="container">

<!--Podobnie jak w przypadku tabel istnieje możliwość stworzenia wierszy, w ramach których funkcjonują kolumny. 
<!--Najpierw więc tworzy się wiersz w postaci bloku div z klasą row, a w nim definiuje się kolumny za pomocą bloków div--> 
<!--zawierających klasy dotyczące poszczególnych typów ekranów - na użytek demonstracji każda z kolumn posiada klasy dotyczące-->
<!--wszystkich typów obsługiwanych w Bootstrap ekranów, nie jest to jednak konieczne. Klasa z nazwą koloru pełni jedynie funkcję pomocniczą.--> 
<!--Jeżeli stworzymy 4 kolumny, to aby zagospodarować całą szerokość kontenera, ich wspólna rozpiętość dla danego typu ekranu musi równać się 12.-->



<div class="row">
<!-- Kolumna zdefiniowana poniżej rozciągać się będzie na całą szerokość siatki Bootstrap, ponieważ każda z klas opisujących posiada liczbę 12-->
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 czerwony">blok 1</div>
</div>



<div class="row">
<!--W tym wypadku wiersz zawiera różne szerokości przypisane poszczególnym ekranom, co najlepiej jest zauważyć zmniejszając szerokość okna przeglądarki. -->
  <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3 niebieski">blok 2</div>
  <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3 zielony">blok 3</div>
  <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3 zolty">blok 4</div>
  <div class="col-xs-6 col-sm-3 hidden-md col-lg-3 szary">blok 5</div><!--W tej kolumnie klasa hidden-md sprawia, że na średniej szerokości blok w kolorze szarym zostaje ukryty-->
</div>

<!--Jeżeli zdefiniowana szerokość kolumn przekracza liczbę 12, 
to niemieszczący się ze swoją szerokością blok układany jest automatycznie w nowym wierszu. 
W przypadku gdy suma kolumn w wierszu jest mniejsza niż 12 
- powstaje obszar pusty o szerokości równej przestrzeni pozostałej 
do zagospodarowania w danym wierszu. -->
<div class="row">
  <div class="col-xs-12 col-sm-3 col-md-8 col-lg-6 brazowy">blok 6</div>
  <div class="col-xs-12 col-sm-3 col-md-4 col-lg-6 fioletowy">blok 7</div>
</div>


</body>
</html>

Odsyłacz do demonstracji

Więcej informacji można uzyskać na oficjalnej stronie Bootstrap: http://getbootstrap.com/