Знайомство з Bootstrap

1

Від автора: Для будь-якого фронтенд розробника/програміста рано чи пізно настає момент для створення свого власного міні-фреймворка. Зазвичай він складається з тих правил і функцій, які повторювалися у всіх недавніх проектах. Після того, як вони будуть зібрані в одну бібліотеку, їх буде легше за один раз підключити до нового проекту і користуватися готовими рішеннями. В таку бібліотеку може входити сітка з колонками, в яких знаходиться будь-який контент, стандартні правила для спрайтів, зовнішніх відступів, заголовків і т. д.

Якщо у розробці проекту беруть участь кілька професійних фронтенд розробників, то подібні фреймворки потрібно стандартизувати. Якщо це так, то перевага віддається вже стандартизованим фреймворкам. Тепер перед нами виразно стоїть вибір: який з фреймворків використовувати? У цій статті ми постараємося допомогти майбутнім професійним розробникам розібратися в «плюси» і «мінуси» фреймворку Bootstrap.

Що таке Bootstrap

Створений командою розробників у компанії Twitter, він спочатку використовувався для власних продуктів компанії і був названий «Twitter Bootstrap», але потім став самостійним рішенням. Ось чому слово «Twitter» було надалі відкинуто.

Bootstrap — це CSS/HTML фреймворк для створення веб-сайтів. Іншими словами, це набір інструментів для створення веб-макета. У нього є ряд переваг, що робить його найпопулярнішим серед інших подібних фреймворків. Переваги Bootstrap:

Швидкість роботи – створення макетів Bootstrap займає менше часу завдяки великому набору готових до використання елементів.

Гнучкість – додавання нових елементів не порушує загальну структуру завдяки динамічно змінюється сітці.

Легка змінюваність – редагування стилів досягається за рахунок додавання нових CSS правил, які перевизначають існуючі. При цьому, вам не потрібно використовувати атрибути типу !important.

Велика кількість шаблонів – цей момент буде окремо розглянуто далі.

Величезне співтовариство прихильників/розробників.

Широкий спектр застосування – Bootstrap використовується для створення тим майже для будь-якої CMS Magento, Joomla, WordPress або будь-який інший), включаючи односторінкові лэндинги.

Чудова офіційна документація.

Bootstrap особливо популярний серед тих, хто займається створенням так званих «лэндингов» (посадкових/цільових сторінок).

Шаблони Bootstrap

Шаблони Bootstrap дозволяють вам змінювати вже модифіковані елементи під ваші потреби. Багато розробники пропонують використовувати власні шаблони (платні або безкоштовні). Підключаються шаблони Bootstrap дуже просто: після підключення самого Bootstrap ви просто додаєте виклик CSS шаблону.

Вміст фреймворку

Якщо ви зупинили свій вибір на Bootstrap, то даний фреймворк дозволить вам істотно заощадити час розробки фронтенд частини проекту завдяки великій кількості готових компонентів. Пізніше ми розглянемо основні компоненти, якими користуються майже всіх фронтенд розробники. Слід тут зазначити, що Bootstrap — це, так би мовити, набір з трьох фреймворків: CSS/HTML, JS компоненти і иконочный шрифт.

Сітка

Наявність сітки є базовою вимогою для гарного макета. Сітка — це потужний інструмент для розташування блочного контенту і вкладених елементів. За допомогою префіксів ви можете вказати, яким чином повинні відображатися блоки, залежно від типу пристрою, на якому проглядається веб-сайт.

Наприклад, клас «col-xs-» буде використовуватися для мобільних телефонів з шириною екрана менш 768 пікселів, а клас «col-lg-» — для пристроїв з шириною екрана понад 1170 пікселів. Bootstrap поділяє ширину батьківського блоку на 12 рівних блоків, які ми можемо використовувати як завгодно. Деякі блоки можуть комбінуватися, щоб отримати, наприклад, три колонки: дві 25% «col-lg-3» і одна 50% «col-lg-6».

Візуально сторінка може бути представлена в будь-якому бажаному вигляді:

Знайомство з Bootstrap

Якщо ви вийдете за межі 12 блоків, то решта буде відображена нижче, під іншими блоками, тому будьте уважні. Ось приклад блоків, які будуть однаково відображатися на всіх пристроях. Давайте розділимо екран на три рівні частини:

First column
Second column
Third column

Типографіка

У доповнення до можливості змінювати блоки на макеті і структуру сторінки Bootstrap дозволяє форматувати параметри шрифту: абзаци, цитати, заголовки, підзаголовки, різні розміри тексту, вставки коду і т. д. В більшості випадків вам не потрібно змінювати налаштування тексту за замовчуванням, тому що всі зовнішні відступи, заголовки, інтервали між рядками (інтерліньяж) і т. д. вже ретельно підібрані.

