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

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

Установка FrameWork Bootstrap 4

Установка Bootstrap 4 схожа с установкой Bootstrap 3, хотя сам фреймворк претерпел множество изменений.

Чтобы скачать фреймворк, перейдите на официальный сайт, который я указал выше, нажмите на кнопку "Download" на главной странице, а затем на кнопку "Download Source". Скачается архив, содержащий все стили, фоны и js плагины, которые можно будет использовать в шаблоне сайта. Нажав на главной странице на кнопку "Get started" вы попадете на страницу, где указаны альтернативные виды установки Bootstrap.

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

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

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

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

и Bootstrap:

<!-- 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://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

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

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