Налаштування Bootstrap: вибір потрібних компонентів

23

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

З минулої статті ви вже знаєте, що таке Bootstrap, коли його слід використовувати, а також з чого він складається. Зараз ви дізнаєтеся, як вибирати компоненти для вашого проекту, як налаштувати фреймворк під ваші задачі, як прибрати все зайве і не заплутатися при цьому. Це початковий етап практичної роботи з Bootstrap, і будь-який базовий проект починається з даного етапу.

Навіщо налаштовувати Bootstrap

Це дуже хороше питання, бо ви ж можете просто скачати цілком весь архів, не змінюючи його, і працювати з ним. Є дві причини: по-перше, швидше за все вам не знадобляться всі компоненти Bootstrap, а, по-друге, розмір фреймворку не такий вже незначний (навіть у стислому вигляді) — 525 Кб. Плюс 95 Кб важить jQuery, тому що без нього фреймворк не буде працювати. Таку розкіш не може дозволити собі жоден фронтенд розробник, тому вам потрібно прибрати все зайве. У будь-якому випадку завжди видаляйте непотрібні компоненти.

Вибір компонентів

На сторінці завантаження Bootstrap ви побачите форму з чекбоксами. Тут вам треба відзначити ті компоненти, які стануть в нагоді вам в роботі над проектом. І тепер давайте поглянемо на деякі складові Bootstrap та їх призначення.

Налаштування Bootstrap: вибір потрібних компонентів

Базовий CSS (Common CSS)

Це набір базових елементів, необхідних для базової розмітки. Його завжди рекомендується залишати зазначеним.

Стилі для друку (print media styles)

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

@media print {
/* стилі */
}

Типографіка (Друкарня)

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

Навіть якщо ви не будете використовувати встановлені класи на сторінці, її вміст буде відображено в стилі Bootstrap. Це корисно для тих, хто не може або не хоче копирсатися в старому коді. Просто підключіть бібліотеку, щоб зробити текст привабливіше.

Ось як можна змінити простий текст без використання додаткових стилів:

Налаштування Bootstrap: вибір потрібних компонентів

Код (Code)

Форматування коду на сторінках. Звичайно, тут не буде підсвічування синтаксису. Для цього потрібно буде використовувати сторонній плагін (не має ніякого відношення до Bootstrap). Але фреймворк дозволить вам відрізняти код від звичайного тексту за допомогою використання тегів code, pre або kdb.

Сіткова система (Grid system)

Магія, яку використовують CSS фреймворки, досі викликає благоговійний трепет у досвідчених розробників, які починали працювати ще 10 років тому, і перед початком проекту їм належало зробити вибір між табличній або блокової версткою. А сьогодні, просто шляхом додавання потрібних класів, ви отримуєте адаптивний (чуйний) макет для вашого веб-сайту всього за 10 хвилин.

Давайте подивимося на приклад того, як це може виглядати:

Налаштування Bootstrap: вибір потрібних компонентів

Таблиці (Tables)

Таблична верстка давно пішла в минуле, але табличні дані повинні відображатися відповідним чином, якщо не передбачено нічого іншого. Без добре підібраного дизайну, дані будуть виглядати не дуже привабливо. Постарайтеся уникати наступного відображення:

Налаштування Bootstrap: вибір потрібних компонентів

Після простого додавання Bootstrap, без внесення яких-небудь змін в HTML, таблиця буде виглядати ось так:

Налаштування Bootstrap: вибір потрібних компонентів

Форми (Forms)

Якщо вам потрібно створити форми, ви можете використовувати Bootstrap:

Налаштування Bootstrap: вибір потрібних компонентів

Відмітьте чекбокс «Форма» («Form»), якщо вам належить створення форми.

Кнопки (Buttons)

Кнопки Bootstrap гідні окремого обговорення: за замовчуванням вони бувають 4 розмірів і 7 різних типів. Додатково є кнопка з випадаючим меню, блокові кнопки і т. д. За замовчуванням кнопки в Bootstrap виглядають ось так:

Налаштування Bootstrap: вибір потрібних компонентів

Утиліти для чуйного дизайну (Responsive utilities)

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

Налаштування Bootstrap: вибір потрібних компонентів

Як бачите, один і той же блок може бути прихований на планшеті, але відображений на настільному комп’ютері або мобільному пристрої.

Компоненти (Components)

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

1. Гліф іконки (Glyphicons). Иконочный шрифт. Важить близько 250 Кб і рідко використовується. Тому якщо він не потрібен, відключіть його.

2. Групи кнопок (Button groups). Блоки, що складаються з пари кнопок.

