Як підключити бутстрап?

37

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

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

Викачуємо фреймворк

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

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

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

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

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

Відмінно, після скачивайте розархівуйте архів і перейдіть у папку. В кінцевій папці ви побачите три каталогу – css, js і fonts. Ці три директорії і потрібно буде скопіювати в папку вашого проекту.

Перед цим ви можете проглянути всі ці папки. В першу чергу, папку css. В ній лежить 2 css-файлу і їх минифицированные версії. Це bootstrap.css і bootstrap-theme.css. Відповідно, перший з кодом самого фреймворка. А другий призначений для темізаціі. В обох файлів є, як я вже сказав, минифицированные версії. Вони важать на 10-15% менше за рахунок того, що код в них розміщено в один рядок.

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

Далі у нас папку fonts. У ній міститься иконочный шрифт bootstrap, завдяки якому ви абсолютно без проблем зможете додавати на веб-сторінці понад 200 іконок, змінювати їх розміри і колір. По суті, це картинки, якими можна дуже шибко керувати. При збільшенні розмірів якість іконок не стає гірше, так як вони векторні, тобто svg формату.

У папці js міститься файл, необхідний для роботи всіх javascript-компонентів, які закладені в фреймворк. Наприклад, це модальні вікна, таби і підказки. Добре, трохи з вмістом ми розібралися, час переходити безпосередньо до підключення.

Підключення Bootstrap

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

Відмінно, тим потрібно створити файл index.html. Я зроблю це за допомогою редактора Notepad++. Стоп-стоп, може ви вже за звичкою почали писати початкову html-розмітку, не потрібно цього робити, зараз ми вставимо все готове. Прокрутіть сторінку Getting Started нижче, там ви побачите Basic Template, тобто базовий шаблон html-сторінки.

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

Відразу бачимо, що використовується доктайп, характерний для html5. В тегу html бачимо параметр lang, можете змінити його з en на ru.

Далі починається секція head, в ній задається кодування сторінки. Наступні рядки досить важливі, ні в якому разі їх не видаляйте. Там, де бачите IE-edge – це рядок коду, яка забезпечує коректну роботу фреймворку разом з браузером IE.

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

Ну а далі у нас починається безпосередньо підключення файлів фреймворка. До речі, всі коментарі, які є на скріншоті вище (вони виділені сірим кольором), ви можете видалити, крім чотирьох рядків, які починаються зі слів if it IE 9 і закінчуються endif. Ці рядки потрібні нам для того, щоб для браузера IE завантажувались додаткові файли з зовнішнього сховища, які забезпечать підтримку адаптивності та елементів html5.

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

Javascript-файли же підключаються перед закриваючим тегом body. Як бачите, тут підключається не тільки сам фреймворк bootstrap, але і бібліотека jquery. Справа в тому, що для коректної роботи фреймворку ця бібліотека потрібна і вона підключається до зовнішнього сховища.

Як мені перевірити, підключився чи фреймворк?

Все дуже просто. Відкрийте наш index.html в будь-якому браузері, якщо ви побачите там таке, то все працює:

Якщо б ви допустили якісь помилки при підключенні фреймворку, то зовнішній вигляд заголовка був би таким:

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

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

Ура, я підключив Bootstrap!

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

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

Нижче на цій же сторінці написано ще дуже багато всього. Наприклад, як встановити фреймворк в Bower, Grunt, ще нижче даються посилання на приклади використання абсолютно всіх компонентів фреймворка.

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

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

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

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