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

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

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

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

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 demo</title>
  </head>
  <body>
    <h1>Привет, мир!</h1>
  </body>
</html>

2. Включите 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 demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <h1>Привет, мир!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

Вы также можете включить Popper и bootstrap 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.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>

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

Ссылки CDN

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

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

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

Хотите быстро добавить Bootstrap в свой проект? Используйте BootstrapCDN, бесплатно предоставляемый ребятами из StackPath. Используете менеджер пакетов или вам нужно скачать исходные файлы? Перейдите на страницу загрузок.

Если вы используете <script type="module">, обратитесь к разделу посвященному использованию Bootstrap в качестве модуля.

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

Наши bootstrap.bundle.js и bootstrap.bundle.min.js включают Popper. Для получения дополнительной информации о том, что включено в Bootstrap, см. Наш раздел содержимого.

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

Оповещения об увольнении (Alerts)
Кнопки для переключения состояний и функции флажка / радио
Карусель для любого поведения слайдов, элементов управления и индикаторов
Свернуть для переключения видимости содержимого (Collapse)
Выпадающие списки (Dropdowns) для отображения и позиционирования (также требуется Popper.js)
Модальные окна для отображения, позиционирования и прокрутки
Navbar для расширения нашего плагина Collapse для реализации адаптивного поведения
Всплывающие подсказки и всплывающие окна для отображения и позиционирования (также требуется Popper.js)
Scrollspy для поведения прокрутки и обновлений навигации

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

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

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 и Система пользовательского поиска Google.

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

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

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

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

Reboot (перезагрузка)

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

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