Фреймворк Бутстрап

Загальні відомості

Фреймворків на основі сіток є багато: Foundation, Skeleton та інші. Перегляньте таблицю, в якій зібрано популярні фреймворки.

Twitter Bootstrap - фреймворк (заготовка, напівфабрикат, набір шаблонів) для швидкого створення веб-сайтів.

Він складається зі зручної CSS-сітки, набору візуальних компонентів та скриптів.

Bootstrap 3 (документація українською мовою).

Bootstrap 4 (реліз відбувся в жовтні 2017 року, до цього четверта версія була в розробці близько трьох років).

Сітка Бутстрапа

В Бутстрапі прийнято метод "від меншого екрану до більшого", всі стилі заточені під мобільні пристрої з невеликими екранами та розширяються для великих екранів.

По замовчуванню в сітці прописані три стоп-точки: 768px, 992px та 1200px, що дає 4 типо-розміри екранів:
col-xs-*;
col-sm-*;
col-md-*;
col-lg-*.


				.col-* { float: left; width: 100%; }

				.col-xs-1 { width: 8,33333333%; }

				.col-xs-2 { width: 16,66666666%; }

				.col-xs-3 { width: 25%; }

				...

				.col-xs-10 { width: 83,33333333%; }

				.col-xs-11 { width: 91,66666666%; }


				@media (min-width: 768px) {

				  col-sm-* { width: ...; }

				}


				@media (min-width: 992px) {

				  col-md-* { width: ...; }

				}


				@media (min-width: 1200px) {

				  col-lg-* { width: ...; }

				}

В разі потреби Бутстрап можна переналаштувати, задавши свої три стоп-точки, свої відступи і т.п.

Компоненти Бутстрапа

В Бутстрапі є багато заготовок для різноманітних стандартних елементів веб-сторінок:
- іконки;
- випадаючі списки;
- групи елементів;
- кнопки;
- форми, поля вводу;
- таби;
- панель навігації і тому подібне.

Якщо вам потрібні тільки ці компоненти - цілком достатньо підключити в проект тільки файл стилів bootstrap.min.css

Але в Бутстрапі є ще багато компонентів, що використовують javascript. Їх ми розглянемо детальніше після вивчення JS та бібліотеки jQuery.

Для використання цих компонентів потрібно підключити бібліотеку jquery.min.js та бібліотеку bootstrap.min.js.

Використання Бутстрапа

Якщо вам потрібна тільки сітка - ви можете піделючити тільки файл стилів. Або ж створити свою сітку на основі бутстрапівської, де не буде зайвих класів.

Та у великих проектах як правило знадобляться різноманітні компоненти з фреймворка.

Є готові шаблони (платні та безкоштовні), з яких сайт збирається як конструктор.
Гугл: free bootstrap template, free bootstrap admin template.

Чого не варто робити:

- редагувати файл bootstrap.css чи bootstrap.min.css;

- глобально перевизначати класи:


				.col-lg-6 { float: none; }

				.col-sm-2 { width: 25%; }

				.col-md-4 { padding: 6px 40px; }

				.col-xs-7 { position: absolute; }

- не дотримуватися почерговості .row та .col-*:


				<div class="container-fluid">

				  <div class="container">...</div>

				</div>


				<div class="row">

				  <div class="row">...</div>

				</div>


				<div class="col-*">

				  <div class="col-*">...</div>

				</div>

- дублювати класи:


				<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">...</div>

- підключати Бутстрап заради невеличкого блоку, кольорових кнопок чи ще якихось дрібниць і не використовувати його потужності.

Часто в верстці під Бутстрап зустрічаю кнопки всередині посилань. Так робити не треба: посилання - це активний елемент, і кнопка - активний елемент.

Цим грішать навіть великі компанії: google, yandex, amazon, microsoft (недосвідчені розробники і ліниві тім-ліди є і в таких компаніях).


				<!-- не вірно: -->

				<a href="#">

				  <button class="btn btn-lg btb-info">Кнопка</button>

				</a>

				<button class="btn btn-lg btb-info">

				  <a href="#">Кнопка</a>

				</button>


				<!-- вірно: -->

				<a href="#" class="btn btn-lg btb-info">Кнопка</a>

				<button class="btn btn-lg btb-info">Кнопка</button>

				<span class="btn btn-lg btb-info">Кнопка</span>

Домашнє завдання

Підключіть в проект Minecraft файл стилів Бутстрап та використайте його сітку та деякі компоненти. Почистіть свій файл стилів від зайвих класів.
Типовий макет під Bootstrap (jpg)
Безкоштовні макети під Bootstrap для заповнення портфоліо:
- designsmaz.com
- cssauthor.com
- freebiesbug.com
- startbootstrap.com
- djavaui.com