Що таке Bootstrap?

37

Від автора: будь-веб-розробник і верстальник рано або пізно замислюється про те, як йому спростити і прискорити процес верстки сайту. У зв’язку з цим, він вдається до допомоги css-фреймворків. Найбільш популярні з них – bootstrap. Що це таке і навіщо він потрібен? У цій статті я постараюся максимально детально відповісти на це питання.

Що таке Bootstrap?

Як я вже сказав у вступних словах – це CSS-фреймворк. Більш точне і повне визначення можете прочитати на цьому скріншоті, зробленому з російськомовного сайту Bootstrap:

По-перше, Bootstrap є найпопулярнішим фреймворком, у його найближчого конкурента в 3-5 разів менше співтовариство. По-друге, це не тільки css, але і js-фреймворк. Тобто в Bootstrap написані готові стилі і скрипти, для застосування яких вам достатньо всього лише прописати необхідні стильові класи і атрибути html-елементів.

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

Для чого вам Bootstrap?

Взагалі щоб краще зрозуміти, для чого вам потрібен Bootstrap, можна повернутися трохи назад і відповісти на питання: «А що таке взагалі css-фреймворк?»

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

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

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

Загалом-то, якраз заради адаптивної верстки і варто використовувати Bootstrap, тому що якщо ми говоримо про фіксованих макетах, то їх легко зробити з нуля. Просто створюємо блоки, задаємо їм фіксовану ширину і працюємо по макету.

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

Загалом, при розробці з нуля адаптивного шаблону вам доведеться попрацювати як слід, при цьому ваша кваліфікація в верстці повинна бути досить високою.

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

По-друге, фреймворк ідеально підходить при роботі в команді. Верстка на bootstrap при належному вмінні та розумінні відбувається в 3-5 разів швидше, а однаковість коду дозволить будь-якому вашому колезі внести правки. Якщо ж ми говоримо про верстку без фреймворку, то тут і кожного розробника може бути свій стиль і іншій людині доведеться витратити час на вивчення його коду.

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

Недоліки Bootstrap

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

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

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

Компоненти фреймворку

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

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

Давайте розглянемо приклад з кнопками. Ось такі кнопки дуже легко вивести з допомогою фреймворку:

І для цього лише потрібен такий код:

За замовчуванням
Основний
Успіх
Инормирование
Провал
Попередження

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

Таким чином в Bootstrap виконується робота і з усіма іншими компонентами.

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

Bootstrap: з чого почати роботу з фреймворком?

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

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

Далі вам потрібно перейти на сторінку «З чого почати» або Getting Started. На ній вам буде надана можливість скачати фреймворк одним із способів, вам підійде для початку самий перший, тобто просте завантаження повного фреймворка.

Крім цього, ви можете підключити потрібні файли через CDN. Це означає, що вам не доведеться завантажувати собі на комп’ютер, копіювати в папку з проектом, а всього лише потрібно прописати в секції head сайту підключення тих файлів з cdn-сховища.

Якщо ж ви хочете кастомизировать фреймворк, тобто використовувати тільки певні його компоненти, то перейдіть на цю сторінку — http://getbootstrap.com/customize. На ній вам потрібно буде вибрати, які компоненти включити в склад.

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

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

Коли все буде готово, прокрутіть сторінку вниз, де ви побачите кнопку:

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

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

Що ж, на цьому я закінчую першу статтю про Bootstrap, в наступній ви вже докладно поговоримо про установку фреймворка. До зустрічі!