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

подключить 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> сайта  все необходимые файлы, для чего прописываем там следующие строчки:

<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 успешно подключен!


Оставить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *