Начало работы с Bootstrap 4
Bootstrap использует свои собственные файлы CSS и JavaScript, на которые нужно ссылаться. Вы также должны убедиться, что ваша страница содержит несколько стандартных элементов, как описано ниже.
Файлы CSS и JavaScript
Вы можете напрямую ссылаться на файлы через Bootstrap CDN (Content Delivery Network, Сеть доставки контента). Все плагины Bootstrap используют jQuery, поэтому нужно убедиться, что он тоже включён.
Вставьте следующий код внутрь <head> документа.
<!-- Последний скомпилированный и минимизированный Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
Вставьте следующие JavaScript-файлы вниз документа (перед закрывающим тегом <body>).
<!-- Библиотека jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<!-- Popper.js для всплывающих подсказок -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<!-- Последний скомпилированный и минимизированный Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
Стандарты дизайна и разработки
Чтобы получить максимальную отдачу от Bootstrap 4, убедитесь, что ваши страницы включают в себя следующее.
<!DOCTYPE> HTML5
Ваши HTML-документы должны начинаться с объявления <!DOCTYPE> HTML5. Вот так.
<!DOCTYPE html>
<html lang="ru">
...
</html>
Добавьте метатег viewport
Чтобы обеспечить правильное отображение и масштабирование на мобильных устройствах, добавьте метатег viewport. Вроде этого.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Вы можете (не обязательно) отключить возможность масштабирования на мобильных устройствах, добавив user-scalable=no в список значений content. Однако это не рекомендуется.
Быстрый старт: шаблон Bootstrap 4
Вы можете использовать следующий шаблон в качестве основы для своих веб-страниц Bootstrap 4. Этот шаблон содержит необходимый <!DOCTYPE>, ссылки на файлы CSS и JS, а также метатег viewport.
<!-- Доктайп -->
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Пример шаблона Bootstrap</title>
<meta charset="utf-8">
<!-- Метатег Viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
</head>
<body>
<!-- Ваше содержимое начинается здесь -->
<!-- Ваше содержимое заканчивается здесь -->
<!-- JavaScript: размещается в конце документа, чтобы страницы загружались быстрее -->
<!-- Библиотека jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<!-- Popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<!-- Последний скомпилированный и минимизированный Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
