Как подключить Bootstrap на сайт

Содержание

Подключить со скачиванием библиотеки

Twitter Bootstrap - универсальный инструментарий, включающий в себя css, html и javascript- библиотеки, с помощью которых можно быстро создавать адаптивные сайты любой степени сложности.

Также Bootstrap станет отличным помощником, если у вас интернет-страница, которая нуждается в апгрейде. Интеграция устаревшего веб-портала с Bootstrap откроет огромные возможности для расширения его функционала, обновления дизайна и улучшения юзабилити.

Блочная верстка, различные кнопки и формы обратной связи, всплывающие окна, выпадающие меню, подсказки и всевозможные элементы навигации - фреймворк от Twitter позволит быстро реализовать любую идею. Все, что потребуется для этого сделать - подключить Bootstrap к вашему ресурсу.

Как же это осуществить?

Для того, чтобы подключить Twitter Bootstrap к веб - странице, понадобится выполнить несколько простых шагов:

1. Скачать фреймворк по этой ссылке.

2. Распаковать папку с файлами на жесткий диск или в корень вашего сайта.

В папке после распаковки вы увидите следующую структуру файлов:

Папка CSS:

bootstrap.css
bootstrap.min.css
bootstrap-theme.css
bootstrap-theme.min.css

Папка Fonts:

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

Папка JS:

bootstrap.js
bootstrap.min.js

Из всего вышеперечисленного нам необходимы только javascript - файл bootstrap.min.js, обеспечивающий работу плагинов фреймворка, и файл стилей bootstrap.min.css, отвечающий за визуальное отображение и внешний вид всех компонентов.

Почему подключаются min- версии файлов? Потому что они меньше весят, т. к. код в них скомпилирован, что положительно скажется на времени загрузки сайта.

В папке Fonts находятся файлы иконочного шрифта FontAwesome, который можно будет подключить позже по мере необходимости, т.к. на работу фреймворка он никак не влияет.

3. После распаковки архива загружаем файлы bootstrap.min.css и bootstrap.min.js в папки CSS и JS вашего веб-проекта. Если у вас на хостинге в корне сайта нет таких папок, их необходимо создать.

4. Для работы плагинов необходимо скачать последнюю версию библиотеки jquery и загрузить её в папку JS.

5. После всех проделанных манипуляций подключаем в разделе <head> сайта файл стилей:

Перед закрывающимся тегом </body> подключаем библиотеку jquery и bootstrap.min.js.

Необходимо внимательно проверить пути подключаемых файлов и версию jquery в строке

<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>

Подключить без скачивания библиотеки

Подключить фреймворк к вашему ресурсу так же можно без скачивания файлов. Для этого в хедере сайта между тегами <head></head> сначала подключаем файл стилей:

Перед закрывающимся тегом </body> подключаем библиотеку jquery и bootstrap.min.js:

Чтобы проверить работу фреймворка, можно прописать код какого-нибудь bootstrap-элемента, например кнопки:

<button class="btn btn-warning" type="button">Кнопочка</button>

Если кнопка появилась, значит Bootstrap успешно подключен!