Bootstrap

Быстрый старт

Начните работу, включив готовую к использованию CSS и JavaScript Bootstrap через CDN без необходимости каких-либо этапов сборки. Посмотрите пример на этом демо Bootstrap CodePen.

Создайте новый index.html файл в корне вашего проекта. Включите также тег <meta name="viewport"> для правильного адаптивного поведения на мобильных устройствах.
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
```

Включите CSS и JS Bootstrap. Разместите тег <link> в <head> для нашего CSS и тег <script> для нашего JavaScript пакета (включая Popper для позиционирования выпадающих меню, всплывающих подсказок и подсказок инструментов) перед закрывающим тегом </body>. Узнайте больше о наших ссылках CDN.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
  </body>
</html>

Вы также можете включить Popper и наш JS по отдельности. Если вы не планируете использовать выпадающие меню, всплывающие подсказки или подсказки инструментов, сохраните несколько килобайтов, не включая Popper.

<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.1/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>

Привет, мир! Откройте страницу в вашем браузере, чтобы увидеть вашу страницу Bootstrap. Теперь вы можете начать разработку с Bootstrap, создав свой собственный макет, добавив десятки компонентов и используя наши официальные примеры.

Ссылки CDN

В качестве справки, вот наши основные ссылки CDN.

Описание	URL
CSS	`https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js`

Вы также можете использовать CDN для получения любого из наших дополнительных билдов, перечисленных на странице «Содержание».

Следующие шаги

Прочитайте немного больше о некоторых важных глобальных настройках среды, которые использует Bootstrap.
Прочитайте о том, что включено в Bootstrap в нашем разделе содержания и список компонентов, требующих JavaScript, приведенный ниже.
Нужен немного больше возможностей? Рассмотрите возможность сборки с Bootstrap, включив исходные файлы через менеджер пакетов.
Вы хотите использовать Bootstrap как модуль с <script type="module">? Обратитесь к нашему разделу использование Bootstrap как модуля.

Компоненты, требующие JS

Хотите узнать, какие компоненты явно требуют наш JavaScript и Popper? Щёлкните ссылку «Показать компоненты» ниже. Если вы вообще не уверены в общей структуре страницы, продолжайте чтение, чтобы получить пример шаблона страницы.

Показать компоненты, требующие JavaScript

Уведомления для закрытия
Кнопки для переключения состояний и функциональности чекбоксов/радиокнопок
Карусель для всех действий слайдов, управления и индикаторов
Свернуть для переключения видимости содержимого
Выпадающие меню для отображения и позиционирования (также требует Popper)
Модальные окна для отображения, позиционирования и поведения прокрутки
Панель навигации для расширения наших плагинов Collapse и Offcanvas для реализации адаптивного поведения
Навигационные панели с плагином Tab для переключения панелей содержимого
Offcanvas для отображения, позиционирования и поведения прокрутки
Scrollspy для поведения прокрутки и обновлений навигации
Toastы для отображения и закрытия
Подсказки и всплывающие подсказки для отображения и позиционирования (также требует Popper)

Важные глобальные настройки

Bootstrap использует несколько важных глобальных стилей и настроек, все из которых практически исключительно направлены на нормализацию стилей разных браузеров. Давайте углубимся.

HTML5 doctype

Bootstrap требует использования HTML5 doctype. Без него вы увидите некоторые странные и неполные стили.

<!doctype html>
<html lang="en">
  ...
</html>

Мета-тег viewport

Bootstrap разработан с мобильной первой стратегией, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости, используя CSS-запросы медиа. Чтобы обеспечить правильное отображение и масштабирование касания для всех устройств, добавьте мета-тег адаптивного просмотра в ваш <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Вы можете увидеть пример этого в действии в быстром запуске.

Box-sizing

Для более простого масштабирования в CSS мы изменяем глобальное значение box-sizing со значения content-box на border-box. Это гарантирует, что padding не влияет на окончательную вычисленную ширину элемента, но это может вызвать проблемы с некоторыми сторонними программами, такими как Google Maps и Google Custom Search Engine.

В редких случаях, когда вам нужно его переопределить, используйте что-то вроде следующего:

.selector-for-some-widget {
  box-sizing: content-box;
}

С приведенным фрагментом вложенные элементы — включая сгенерированное содержимое с помощью ::before и ::after — будут наследовать указанное значение box-sizing для данного .selector-for-some-widget.

Узнайте больше о модели и масштабировании бокса на CSS Tricks.

Reboot

Для улучшенного кроссбраузерного отображения мы используем Reboot для исправления несоответствий между браузерами и устройствами, предоставляя несколько более четкие сбросы для общих HTML-элементов.

Сообщество

Будьте в курсе разработки Bootstrap и свяжитесь с сообществом с помощью этих полезных ресурсов.

Читать и подписываться на Официальный блог Bootstrap.
Задавать вопросы и исследовать наши обсуждения на GitHub.
Пообщайтесь с другими пользователями Bootstrap в IRC. На сервере irc.libera.chat в канале #bootstrap.
Помощь по реализации может быть найдена на Stack Overflow (метки bootstrap-5).
Разработчики должны использовать ключевое слово bootstrap в пакетах, которые изменяют или добавляют функциональность Bootstrap, при распространении через npm или аналогичные механизмы доставки для максимальной обнаруживаемости.

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

© 2011–2022 Twitter, Inc.
© 2011–2022 The Bootstrap Authors
Code licensed under the MIT License.
Documentation licensed under the Creative Commons Attribution License v3.0.
https://getbootstrap.com/docs/5.3/getting-started/introduction/