Як встановити Bootstrap?

2

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

Стандартна установка фреймворку

Про стандартній установці я вже досить багато сказав у минулих статтях. Тут все просто. Заходимо на офіційний сайт getbootstrap.com, клікаєм по пункту Getting Started і вибираємо перший варіант. Таким чином, ми викачуємо повну версію бутстрапа з усіма js і css-компонентами.

Bootstrap CDN – це можливість підключити фреймворк з CDN-сховища, не завантажуючи його файли собі на комп’ютер. Природно, у такому випадку ні про який кастомізації не може бути мови.

Кастомізація фреймворку

Але справа в тому, що в бутстарп за замовчуванням містить багато компонентів, і деякі з них просто можуть не знадобитися вам при розробці конкретного сайту. Наприклад, ви верстаєте інтернет-магазин. Можливо, вам не потрібні модальні вікна і спливаючі підказки, а також не потрібні багато із компонентів css. В такому випадку розумно буде не включати ці компоненти в фреймворк.

Або ви верстаєте простий блог. Припустимо, там вам взагалі практично нічого не потрібно, так що ви можете залишити лише сітку і пару найважливіших компонентів.

Вибирати тільки те, що потрібно – це професійний підхід до створення сайтів і використання Bootstrap. За замовчуванням нестиснений версія css-стилів фреймворку в самої останньої версії важить 143 кілобайта. А сценарії – понад 60 кілобайт. Так, якщо стиснути код, то можна домогтися зменшення ваги на 20-40%, але все одно файли будуть не найлегшими.

Якщо ж ви, наприклад, відключите всі компоненти і залишаєте тільки сітку (так дуже часто роблять), то вага css буде становити всього 15-20 кілобайт, а в стислому вигляді ще на пару кілобайт менше. Так ви досягнете максимальної швидкості і оптимізації вашого проекту.

Добре, це був лише теорія. Для кастомізації фреймворку відвідайте все той же офіційний сайт і перейдіть в пункт Customize.

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

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

Print Media Styles – медіа-запити для друку. Якщо ви не плануєте друкувати сторінки сайту, можна відключити.

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

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

Responsive utilities – адаптивні утиліти, також рекомендую ніколи не відключати їх. Про адаптивних утилітах ми з вами поговоримо в наступній статті, де докладно розглянемо систему сітки. Це такі класи, які дозволяють на певній ширині екрану приховувати елемент або робити його видимим. Дуже зручно і корисно.

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

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

Javascript-компоненти

Це випадаючі меню, спливаючі підказки, модальні вікна, слайдер. Якщо щось з цього вам не потрібно, відключаємо. В деяких випадках дійсно можуть знадобитися всі компоненти, коли у вас на сайті і випадаюче меню, і слайдер на головній сторінці, і модальні вікна. У деяких випадках може знадобитися від сили 1-2 компонента, тоді ні до чого подовжувати код, вимикайте непотрібні компоненти.

Jquery плагіни

Тут ви можете відключити плагіни бібліотеки jquery, які допомагають javascript-компонентів правильно працювати. Відповідно, якщо ви не використовуєте на своєму сайті слайдер, то вам не потрібен плагін для створення каруселей, якщо вам не потрібні підказки, то відключаємо tooltips.js і т. д.

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

Змінні Less (Less variables)

Далі перед вами відкриється величезний пункт, в якому буде маса підпунктів з налаштуваннями змінних Less. Тут можна змінить практично все: кольори, розміри шрифтів, точки брекпоинтов, кількість колонок в сітці, відступи і т. д.

Звичайно, для цього ви повинні знати хоча б основи Less або хоча б на інтуїтивному рівні орієнтуватися в цих формах.

Наприклад, якщо ви бачите змінну @font-family-base, то потрібно хоча б на інтуїтивному рівні розуміти, що вона відповідає за назву шрифту, який є базовим на сайті. Ну а змінна @font-size-base встановлює базовий розмір шрифту. За замовчуванням в бутстрапе він дорівнює 14 пикселів.

Всі ці поля ви можете редагувати. Лише поміняйте 14 на 20 і ось уже ви зможете скачати фреймворк, в якому за замовчуванням розмір шрифту – 20 пікселів. Відповідно, тут же можна налаштувати розміри заголовків і т. д.

Налаштування сітки

Дуже цікаві для нас також параметри сіткової системи, ось вони:

Як бачите, ви можете за кілька секунд поміняти кількість колонок і ширину інтервалів між ними. Змінна grid-float-breakpoint встановлює точку, на якій мобільний меню згортається в іконку.

