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

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

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

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

Начните работу, включив готовые к продакшену 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.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" 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.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>

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

Ссылки CDN

Для справки вот наши основные ссылки CDN.

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

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

При использовании ссылок CDN обязательно используйте атрибут integrity для проверки правильных файлов и версий. Эти хеши уникальны для каждого файла и версии Bootstrap, поэтому при обновлении до новой версии убедитесь, что атрибут integrity также обновлен.

Мы также включаем атрибут crossorigin="anonymous" для предотвращения ошибок CORS.

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

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

JS-компоненты

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

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

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

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

HTML5 doctype

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

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

Viewport meta

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

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