Подключить со скачиванием библиотеки
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> сайта файл стилей:
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
Необходимо внимательно проверить пути подключаемых файлов и версию jquery в строке
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
Подключить без скачивания библиотеки
Подключить фреймворк к вашему ресурсу так же можно без скачивания файлов. Для этого в хедере сайта между тегами <head></head> сначала подключаем файл стилей:
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Перед закрывающимся тегом </body> подключаем библиотеку jquery и bootstrap.min.js:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
Чтобы проверить работу фреймворка, можно прописать код какого-нибудь bootstrap-элемента, например кнопки:
Если кнопка появилась, значит Bootstrap успешно подключен!
