Здрастуйте, шановні читачі блогу . Це перша стаття в рамках нової рубрики «Bootstrap». Що таке Бутстрап? Це популярний фреймворк, який дозволяє швидко і якісно створювати статичні веб-сайти та веб-додатки. По суті, це безкоштовний набір інструментів, що дозволяє використовувати Html, CSS і JavaScript «великими мазками».
При цьому можна працювати з звичайним статичних Html з використанням можливостей Бутстрипа, а можна спробувати, наприклад, створити з допомогою нього унікальний шаблон для свого сайту, що працює на CMS (трохи пізніше ми поговоримо про створення шаблонів для Joomla 3 на основі Bootstrap). При цьому якихось особливих знань Html і CSS від вас не буде потрібно.
Особливості Bootstrap 3 і що таке чуйний дизайн?
Створений цей фреймоворк інженером, дизайнером з компанії Twitter, тому дуже часто використовують назву «Twitter Bootstrap». Він зараз дуже популярний в світі, приклади створених на ньому сайтів можна подивитися тут. Ну і на офіційному сайті фреймворку теж є портфоліо.
Зараз вам пропонують завантажити Bootstrap 3, який має ряд відмінностей від попередніх версій:
У Бутстрапе 3 є тільки одна сіткова система — чуйна (раніше було дві: чуйна й адаптивна. Але її функціонал був істотно розширений за рахунок більшого числа сіток різного розміру.
Що таке чуйний дизайн? Справа в тому, що часи, коли користувачі заходили на сайти виключно зі стаціонарних комп’ютерів і ноутбуків, канули в лету. Зараз, в залежності від тематики, трафік з мобільних пристроїв може складати від одиниць до десятків відсотків від загального числа. Не рахуватися з зручністю цих відвідувачів вже неможливо.
Зараз не достатньо просто мати сайт, який буде відмінно виглядати і функціонувати тільки на великих екранах. Потрібно, щоб він не втрачав своїх якостей і на екранах різних планшетів і смартфонів. Створювати для цих цілей окремий сайт для мобільних дівайсів не буде кращою ідеєю (складність синхронізації інформації, складність пізнання тощо).
Кроком у вірному напрямку стала концепція чуйного дизайну, коли сайт сам вміє належним чином підлаштовуватися (відгукуватися) під розмір екрану користувача. Робиться це шляхом подргрузки різних стилів оформлення CSS при перегляді сайту на екранах різних пристроїв. Наприклад, у разі монітора будуть подгружаться стилі реалізують три колонки, в разі планшета — з двома колонками, а при заході користувача зі смартфона той же самий сайт буде йому подаватися у вигляді одноколоночного макета.
Сам зміст і колірне оформлення сайту при цьому не змінюється, а змінюється лише спосіб групування інформаційних блоків (будуть меню зліва від основного вмісту або, припустимо, знизу). Чуйний дизайн вимагає більше зусиль від розробника, але завдяки фреймворку Bootstrap дана задача буде по плечу навіть не досвідченому в верстці вебмайстру.
Варто працювати з чуйним дизайном (використовуючи Bootstrap або його конкурентів)? Коли як. Все залежить від того, яку проблему ви збираєтеся вирішити. В принципі, питання дизайну клієнтської частини сайту можна вирішити кількома способами:
Ну, а третім варіантом, є компромісом між описаними вище, стане чуйний фреймворк (зокрема Бутстрап). Справа в тому, що при його використанні частина роботи вже буде зроблено за вас. Вам не потрібно буде думати про деяких окремих аспектах дизайну. Там вже буде матися досить гнучка сітка для розмітки сторінок (використовується LESS CSS — динамічний мова стилів).
Зовнішній вид Bootstrap ви зможете налаштувати на свій смак. Це неправда, коли кажуть, що сайти, зроблені на цьому фреймворку, виглядають однаково. Все залежить від вас самих — можливостей по наданню індивідуальності море, але багато хто просто з цим не заморочуються.
При використанні чуйного дизайну стильової код, правда, буде серйозно більше і складніше, ніж без нього, бо доводиться передбачати багато різних ситуацій з різним стильовим оформленням. Крім цього вам доведеться вивчити основи роботи з самим фреймворком, але зате потім ви зможете швидко зробити те, що вам потрібно (в тому числі і поставити цей процес на потік). Як говорилося у відомому мультфільмі: краще годину втратити, а потім за п’ять хвилин долетіти (ноги, лапи, хвіст). При цьому проект вийде високої якості.
Цей фреймворк дозволяє простим додавання класів (читайте про атрибути class і id) до елементів Html коду застосовувати до них дуже ефектне оформлення. Наприклад, ось так буде виглядати ваше таблиця при додаванні в тег Table класу «table table-hover»:
Стилі цього класу прописувати не потрібно, бо вони вже прописані у файлі стилів самого Бутстрапа. Дуже зручно і швидко. А так, наприклад, можна в два рахунки створювати кнопки зі звичайних тегів посилань або за допомогою тегів button, додаючи до них потрібні класи:
Так само можна за допомогою класів дуже легко створювати на основі тегів Html списків різні меню (елементи навігації, що випадають списки, пагінацію (нумерацію сторінок), спливаючі вікна, а так само підказки й багато іншого, що ви можете на цій сторінці офіційного сайту:
Ну, і, звичайно ж, верстка сторінок сайту з різним кількість колонок за допомогою цього фреймворку здійснюється буквально граючись — знову ж таки, звичайним додаванням контейнерів потрібних класів.
Викачуємо Бутстрап і вивчаємо його файлову структуру
Отже, скачати фреймворк Bootstrap 3 можна буде на офіційному сайті — GetBootstrap.com (є і неофіційне російське дзеркало mybootstrap.ru, де можна знайти докладний введення в роботу з цим фреймворком).
Відразу обмовлюся, що на вкладці «Customize» (у російській версії-це «Змінити і викачати») ви можете вибрати, які саме компоненти і jQuery плагіни вам потрібні, а також поміняти змінні, що відповідають за кольори, шрифти, форми і т. п. речі. Потім все це можна зберегти і завантажити Bootstrap з допомогою розташованої внизу кнопки.
Однак, найкращим варіантом, на мій погляд, буде розібратися в роботі цього фреймворку і міняти якісь параметри по ходу роботи. Тим більше, що ми починаємо вивчення з чистого аркуша, а значить нам знадобиться все, що в Бутстрипе є. Тому просто переходимо на сторінку завантаження стандартного пакету (вкладка «Getting started») і натискаємо на кнопку «Download Bootstrap»:
Після розпакування архіву ви виявите в ньому три папки: css, fonts і js. І це все, що вам потрібно для роботи з цим фреймворком. Хоча ні, ще вам знадобиться редактор Html і CSS коду (особисто я використовую Нотепад++, але у нього досить багато гідних конкурентів, не кажучи вже про онлайн редакторах).
Давайте подивимося, що лежить в папці CSS Бутстрипа. Зараз там шість файлів, хоча ще зовсім недавно було чотири. Насправді, це два набори по три файлу в кожному. Наприклад, файл bootstrap.css і bootstrap.min.css містять один і той же CSS код, але відрізняються тим, що код у файлі bootstrap.css легко читаємо, бо відформатований відповідним чином:
А код у файлі bootstrap.min.css стиснутий для зменшення розміру файлу (з нього вилучені всі пробіли, і переноси рядків — читайте про стиснення CSS для прискорення сайту) і він представляє з себе одну величезну рядок, читати яку досить важко.
Таким чином файл bootstrap.min.css стає на чверть легше файлу bootstrap.css без втрати функціоналу. Ну, а файл bootstrap.css.map з’явився в дистрибутиві Bootstrap 3 зовсім недавно. Наскільки мені дозволяє зрозуміти його призначення мій куций мозок — він дозволяє в інструментах для розробників (наприклад, вбудованих в браузер Хром або Файерфокс) працювати зі стисненим CSS кодом так, наче б він не був стиснутий. Загалом каламутна річ, яку я поки ще не осяг.
Теж саме можна сказати і про файли bootstrap-theme.css і bootstrap-theme.min.css. У другій версії Бутстрипа їх не було. Справа в тому, що Bootstrap 3 йде з так званим «плоским дизайном» (ніяких градієнтів, тіней тощо). Тому сюди додали власну тему в якості додаткових таблиць стилів, яку можна буде підключити окремо і додати додаткових елементів на свій сайт.
У папці Font зі складу Bootstrap 3 знаходиться чотири файлу зі шрифтами. Це один і той же шрифт, просто він представлений в чотирьох різних форматах. Ці шрифти підтримують доступні нам гліф іконки (серії іконок, які можна використовувати в дизайні). Як я вже згадував вище, у них можна міняти розмір (або кольору), оскільки вони являють собою векторну графіку. Детальніше про гліф іконках ще поговоримо.
У папці JS знаходяться два джава скрипт файлу bootstrap.js і bootstrap.min.js, які відрізняються лише тим, що з останнього видалені всі пробіли, і переноси рядків, з-за чого його код став практично не читається з точки зору людини, але нітрохи не втратив з точки зору браузера (машини). Ну і, природно, став легше. Крім цього файлика нам при роботі з Бутстрапом, швидше за все, доведеться використовувати ще кілька js файликів, але про це пізніше.
Підключаємо CSS і JS файли Бутстрапа до Html-файлу
Ось ми і обдивились всі файли, що йдуть в комплекті з цим фреймворком. Тепер можна починати використовувати його для створення першої Html сторінки, щоб зрозуміти всю красу даного процесу. Давайте для прикладу візьмемо звичайний порожній веб-документ з базовою розміткою (так звану «рибу»).
Заголовок сторінки
Сподіваюся, з цією структурою ви вже стикалися і розумієте, що !doctype допомагає браузеру зрозуміти, як інтерпретувати записаний нижче код, а теги head і body формують, відповідно, службову «голову» (те, що не виводиться на вебсторінці) і «тіло» (те, що безпосередньо буде відображатися на сторінці).
Просто скопіюйте в новий файлик, створений у вашому Html редакторі, наступний код і збережіть отриманий результат в папку з Bootstrap 3 з розширення Html і назвою index.html. Тобто він повинен лежати на тому ж рівні, що і папки css, fonts і js:
Тепер у «рибу» під назвою index.html додайте наступний мета-тег (між тегами head, наприклад, в районі meta charset):
Мета-тег viewport зазвичай завжди включають при роботі з чуйним дизайном. Навіщо він потрібен? Щоб правильно масштабувати екран. У цьому випадку не важливо, з якого саме пристрої на ваш сайт зайшов користувач (з великим екраном або маленьким) — веб-сторінка буде змінювати розмір в залежності від девайса.
Підключаємо таблицю стилів з папки Bootstrap
Після цього потрібно буде підключити до нашого Html документа CSS файл з арсеналу Bootstrap з допомогою тега службової гіперпосилання Link із зазначенням у ній відносного шляху до файлу bootstrap.min.css (у нього розмір менше).
Крім наявного в дистрибутиві Бутстрапа файлика стилів ми створимо ще один з нашими власними стилями, підключення якого можна буде відразу ж і прописати в «шапці» index.html.
Ну і, власне, варто створити порожній файлик manual.css і скопіювати його в папку CSS нашого фреймворка.
В результаті index.html буде виглядати приблизно так:
Заголовок сторінки
Підключаємо бібліотеку jQuery
Тепер можна приступати до підключення до нашого вебдокументу джава скрипт файлів. Вони нам потрібні, щоб файл index.html працював з Bootstrap 3. Одним з цих файлів буде js з самого фреймворку, а іншим — бібліотека jQuery. Давайте почнемо з неї. У своєму роді це теж фреймворк, який використовують повсюдно (CMS, фреймворках чуйного дизайну і багатьох сайтах інтернету).
Підключити бібліотеку jQuery до нашого Html документу можна двома способами — або завантажити бібліотеку до себе і послатися на неї, або використовувати мережу доставки бібліотеки jQuery (CDN). У першому випадку ви отримуєте гарантію, що поки ваш сайт працює дана бібліотека завжди буде підвантажена (ви не залежите від зовнішніх джерел, які теоретично можуть стати на час недоступними).
Перевага ж підключення jQuery через мережу CDN полягає в тому, що у користувача в кеші браузера вже може зберігатися файл цієї бібліотеки. Т. к. jQuery важить дуже навіть пристойно, то це дозволить вашому проекту відкриватися значно швидше в таких браузерах користувачів. Мережа доставки бібліотеки рідко буває в офлайні, тому ймовірність виникнення неприємностей через використання способу підключення через CDN вкрай низька.
Як все це реалізувати на практиці? Перейдіть на офіційну сторінку бібліотеки jQuery — jquery.com. Отже, якщо ви хочете завантажити цю бібліотеку, то клікніть по великій кнопці в правій частині екрана.
У jQuery є дві версії — 1.x і 2.x. Виходячи з підтримуваних браузерів зараз, напевно, краще все ж використовувати першу версію (вона підтримує IE 8, який все ще досить часто зустрічається на комп’ютерах користувачів мережі).
Код виклику джава скрипт файлів прийнято вставляти між тегами head. Але це не зовсім правильно. Краще виклик скриптів робити перед закриваючим тегом body. Чому? Справа в тому, що, наприклад, виклик файлів стильової розмітки необхідно зробити ще до або одночасно із завантаженням контенту, щоб він правильно відображався. А ось JS файли відповідають за функціональність сторінки, а не за її зовнішній вигляд. Значить до повної завантаження документа цей функціонал нам не знадобиться, тому і немає ніякої необхідності пхати виклик джава скрипт файлів між тегами Head.
Якщо ж виклик JS все-таки вставити в «голову», то доведеться чекати повної завантаження, щоб побачити сторінку. Складеться відчуття повільного завантаження сайту, а це серйозно знижує привабливість його у відвідувачів. А ось якщо виклик jQuery вставити в самому низу документа (перед закриваючим тегом Body), то вся інша інформація завантажиться до цієї бібліотеки. Складеться відчуття більш швидкого і чуйного сайту.
Універсальний код виклику jQuery (без завантаження цієї бібліотеки до себе на сервер) з використанням описаної вище мережі доставки бібліотеки jQuery (CDN) буде виглядати так:
Щоб відрізняти цей код від решти коду, який буде жити всередині тега Body, можете додати директиву Html коментаря з пояснюючим написом. Наприклад, так:
Підключаємо JS файл Бутстрапа і файл respond.js
Ну, а нам також потрібно буде підключити до нашого index.html JS файлик із складу Bootstrap 3 (краще той, у якому код стиснутий з метою зменшення розміру, тобто зі словом min в назві). Буде це справа виглядати так:
Напевно, зрозуміло, що якщо ви захочете бібліотеку jQuery завантажувати зі свого сервера, то її потрібно буде завантажити, помістити в папку JS і прописати для неї точно такий же код виклику, що і для bootstrap.min.js. Але все ж раджу брати її з CDN, як було показано трохи вище.
Врахуйте, що код виклику bootstrap.min.js потрібно буде ставити після виклику jQuery, бо він залежить від цієї бібліотеки і вона обов’язково повинна завантажуватися раніше його.
Так, ще нам залишилося підключити respond.js. Що це таке? Це скрипт, розроблений для того, щоб допомогти старим версіям Інтернет Експлорера зрозуміти Html 5 і вирішити інші проблеми сумісності з цим «дивним» браузером. Завантажити цей файлик можна звідси — там знову ж таки є стиснута і звичайна (читається очима) версії.
Просто кликніть по respond.min.js і у вікні, скопіюйте його код. Зробити це, правда, не так-то просто, бо він представляє з себе одну довжелезну рядок. На мій погляд, простіше буде натиснути на кнопку «Raw». В цьому випадку відкриється сторінка тільки з кодом файлу respond.min.js, який легко можна буде виділити і скопіювати, натиснувши Ctrl+A на клавіатурі:
Поміщений в буфер обміну код потрібно вставити в новий файл вашого Html редактора (у мене це Нотепад з двома плюсиками) та зберегти з назвою respond.min.js в папку JS складу Bootstrap 3.
У файлі index.html підключення respond.min.js буде виглядати як зазвичай:
Але є нюанс. Цей код потрібно буде вставити в «голову» документа, тобто між тегами head, бо так радять його розробники. В іншому випадку, в деяких старих версіях Експлорера, до моменту завантаження respond.min.js, користувачі можуть на секунду побачити не стилізований контент (просто неформатований і неразмеченный текст). От щоб цього уникнути і ставлять підвантаження respond.min.js раніше завантаження веб-сторінки.
В результаті підсумковий файл index.html у папці Bootstrap 3 буде виглядати приблизно так:
Заголовок сторінки
Тепер у нас є все для побудови сайту на Бутстрап. У нас є всі потрібні джава-скрипти та стилі, які ми підключили. Можна приступати до побудови сайту.
Продовження >>> (Ви можете підписатися на розсилку, щоб не пропустити)
А ось і продовження вийшло: Сіткова система в Bootstrap 3 і приклад роботи з нею — Частина 2 (але ви все одно підписуйтесь — буде ще багато цікавого і корисного).
Удачі вам! До зустрічей на сторінках блогу