Велика увага приділяється семантиці: основний заголовок може бути заданий у вигляді тега

heading

, але також і у вигляді

heading

– обидва варіанти будуть виглядати однаково, але другий може бути використаний будь-яку кількість разів на сторінці.

Знайомство з Bootstrap

Якщо ви хочете спробувати попрацювати з Bootstrap, але не хочете відразу розбиратися у всіх «тонкощі», то почніть з малого: створіть текстову сторінку з якимись новинами. Просто проведіть лінії під заголовками і підзаголовками, вставити зображення, додайте якісь цитати, списки і насолоджуйтеся тим, як легко даний фреймворк справляється з цими завданнями.

Оповіщення (алерти)

Будь оповіщення може бути представлено у 4 стандартних форматах: позитивний, інформаційний, попереджає негативний. Ось як вони виглядають:

Знайомство з Bootstrap

Для того щоб відформатувати будь-яке повідомлення, потрібно додати два класу для потрібного об’єкта:

Відмінно! Ви успішно прочитали дане важливе повідомлення.
Подивіться сюди! Це оповіщення потребує вашої уваги, але воно не супер-важливе.
Обережно! Краще б вам перевіритися, т. к. ви виглядаєте не дуже добре.
О, ні! Доведеться змінити що-небудь і спробувати відправити заново.

Також Bootstrap дозволяє форматувати діалогові вікна, спливаючі вікна (pop-up) і спливаючі підказки (tooltip).

Навігація

Навігація зазвичай є одним з основних елементів на веб-сайті і йому приділяється окрема увага при розробці макета. Правильне проектування макета, створення та оформлення елементів навігації для їх правильної роботи — це зазвичай одна з найбільш складних завдань. Переходів у Bootstrap приділено особливу увагу: фреймворк містить дизайни для вкладок (табів), посторінкової навігації (пагинации), бічних меню, «хлібних крихт», основного меню, панелі інструментів (тулбара) і т. д.

Дуже легко зробити так, щоб основне меню виглядало наступним чином:

Знайомство з Bootstrap

Щоб виправити зовнішній вигляд меню, потрібно буде додати клас «navbar-fixed».

Пагинация виглядає ось так:

Знайомство з Bootstrap

А ось і необхідний для цього код:

  • Previous
  • 1
  • 2
  • 3
  • 4
  • 5
  • Next

Як ви можете помітити, нічого складного.

Форми

Текстові поля і блоки (textarea), кнопки, мітки (label), радіокнопки, чекбокси, випадаючі списки — для всіх цих елементів в Bootstrap вже є підготовлені стилі. Ви можете створити вертикальні і горизонтальні роздільники у заголовків, а також підсвітити частина форми, якщо виникнуть якісь попередження або помилки.

Знайомство з Bootstrap

Ви можете зробити горизонтальне розташування блоків, розташування всіх полів в один рядок і багато іншого.

Кнопки

Тут все просто. Щоб створити кнопку, потрібно вказати потрібний набір класів. Ось лише декілька типів кнопок:

Знайомство з Bootstrap

А ось і сам код:

Default
Primary
Success
Info
Warning
Danger
Link

Таблиці

Старі добрі таблиці створюються шляхом додавання класу «table». І ми отримуємо дуже акуратну таблицю:

Знайомство з Bootstrap

Компоненти JavaScript

На додаток до стилям в Bootstrap є правила поведінки для модальних вікон, слайдерів, тултипов, табів та інших інтерактивних елементів на сторінці. Щоб управляти цими компонентами, потрібно бібліотека jQuery; не забудьте підключити її до файлу bootstrap.js.

Иконочный шрифт

Иконочный шрифт дозволить вам забути про дратівливих спрайтах для іконок і дуже сильно спростить ваше життя. Єдине обмеження полягає в тому, що на одній іконі можна застосувати тільки один колір.

Знайомство з Bootstrap

Вам надається вибір з 200 ікон, і ви можете додати їх на ваш веб-сайт наступним чином:

Як підключити Bootstrap

Зайдіть на офіційний сайт фреймворку і відзначте всі пункти, які знадобляться для роботи. Додаткові можливості можуть бути додані/видалені при необхідності. Після того як ви натиснете на кнопку «Compile and Download» («Компілювати і Завантажити»), скачайте архів і розпакуйте його.

Знайомство з Bootstrap

Для базових речей вам потрібно всього один файл. Він підкреслений червоним кольором. Збережіть його у папці з вашим CSS і підключіть в області head на сторінці.

Иконочный шрифт знаходиться у папку fonts (шрифти), і якщо він вам дійсно потрібен, переконайтеся в тому, щоб він залишився в цій папці. Збережіть структуру папок, щоб все працювало коректно.