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

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

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

CDN-ссылки

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

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

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

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

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

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

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

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

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

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

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

Тип документа HTML5

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

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

Отзывчивый метатег

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

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

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

Размер коробки

Для более простого определения размера в 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 для исправления несоответствий между браузерами и устройствами, обеспечивая при этом несколько более точные сбросы для общих элементов HTML.

Сообщество

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

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

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