Twitter Bootstrap – bo o nim będzie dzisiaj mowa – może ułatwić życie gdy tworzymy responsywne strony www. Standardowo szablon pustej strony opartej o bootstrap wygląda tak jak poniżej:
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">></span>
<span class="c"><!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --></span>
<span class="nt"><title></span>Bootstrap 101 Template<span class="nt"></title></span>
<span class="c"><!-- Bootstrap --></span>
<span class="nt"><link</span> <span class="na">href=</span><span class="s">"css/bootstrap.min.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">></span>
<span class="c"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --></span>
<span class="c"><!-- WARNING: Respond.js doesn't work if you view the page via file:// --></span>
<span class="c"><!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]--></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Hello, world!<span class="nt"></h1></span>
<span class="c"><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</span><span class="nt">></script></span>
<span class="c"><!-- Include all compiled plugins (below), or include individual files as needed --></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"js/bootstrap.min.js"</span><span class="nt">></script></span>
<span class="nt"></body></span>
<span class="nt"></html></span></code></pre>
</div>
Jak wygląda strona, ano tak -> strona bootstrap czyli nic interesującego.
Jeśli chcemy mieć szybko jakiś efekt możemy użyć „gotowca” w postaci strony -> https://getbootstrap.com/examples/jumbotron/
Tym, którzy nie chcą gotowych rozwiązań pozostaje samodzielne „składanie z klocków”. Niby nie LEGO ale też jest to budowanie z klocków.
Więcej przykładów można znaleźć na https://getbootstrap.com/getting-started/ więc nie będę tu ich przytaczać.
No a teraz przejdźmy do tego – jak to się je. By „spożyć” owo rozwiązanie po pierwsze musimy (choć niekoniecznie) ściągnąć sobie ostatnią wersję frameworka Bootstrap. Najlepiej zrobić to wchodząc na stronę https://getbootstrap.com/getting-started/#download gdzie mamy kilka możliwości. Nas będzie interesowała możliwość ściągnięcia gotowego frameworka (w chwili pisania tego artykułu aktualna wersja do pobrania to https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip ale już dostępna jest wersja alfa 4.0.0)
Jeśli mamy pobraną już ostatnią wersję to po rozpakowaniu pobranego pliku pojawiają się nam pliki w takiej strukturze folderów.
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2Całość kopiujemy np. do głównego folderu naszej witryny WWW. Teraz tylko dodajemy domyślny szablon strony i zapisujemy go jako index.html
Domyślny szablon strony (tak jak na wstępie):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>Inną metodą jest korzystanie z serwerów CDN (Content delivery network), które zwalniają nas z trzymania bibliotek na swoim serwerze oraz mogą sprawić, że strona będzie ładować się szybciej. Poniżej wersja z wykorzystaniem serwerów CDN.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>Kontener (container)
No dobrze, mamy szablon i co dalej? Teraz kilka słów na temat koncepcji jaka przyświeca rozwiązaniu Bootstrap. Rozwiązanie opiera się na siatce złożonej z 12 kolumn jednakowej szerokości, które mogą być dowolnie łączone tak aby nie przekroczyć 12 w rzędzie (czyli rozwiązanie 6 + 6 lub 2 + 8 + 2 lub 3 + 9 itd.). Siatka (grid) umieszczona musi być w kontenerze (container), który jest definicją klasy .container – dzięki temu treść zawarta w kontenerze jest centrowana na stronie a po bokach pojawiają się białe paski. (przykład -> https://www.rafalrebacz.pl/examples/bootstrap/kontener.html)
Poniżej przykład tego jak wykorzystujemy kontener.
<div class="container"> <p></p> </div>
Szerokość wyświetlanego przez przeglądarkę kontenera zależna jest od urządzenia, na którym strona będzie wyświetlana a dokładnie od rozdzielczości jaką to urządzenie oferuje.
Jeśli chcemy mieć zawartość strony na pełnej szerokości przeglądarki to korzystamy z następującego rozwiązania:
<div class="container-fluid"> <p></p> </div>
(przykład -> https://www.rafalrebacz.pl/examples/bootstrap/kontener_full.html)
Wiersz (row)
W kontenerze umieszczamy wiersze, które definiowane są przy użyciu klasy .row. Wiersze jak w tabeli ułożone są jeden nad drugim.
(przykład -> https://www.rafalrebacz.pl/examples/bootstrap/kontener_row.html)
<div class="container"> <div class="row"> <p></p> </div> <div class="row"> <p></p> </div> <div class="row"> <p></p> </div> </div>
Mamy już wiedzę na temat kontenera i wiersza. Pozostał nam jeszcze jeden element,który służy do budowy szkieletu strony a mianowicie wspomniana wcześniej kolumna (col).
Kolumna (col)
W poszczególnych wierszach treść umieszczana jest w 12 jednakowej szerokości kolumnach, które mogą być „grupowane”. Szerokość kolumny definiowana jest poprzez klasę, której użyjemy.
Jeśli użyjemy:
<div class="container"> <div class="row"> <div class="col-xs-4"></div> <div class="col-xs-4"></div> <div class="col-xs-4"></div> </div> <div class="row"> <p></p> </div> <div class="row"> <p></p> </div> </div>
Otrzymujemy w rezultacie treść w trzech jednakowej szerokości kolumnach.
(przykład -> https://www.rafalrebacz.pl/examples/bootstrap/kontener_colxs.html)
Jeśli użyjemy:
<div class="container"> <div class="row"> <div class="col-xs-3"></div> <div class="col-xs-7"></div> <div class="col-xs-2"></div> </div> <div class="row"> <p></p> </div> <div class="row"> <p></p> </div> </div>
Otrzymujemy w rezultacie treść w trzech różnej szerokości kolumnach.
(przykład -> https://www.rafalrebacz.pl/examples/bootstrap/kontener_colxs2.html)
Jak widać zawsze suma wynosi 12, więc czy zastosujemy klasę col-xs, czy też klasę col-lg to musimy liczyć do 12.
Tutaj kilka uwag na temat kolumn. Framework Bootstrap operuje kilkoma klasami, które powinny być stosowane w zależności od urządzenia na którym będziemy chcieli wyświetlać treść. Mamy tu do dyspozycji:
- klasę .col-xs-* (dla bardzo małych urządzeń <768px – np. telefonów) – szerokość kontenera AUTO;
- klasę .col-sm-* (dla małych urządzeń >= 768px – np. tabletów) – szerokość kontenera 750px;
- klasę .col-md-* (dla średnich urządzeń >= 992px – np. komputerów stacjonarnych – szerokość kontenera 970px;
- klasę .col-lg-* (dla dużych urządzeń >= 1200 px – np. laptopów) – szerokość kontenera 1170px;
Więcej na ten temat na stronie https://getbootstrap.com/css/#grid-options
Trzeba pamiętać o tym, że kolumn ma być 12 jeśli będzie więcej to kolejna kolumna pojawi się poniżej poprzednich 12.
W przypadku gdy strona ma być wyświetlana poprawnie na rożnego rodzaju urządzeniach możliwe jest stosowanie różnych klas dla tych samych elementów tak jak przedstawiono to poniżej:
<div class="container"> <div class="row"> <div class="col-xs-12 col-md-8"></div> <div class="col-xs-6 col-md-4"></div> </div> </div>
Na laptopie 1680×1050 zobaczymy dwie kolumny, jedna obok drugiej a na smartfonie jedną kolumnę pełnej szerokości a pod nią kolumnę o szerokości połowy okna.
(przykład -> https://www.rafalrebacz.pl/examples/bootstrap/kontener_colxsmd.html)
Inny sposób wyświetlania zawartości stron przedstawiony jest poniżej. Na laptopie 1680×1050 zobaczymy trzy kolumny jednakowej szerokości, jedna obok drugiej z marginesem po lewej i prawej a na smartfonie dwie kolumny szerokości połowy okna i pod nimi trzecią kolumnę o szerokości połowy okna.
<div class="container"> <div class="row"> <div class="col-xs-6 col-md-4"></div> <div class="col-xs-6 col-md-4"></div> <div class="col-xs-6 col-md-4"></div> </div> </div>
(przykład -> https://www.rafalrebacz.pl/examples/bootstrap/kontener_colxsmd2.html)
Jeszcze jeden z przykładów podanych na stronie Bootstrap:
<div class="container"> <div class="row"> <div class="col-xs-6"></div> <div class="col-xs-6"></div> </div> </div>
(przykład -> https://www.rafalrebacz.pl/examples/bootstrap/kontener_colxsmd3.html)
Powyższy przykład daje nam dwie kolumny równej szerokości zarówno na laptopie jak i na smartfonie.
Przypomnijmy sobie raz jeszcze col-xs-* (smartfony), col-sm-* (tablety), col-md-* (komputery), col-lg-* (laptopy).
No i jeszcze na koniec tego artykułu przykład, który można prześledzić na komputerze, laptopie, smartfonie, tablecie (sprawdziłem na każdym z nich).
<div class="container"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <img src="images/pic01.jpg" align="left"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <img src="images/pic02.jpg" align="left"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <img src="images/pic03.jpg" align="left"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <img src="images/pic04.jpg" align="left"> </div> </div> </div>
(przykład -> https://www.rafalrebacz.pl/examples/bootstrap/kontener_responsive.html)
Więcej w kolejnych artykułach. Zapraszam do przeglądania, czytania, komentowania.
Kolejny artykuł o bootstrap -> https://www.rafalrebacz.pl/2015/09/21/obuwnicze-zmagania-z-materia/
