Як підключити bootstrap до сайту

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

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

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

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

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

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

вміст фреймворка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі