На GitHub

Начать работу с Bootstrap

Bootstrap — это мощный, многофункциональный интерфейсный инструментарий. Создавайте что угодно — от прототипа до продакшена — за считанные минуты.

На этой странице

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

Начните с включения готовых CSS и JavaScript Bootstrap через CDN без каких-либо шагов по сборке. Посмотрите это на практике с помощью этой демонстрации Bootstrap CodePen.

Создайте новый файл index.html в корне вашего проекта. Включите также тег <meta name="viewport"> для правильного отзывчивого поведения на мобильных устройствах.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Демо Bootstrap</title>
  </head>
  <body>
    <h1>Привет мир!</h1>
  </body>
</html>

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

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Демо Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
  </head>
  <body>
    <h1>Привет мир!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" 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.5/dist/js/bootstrap.min.js" integrity="sha384-VQqxDN0EQCkWoxt/0vsQvZswzTHUVOImccYmSyhJTp7kGtPed0Qcx8rK9h9YEgx+" crossorigin="anonymous"></script>

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

CDN ссылки

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

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

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

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

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

JS компоненты

Любопытно, какие компоненты явно требуют нашего JavaScript и Popper? Если вы совсем не уверены в общей структуре страницы, продолжайте читать пример шаблона страницы.

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

Важные глобальные переменные

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

HTML5 doctype

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

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

Viewport meta

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.
Обсуждайте, задавайте вопросы и многое другое в сообществе Discord или подреддите Bootstrap.
Общайтесь с другими Bootstrappers в IRC. На сервере irc.libera.chat, в канале #bootstrap.
Помощь по внедрению можно найти на Stack Overflow (с тегом bootstrap-5).
Разработчикам следует использовать ключевое слово bootstrap в пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной обнаруживаемости.

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