Якщо ви зміните значення, наприклад, на @screen-md-min, то вже на ширині 991 піксель і менше буде відбуватися згортання. Також можна видалити цю змінну і написати значення в пікселях. Наприклад, 520 пікселів. Тоді згортання меню буде відбуватися тільки на смартфонах і мобільних телефонах.

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

Використовуйте сторінку Customize, коли вам потрібно внести 2-10 правок у фреймворк, або просто відключити потрібні компоненти. Якщо ви збираєтеся міняти набагато більше значень, потрібно використовувати інший метод.

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

Завантаження Less-исходников та їх редагування

Як я вже говорив, якщо вам треба робити багато правок у вихідний код фреймворку і ви хочете бачити зміни моментально, то вам знадобляться less-вихідні. Завантажити їх можна там же, де і сполную версію фреймворку – у розділі Getting Started.

Щоб працювати з Less-першоджерелом і редагувати їх вам потрібні:

Хоч якісь знання css і less або іншого препроцесора

Less компілятор (можна завантажити безкоштовно)

Власне, докладно я не буду зупинятися на кастомізації через less-вихідні, але це найкращий метод, тому що вам не потрібно буде 100 разів заходити на сторінку Customize і компілювати все нові і нові версії фреймворка.

Більш докладно роботу з less-джерела ви можете побачити в нашому платному курсі за Bootstrap, творцем якого є Андрій Кудлай. Там роботу з фреймворком розбирається більш докладно.

Темізація Bootstrap або зміна зовнішнього вигляду елементів

За замовчуванням у повній версії фреймворку в папці css також можна зустріти файл bootstrap-theme.css. Підключати його до сайту необов’язково. Які ж функції він виконує? Файл потрібен виключно для того, щоб при необхідності змінити стилі для потрібних вам елементів.

Цю ж роль може виконати ваш власний стиль.css, в якому ви також можете перевизначити стилі. Bootstrap-тема не є обов’язковим файлом, його використовують скоріше для порядку. Наприклад, у вас є 3 файлу:

bootstrap.css – зрозуміло, це код самого фреймворку;

bootstrap-theme.css – тут ви переопределяете стилі для елементів бутстрапа;

style.css – а в цьому файлі пишіть стилі для своїх елементів.

Тоді у вас буде порядок в коді і в структурі проекту. Але ніхто не забороняє вам всі операції проводити в єдиному файлі – style.css і взагалі не використовувати файл теми.

Найголовніше, підключати в html-розмітки файл з темою і свій власний css пізніше, ніж файл з кодом фреймворку, щоб стилі успішно переопределялись.

Приклад роботи темізаціі

Як я вже і говорив, за замовчуванням Bootstrap кладе в комплект файл bootstrap-theme. Спробуйте його підключити. Зазначу, підключити після основного файлу.

За замовчуванням кнопки в бутстрапе виглядають так:

А ось так змінюється їх зовнішній вигляд після підключення файлу з темою:

Як бачите, з’являється невеликий градієнт. Відповідно, ви можете переписувати код у файлі bootstrap-theme і отримувати свої стилі для кнопок. Але ви можете запитати, чому б не проводити ці зміни прямо в bootstrap.css? Ну справа в тому, що постійно виходять нові версії фреймворку і якщо ви вирішите оновитися, ваші правки важко буде впровадити в нову версію. Хорошим тоном для розробника вважається не чіпати вихідний код, коли можна створити окремий файл і описати зміни там. Це набагато розумніше і зручніше.

Як встановити нові теми Bootstrap, викачані з інтернету?

Є досить багато сайтів, в основному зарубіжних, на яких можна безкоштовно скачати купу тем і шаблонів. Щоб не було плутанини, давайте вважати шаблоном сайт, зверстаний з допомогою Bootstrap, а темою – набір css-правил, переопределяющих стандартний вигляд елементів.

Такі теми можна завантажити, наприклад, на bootswatch.com/, а використовуючи пошуковик ви можете знайти десятки інших.

Загальний принцип встановлення таких тем залежить від самого сайту, на якому ви завантажуєте. Якщо можна завантажити у форматі bootstrap-theme – відмінно, завантажуємо і підключаємо. На bootswatch, наприклад, потрібно завантажити bootstrap.css і замінити ним ваш стандартний файл стилів фреймворка. Також є варіант з less-джерела.

Підсумок

Що ж, сьогодні ми розглянули, як встановити, як кастомизировать Bootstrap. Сподіваюся, ця інформація була для вас корисною. Вище я вже давав посилання на курс адаптивної верстки з допомогою цього фреймворку. Використовуючи Bootstrap ви зможете верстати сайти в 3-4 рази швидше, а результат буде таким же гарним, а то і краще, тому що коли прописувати css-стилі сам, завжди можна щось не врахувати і десь напартачити.

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