3.Групи полів вводу (Input groups). Розширення для текстових блоків і полів, наприклад, Ім’я користувача (Username):

Налаштування Bootstrap: вибір потрібних компонентів

4. Навігація (Navs). Навігація по табам (вкладок). Для використання потрібно підключити js-модуль.

5. Навігаційна панель (Navbar). Навігація для головного меню; може бути фіксованою, світлою або темною.

6. «Хлібні крихти» (Breadcrumbs). Дозволяє користувачам відстежувати місцезнаходження на сайті.

Налаштування Bootstrap: вибір потрібних компонентів

7. Посторінкова навігація (Pagination). Відображає кількість сторінок на веб-сайті. Особливо корисно для блогів.

8. Перемикач сторінок (Pager). Кнопки «вперед» і «назад».

9. Етикетки (Labels). Є 6 типів:

Налаштування Bootstrap: вибір потрібних компонентів

10. Бейджі (Badges). Використовуються, наприклад, для відображення кількості непрочитаних повідомлень.

11. Вітальний блок (Jumbotron). Великий блок з вступним текстом. Зазвичай використовується на промо-сайтах і містить короткий опис проекту.

12. Мініатюри (Thumbnails). Відповідає за відображення зменшених варіантів зображень.

13. Попередження (Alerts). Вказують на успіх, помилку, інформацію або підказку.

14. Індикатор процесу (Progress bars). Процес виконання відображається у відсотках. Додатково можна застосовувати анімацію і додавати смугастий фон.

15. Медіа об’єкти (Media items). Форматування блоків з коментарями, твітами і т. д. Це зазвичай списки з вкладеними елементами, у яких може відрізнятися відступ зліва, як у традиційних деревовидних коментарів.

16. Групи списків (List groups). Форматування списків з додатковими можливостями: виноски, посилання, примітки, повідомлення (дивіться «етикетки» («labels»)).

17.Панелі (Panels). Блоки з хедером, основним контентом і футером. Можуть використовуватися для вдосконалених повідомлень, а також елементів управління або форм.

18. Вбудовування чуйних елементів (Responsive embed). «Чуйні» об’єкти можуть розширюватися і підлаштовуватися під різні розміри екрану для відображення відео в потрібних пропорціях і без безпосередньої вказівки розміру.

19. Вдавлені елементи (Wells). Блоки з підказками, альтернативним оформленням для цитат і т. д.

20. Іконка закриття (Close icon). Призначення повинно бути зрозуміло з назви.

Компоненти JavaScript

Bootstrap розширює можливості динамічних функцій. Робота цього розділу фреймворку ґрунтується на jQuery, і він обов’язково повинен бути підключений до bootstrap.min.js. Складається даний розділ з наступних компонентів:

1. Анімація компонентів (Component animations) (для JS). Плавні переходи, анімація.

2. Випадаючі елементи (Dropdowns). Випадаючі списки.

3. Спливаючі підказки (Tooltips). Невеликі з’являються підказки.

Налаштування Bootstrap: вибір потрібних компонентів

4. Спливаючі елементи (Popovers). По суті такі ж спливаючі підказки, до яких ви можете додати динамічний контент, хедер і основний текст:

Налаштування Bootstrap: вибір потрібних компонентів

5. Модальні вікна (Modals). Спливаючі вікна. Ви можете змінювати розмір, додавати заголовок, основний текст, футер, змінювати їх так, як вам захочеться. За замовчуванням вони виглядають так:

Налаштування Bootstrap: вибір потрібних компонентів

6. Карусель (Carousel). Простий слайдер з вибором анімації.

Налаштування змінних

Ви можете змінювати стандартні налаштування, виходячи з ваших потреб. Ви можете створити власну тему для Bootstrap двома способами:

Створіть ваш файл style.css і вже в ньому застосовуйте стилі, які «перезапишуть» стилі за замовчуванням.

В блоці з змінними Less ви можете змінити параметри на ті, які вам дійсно потрібні, і завантажити змінений під вас архів з Bootstrap.

Завантаження

Після того як ви закінчите з зміною налаштувань, натисніть на кнопку «Компілювати і викачати» («Compile and download»). У завантаженому архіві у нас будуть міститися тільки обрані нами елементи. Для порівняння: невеликий проект використовує лише якусь частину функціоналу, тому розмір фреймворку дуже легко зменшити до 600 Кб до 100 Кб. Отримані в результаті файли можна зберегти в папці з проектом, а потім підключити bootstrap.min.css і (якщо потрібно) bootstrap.min.js.