Доброго времени суток, дорогой читатель! Сегодня я покажу Вам как подключить популярный среди веб-мастеров Framework Bootstrap. Используя его Вы можете забыть о проблемах адаптации шаблона под различные виды устройств. Также этот framework содержит много вкусных и интересных HTML + CSS компонентов и плагинов jQuery. К примеру навигация по сайту, выпадающее меню, модальное окно, карусель изображений, галерею изображений, вывод информационных сообщений, как показано ниже и многое другое.

Обо всех сладостях Вы можете ознакомится на официальном сайте.

Установка Bootstrap FrameWork

На официальном сайте, который я указал выше, перейдите по ссылке в верхнем меню "Getting started" или нажмите на кнопку "Download" на главной странице. На этой странице представленный 3 вида пакетов для скачивания:

  • Bootstrap — базовый пакет, который содержит самые основные файлы фреймворка.
  • Source code — пакет, который содержит различные плагины jQuery в отдельности, файлы LESS и документацию с примерами.
  • Sass — комплект файлов-стилей, использующих технологию SASS.

Для нормальной функциональности нам хватит и базового пакета, т.к. все jQuery плагины находятся в едином файле bootstrap.js и все стили в bootstrap.css. Структура и состав пакета:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Скачиваем и располагаем Bootstrap в папку с сайтом. Чтобы воспользоваться красотой фреймворка нам осталось только подключить его. Между тэгами <head></head> подключаем стили:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/_путь_до_css/css/bootstrap.min.css">

Для небольшой красоты можно подключить и оригинальную тему от Bootstrap, но можно и не подключать. к примеру я ее не использую.

<!-- Optional theme -->
<link rel="stylesheet" href="/_путь_до_css/css/bootstrap-theme.min.css">

Теперь, где-нибудь в конце страницы до тэга </body> подключаем скрипты jQuery:

<!-- Bootstrap JavaScript -->
<script src="/_путь_до_js/js/bootstrap.min.js"></script>

В итоге у Вас должно получиться что-то похожее на:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

На этом рассказ о подключении (внедрении) фреймворка закончен. Пользуйтесь и совершенствуйтесь, до новых встреч!

Если у Вас появились ко мне вопросы по данной статье, задавайте их в комментариях ниже.