Twitter Bootstrap – универсальный инструментарий, включающий в себя css, html и javascript– библиотеки, с помощью которых можно быстро создавать адаптивные сайты любой степени сложности.
Также Bootstrap станет отличным помощником, если у вас интернет-страница, которая нуждается в апгрейде. Интеграция устаревшего веб-портала с Bootstrap откроет огромные возможности для расширения его функционала, обновления дизайна и улучшения юзабилити.
Блочная верстка, различные кнопки и формы обратной связи, всплывающие окна, выпадающие меню, подсказки и всевозможные элементы навигации – фреймворк от Twitter позволит быстро реализовать любую идею. Все, что потребуется для этого сделать – подключить Bootstrap к вашему ресурсу.
Как же это осуществить?
Для того, чтобы подключить Twitter Bootstrap к веб – странице, понадобится выполнить несколько простых шагов:
- Скачать фреймворк по этой ссылке.
- Распаковать папку с файлами на жесткий диск или в корень вашего сайта.
В папке после распаковки вы увидите следующую структуру файлов:
Папка 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> сайта все необходимые файлы, для чего прописываем там следующие строчки:
<script type=”text/javascript” src=”js/jquery.min.js”></script>
<script type=”text/javascript” src=”js/bootstrap.min.js”></script>
<link rel=”stylesheet” href=”css/bootstrap.min.css”>
</head>
Необходимо внимательно проверить пути подключаемых файлов и в строке
<script type=”text/javascript” src=”js/jquery.min.js”></script>
не забыть прописать версию jquery.
Чтобы проверить работу фреймворка, пропишите код какого-нибудь bootstrap-элемента, например кнопки:
<button class=”btn btn-warning” type=”button”>Кнопочка</button>
Если кнопка появилась, значит Bootstrap успешно подключен!
