Nbcomputers

Как подключить Bootstrap на сайт 5/5 (2)

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

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>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
Перед закрывающимся тегом </body> подключаем библиотеку jquery и bootstrap.min.js.
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<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> сначала подключаем файл стилей:

<link rel="stylesheet"
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://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>

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

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

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


Добавить комментарий

Ваш e-mail не будет опубликован.