Bootstrap использует собственные файлы CSS и JavaScript, на которые вам необходимо указать ссылку. Вы можете сделать это с помощью кода ниже.
Bootstrap 5 не использует jQuery (предыдущие версии Bootstrap его использовали).
Быстрый старт: Шаблон Bootstrap 5
Вы можете использовать следующий шаблон в качестве основы ваших веб-страниц на Bootstrap 5. Этот шаблон содержит необходимый <!DOCTYPE>, ссылки на файлы CSS и JS, а также теги <meta>.
<!doctype html>
<html lang="ru">
<head>
<!-- Обязательные метатеги -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<title>Привет, мир!</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Здесь размещается содержимое…</p>
<!-- Необязательный JavaScript; выберите один вариант из двух -->
<!-- Вариант 1: Набор Bootstrap с Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<!-- Вариант 2: Отдельные Popper и Bootstrap -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
-->
</body>
</html>
Если шаблон нужен не весь, то вы можете скопировать и вставить ссылки на каждый отдельный файл, как показано ниже.
Файлы CSS и JavaScript
Поместите следующий код таблицы стилей в раздел <head> документа:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
Разместите следующие JavaScript-файлы в нижней части документа (непосредственно перед закрывающим тегом <body>):
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
Этот код объединяет Bootstrap и Popper в один файл.
В качестве альтернативы вы можете разделить Popper и Bootstrap на два JavaScript-файла, например, так:
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
crossorigin="anonymous"></script>
Стандарты дизайна и разработки
Чтобы получить максимальную отдачу от Bootstrap 5, убедитесь, что ваши страницы включают следующие стандарты.
Доктайп HTML5
Ваши HTML-документы должны начинаться со следующей декларации <!DOCTYPE>:
<!DOCTYPE html>
<html lang="ru">
...
</html>
Добавьте тег <meta>
Чтобы обеспечить правильное отображение и масштабирование на мобильных устройствах, добавьте в раздел <head> тег <meta>, как показано ниже:
<meta name="viewport" content="width=device-width, initial-scale=1">