Що таке Bootstrap
Bootstrap – це CSS / HTML фреймворк для створення сайтів. Іншими словами, це набір інструментів для верстки. У ньому є ряд переваг, завдяки яким BS вважається найпопулярнішим з собі подібних.
Bootstrap був розроблений Марком Отто і Якобом Торнтоном для Twitter, і випущений в якості продукту в серпні 2011 року на GitHub. У червні 2014 Bootstrap був проектом № 1 на GitHub!
Переваги :
– Швидкість роботи – завдяки безлічі готових елементів верстка займає значно менше часу;
– Масштабованість – додавання нових елементів не порушує загальну структуру;
– Легке налаштування – редагування стилів проводиться шляхом створення нових CSS-правил, які виконуються замість стандартних. При цьому не потрібно використовувати атрибути типу «!Important»
– Велика кількість шаблонів ;
– Величезне співтовариство розробників;
– Широка сфера застосування – Bootstrap використовується для OpenCart, Prestashop, Magento, Joomla, WordPress та ін. Особливою популярністю користується Bootstrap для створення lading page (цільових сторінок).
Bootstrap це набір з трьох фреймворків: CSS / html, JS-компонентів та іконочного шрифту.
Є два способи почати використовувати Bootstrap на власному веб-сайті:
1. Завантажити Bootstrap на getbootstrap.com
2. Підключити Bootstrap в CDN (а також підключити бібліотеку jQuery, див. вкінці).
BS орієнтований на мобільні пристрої, для цього потрібно підключити
<meta name="viewport" content="width=device-width, initial-scale=1">
Сітка , класи та правила Bootstrap
Bootstrap розбиває ширину батьківського блоку на 12 рівних частин, ця сітка і є основою для адаптивності всіх складових та елементів.
Є 4 класи для сітки:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
Класи можна змішувати та комбінувати для досягнення ще більш оптимального поєднання.
Приклад: створені дві різні за розміром блоки, які на екрані телефону займуть всю ширину екрану, на планшеті будуть нерівними, а на великому моніторі стануть однаковими за розміром: <div class="row"> <div class="col-sm-12 col-md-8 col-lg-6"> <div class="col-sm-12 col-md-4 col-lg-6"> </div>
Увага! Сума стовпців в сітці повинна дорівнювати 12 в найменуванні, в інакшому разі вони будуть нагромаджуватися один на одного незалежно від ширини екрану.
Деякі системні правила сітки Bootstrap
1. Ряди повинні бути розміщені в межах .container (fixed-width/фіксованої ширини) або .container-fluid (full-width/повної ширини) для правильного вирівнювання та заповнення.
2. Використання рядків для створення горизонтальних груп стовпців.
3. Контент повинен бути розміщений всередині стовпців, і тільки стовпці можуть бути безпосередніми нащадками рядків.
4. Визначені класи, наприклад .row і .col-sm-4, швидко створюють макет сітки
5. Відступи між стовпцями за допомогою padding , є відступом у рядках для першого й останнього стовпця з негативним значенням margin для .rows.
6. Сітка із 12 доступних стовпців , які потрібно згрупувати . Наприклад, три рівні колонки будуть використовувати .col-sm-4
Базова структура таким чином виглядатиме так :
Створюється рядок із стовпцями <div class=”row”>, потім додається потрібна кількість стовпців із відповідним класом .col-*-*. Ну й не забуваємо при цьому, що сума комірок для кожного типу (sm, xs, md, lg) в .col-*-* не повинна перевищувати 12 частин для кожного рядка.
примітка: .сontainer не є nestable (неможливо вкласти один контейнер в інший).
Відступи для колонок. Можна вказувати, який відступ буде у колонки, якщо потрібно “відсунути” її вправо. Для цього використовується клас .col-md-offset-* – збільшить відступ зліва, на кількість вказаних колонок:
Зміна порядку відображення елементів – за допомгою класів .col-md-push-* и .col-md-pull-*.
Компоненти (Components)
Текстові поля і блоки (текстове поле), кнопки, лейбли, радіокнопки, чекбокси,випадаючі списки , таблиці – для всіх елементів у Bootstrap є готові стилі оформлення. Можна оформити вертикальне та горизонтальне розділення елементів і назв, а також підсвічувати частини форми при виникненні помилок або попереджень.
Glyphicons: іконочний шрифт. Займає порядку 250кб, якщо не планується використання – варто відключити.
Button groups: блоки, які об’єднують кілька кнопок.
Input groups: розширення для текстових блоків та полів.
Navs, таби, вкладки: навігация з табами, потребє підключення js-модулю.
Navbar: навігація головного меню; може бути закріпленим, світлим, або темним.
Breadcrumbs
Pagination: посторінкова навігація.
Pager: кнопки “вперед” і “назад”.
Labels: 6 видів “міток”.
Badges: значки, н-д для непрочитаних листів й т.д.
Jumbotron: великий блок з текстовим привітанням, часто використовується на промо-сайтах для короткого опису проекту.
Thumbnails: зменшення фотографій.
Alerts: повідомлення 4 типів (success,info, warning, danger).
Progress bars: прогрес у %, можна додавати анімацію й полосатий фон.
Media items: оформлення блоків з коментарями (має деревовидну структуру, передбачає відступи зліва)
List groups: – оформлення списків з розширеними можливостями.
Panels: блоки із заголовком, основним контентом й футером.
Responsive embed: “відзивчиві” об’єкти, які можуть розтягуватися на різних розмірах екрану щоб відображати відео із коректним співвідношенням сторін й без явної вказівки розмірів.
Wells: вставки із підказками, альтернативне оформлення цитат й т.д.
Close icon
JavaScript компоненти
Ця частина працює на основі jQuery , складається з таких компонентів:
Component animations (for JS): плавні переходи й анімація.
Collapse: спойлери.
Dropdowns: списки, які випадають.
Tooltips: невеликі підказки, що «вспливають».
Popovers: невеликі підказки, що «вспливають», але в які можно додавати динамічний контент, заголовок і основний текст.
Modals: «вспливаючі» вікна. Можна змінювати разміри, додавати заголовок, основний текст і футер. Й модифікувати.
Carousel: простий слайдер з кількома варіантами руху.
Tabs.js, створення вкладок й tabs.
Не забуваємо все підключити, інакше компоненти Bootstrap, навіть при вказанні його класів, не працюватимуть
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
Деякі знавці наголошують саме в такому порядку підключення бібліотеки jQuery – перед Bootstrap. Правду кажучи, я не знаю, чи це має аж таке значення 🙂
<script src="https://code.jquery.com/jquery.min.js"></script> альтернативний варіант, попередній через ajax
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>