Начало работы с Bootstrap 4


Bootstrap использует свои собственные  CSS и jаvascript файлы, на которые нужно ссылаться. Вы также должны убедиться, что ваша страница содержит несколько стандартных элементов, для работы бутстрап.


Файлы CSS и jаvascript

Вы можете напрямую ссылаться на файлы через Bootstrap CDN (Content Delivery Network, Сеть доставки контента). Все плагины Bootstrap используют jQuery, поэтому нужно убедиться, что он тоже включён в шаблон.

Вставьте следующий код внутрь <head> документа.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Вставьте следующие jаvascript-файлы вниз документа (перед закрывающим тегом <body>).
<!-- Библиотека jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<!-- Popper.js для всплывающих подсказок -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<!-- Последний скомпилированный и минимизированный Bootstrap jаvascript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


Стандарты дизайна и разработки

Чтобы получить максимальную отдачу от Bootstrap 4, убедитесь, что ваши 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>

  <!-- Ваше содержимое начинается здесь -->

  <!-- Ваше содержимое заканчивается здесь -->

  <!-- jаvascript: размещается в конце документа, чтобы страницы загружались быстрее -->
    <!-- Библиотека 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 jаvascript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
      crossorigin="anonymous"></script>
  </body>
</html>