Быстрый старт
Хотите быстро добавить Bootstrap в свой проект? Используйте BootstrapCDN, бесплатно предоставляемый ребятами из StackPath. Используете менеджер пакетов или вам нужно скачать исходные файлы? Перейдите на страницу загрузок.
CSS
Скопируйте и вставьте таблицу стилей <link>
в <head>
перед всеми другими таблицами стилей, чтобы загрузить наш CSS.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
JS
Многие из наших компонентов требуют использования JavaScript для работы. В частности, для них требуются наши собственные плагины JavaScript и Popper.js. Поместите следующие <script>
в конце страниц, прямо перед закрывающим тегом </body>
, чтобы включить их. Сначала должен быть Popper.js, а затем наши плагины JavaScript.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
Если вы используете <script type="module">
, обратитесь к разделу посвященному использованию Bootstrap в качестве модуля.
Интересно, какие компоненты явно требуют нашего JavaScript и Popper.js? Щелкните ссылку "Показать компоненты" ниже. Если вы совсем не уверены в общей структуре страницы, продолжайте читать, чтобы найти образец шаблона страницы.
Наши bootstrap.bundle.js
и bootstrap.bundle.min.js
включают Popper. Для получения дополнительной информации о том, что включено в Bootstrap, см. Наш раздел содержимого.
Показать компоненты, требующие JavaScript
- Оповещения об увольнении (Alerts)
- Кнопки для переключения состояний и функции флажка / радио
- Карусель для любого поведения слайдов, элементов управления и индикаторов
- Свернуть для переключения видимости содержимого (Collapse)
- Выпадающие списки (Dropdowns) для отображения и позиционирования (также требуется Popper.js)
- Модальные окна для отображения, позиционирования и прокрутки
- Navbar для расширения нашего плагина Collapse для реализации адаптивного поведения
- Всплывающие подсказки и всплывающие окна для отображения и позиционирования (также требуется Popper.js)
- Scrollspy для поведения прокрутки и обновлений навигации
Стартовый шаблон
Убедитесь, что ваши страницы настроены в соответствии с последними стандартами дизайна и разработки. Это означает использование документа HTML5 и включение метатега области просмотра для правильного реагирования. Соберите все это вместе, и ваши страницы должны выглядеть так:
<!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.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Необязательный JavaScript; выберите один из двух! -->
<!-- Вариант 1: пакет Bootstrap с Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Вариант 2: отдельные JS для Popper и Bootstrap -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
-->
</body>
</html>
Это все, что вам нужно для выполнения общих требований к странице. Посетите документацию или наши официальные примеры, чтобы начать размещать контент и компоненты вашего сайта.
Важные глобалы
Bootstrap использует несколько важных глобальных стилей и настроек, о которых вам нужно знать при его использовании, и все они почти исключительно направлены на нормализацию кросс-браузерных стилей. Давайте погрузимся.
HTML5 doctype
Bootstrap требует использования документа типа HTML5. Без него вы увидите несколько забавных неполных стилей, но его включение не должно вызывать каких-либо серьезных сбоев.
<!doctype html>
<html lang="ru">
...
</html>
Адаптивный метатег
Bootstrap разрабатывается в первую очередь для мобильных устройств. Это стратегия, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости с помощью медиа-запросов CSS. Чтобы обеспечить надлежащий рендеринг и масштабирование касанием для всех устройств, добавьте метатег адаптивного окна просмотра к вашему <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Вы можете увидеть пример этого в действии в стартовом шаблоне.
Box-sizing
Для упрощения настройки размеров в CSS мы переключаем глобальное box-sizing
значение с content-box
на border-box
. Это гарантирует, что padding
это не повлияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторым сторонним программным обеспечением, таким как Карты Google и Система пользовательского поиска Google.
В редких случаях, когда вам нужно переопределить его, используйте что-то вроде следующего:
.selector-for-some-widget {
box-sizing: content-box;
}
В приведенном выше фрагменте все вложенные элементы, включая сгенерированный контент с помощью ::before
и ::after
будут наследовать указанные box-sizing
для этого .selector-for-some-widget
.
Узнайте больше о блочной модели и ее размерах на сайте CSS Tricks.
Reboot (перезагрузка)
Для улучшения кроссбраузерности рендеринга мы используем Reboot чтобы исправить несоответствия между браузерами и устройствами, обеспечивая при этом несколько более самоуверенный сброс до общих HTML элементов.
Сообщество
Будьте в курсе развития Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов.
- Следуйте @getbootstrap on Twitter.
- Прочтите и подпишитесь на The Official Bootstrap Blog.
- Join the official Slack room.
- Chat with fellow Bootstrappers in IRC. On the
irc.freenode.net
server, in the##bootstrap
channel. - Справку по реализации можно найти на сайте Stack Overflow (с тегами
bootstrap-4
). - Разработчики должны использовать ключевое слово
bootstrap
в пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной обнаружимости.
Вы также можете подписаться на @getbootstrap в Twitter, чтобы следить за последними сплетнями и классными музыкальными клипами.