Перейти к основному содержанию Перейти к навигации по документам
Cмотреть на GitHub

Начните работу с Bootstrap

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

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

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

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


  1. Создайте новый файл 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>

  2. Включите 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.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" 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.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

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

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

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

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

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

JS компоненты

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

  • Уведомления (Alerts) для отклонений
  • Кнопки (Buttons) для переключения состояний и функциональности флажка/радио
  • Карусель (Carousel) для всех режимов слайдов, элементов управления и индикаторов
  • Коллапс (Collapse) для переключения видимости содержимого
  • Выпадающие списки (Dropdowns) для отображения и позиционирования (также требуется Popper)
  • Модальные окна (Modals) для отображения, позиционирования и поведения прокрутки
  • Панель навигации (Navbar) для расширения наших плагинов Collapse и Offcanvas для реализации адаптивного поведения
  • Навигация (Navs) с плагином Tab для переключения панелей содержимого
  • Offcanvases для отображения, позиционирования и поведения прокрутки
  • Отслеживание прокрутки (Scrollspy) для поведения прокрутки и обновлений навигации
  • Тосты (Toasts) для отображения и отклонения
  • Всплывающие подсказки (Tooltips) и Всплывающие окна (Popovers) для отображения и позиционирования (также требуется Popper)

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

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 Maps и Google Custom Search Engine.

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

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

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

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

Reboot (библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)

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

Сообщество

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

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

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