Перейти к основному содержанию Перейти к навигации по документам
Check
Новое в версии 5.2 Переменные CSS, отзывчивый offcanvas, новые утилиты и многое другое! Bootstrap

Быстрые, адаптивные сайты с Bootstrap

Мощный, расширяемый и многофункциональный интерфейсный инструментарий. Создавайте и настраивайте с помощью Sass, используйте готовую систему сеток и компоненты и воплощайте проекты в жизнь с помощью мощных плагинов JavaScript.

Текущая версия v5.2.1 · Скачать · v4.6.x · Все релизы

Начните как вам удобно

Приступая к работе с Bootstrap — используйте CDN, установите его с помощью диспетчера пакетов или загрузите исходный код.

Прочтите документацию по установке

Установка через менеджер пакетов

Установите исходные файлы Sass и JavaScript для Bootstrap через npm, RubyGems, Composer или Meteor. Установка, управляемая пакетами, не включает документацию или наши полные сценарии сборки. Вы также можете использовать наш репозиторий шаблонов npm для быстрого создания проекта Bootstrap с помощью npm.

npm install bootstrap@5.2.1
gem install bootstrap -v 5.2.1

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

Подключение через CDN

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

<!-- Только CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!-- Пакет JavaScript с Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"crossorigin="anonymous"></script>
%!(EXTRA template.HTMLAttr=sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8)

Ознакомьтесь с нашими руководствами по началу работы

Узнайте, как включить исходные файлы Bootstrap в новый проект с помощью наших официальных руководств.

Настройка с помощью Sass

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

Узнайте больше о настройке

Включите все Sass из Bootstrap

Импортируйте одну таблицу стилей, и вы отправитесь в гонку со всеми функциями нашего CSS.

// Переопределение переменных first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Затем импортируйте Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

Узнайте больше о наших глобальных опциях Sass.

Включите только то, что вам нужно

Самый простой способ настроить Bootstrap — включить только тот CSS, который вам нужен.

// Функции first
@import "../node_modules/bootstrap/scss/functions";

// Переменные переопределяют вторую
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Обязательный импорт Bootstrap
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Дополнительные компоненты
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";

Узнайте больше об использовании Bootstrap с Sass.

Творите в режиме реального времени с помощью CSS-переменных

Bootstrap 5 развивается с каждым выпуском чтобы лучше использовать переменные CSS для глобальных стилей тем, отдельных компонентов и даже утилит. Мы предоставляем десятки переменных для цветов, стилей шрифтов и многого другого на уровне :root для использования где угодно. В компонентах и утилитах переменные CSS привязаны к соответствующему классу и могут быть легко изменены.

Узнайте больше о переменных CSS

Использование CSS-переменных

Используйте любую из наших глобальных переменных :root для написания новых стилей. Переменные CSS используют синтаксис var(--bs-variableName) и могут наследоваться дочерними элементами.

.component {
  color: var(--bs-gray-800);
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-gray-200);
  border-radius: .25rem;
}

.component-header {
  color: var(--bs-purple);
}

Кастомизация через CSS-переменные

Переопределите глобальные, компонентные или утилитные переменные класса, чтобы настроить Bootstrap так, как вам нравится. Не нужно повторно объявлять каждое правило, просто новое значение переменной.

body {
  --bs-body-font-family: var(--bs-font-monospace);
  --bs-body-line-height: 1.4;
  --bs-body-bg: var(--bs-gray-100);
}

.table {
  --bs-table-color: var(--bs-gray-600);
  --bs-table-bg: var(--bs-gray-100);
  --bs-table-border-color: transparent;
}

Компоненты, соответствующие Utility API

Из новое в Bootstrap 5 то, что наши утилиты теперь генерируются нашим Utility API. Мы создали его как многофункциональную Sass-карту, которую можно быстро и легко настроить. Добавлять, удалять или изменять любые служебные классы еще никогда не было так просто. Сделайте утилиты отзывчивыми, добавьте варианты псевдоклассов и дайте им собственные имена.

Узнать больше об утилитах Исследуйте настраиваемые компоненты

Быстрая настройка компонентов

// Создавайте и расширяйте утилиты с помощью Utility API

@import "bootstrap/scss/bootstrap";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

Мощные подключаемые модули JavaScript без использования jQuery

Легко добавляйте переключаемые скрытые элементы, модальные окна и меню вне холста, всплывающие окна и всплывающие подсказки и многое другое — и все это без jQuery. JavaScript в Bootstrap — это HTML-first, а это означает, что добавлять плагины так же просто, как добавлять атрибуты data. Нужно больше контроля? Включите отдельные плагины программно.

Узнайте больше о Bootstrap JavaScript

API атрибутов данных

Зачем писать больше JavaScript, если можно писать HTML? Почти все плагины Bootstrap для JavaScript имеют первоклассный API данных, позволяющий вам использовать JavaScript, просто добавляя атрибуты data.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Раскрывающийся список
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Элемент Раскрывающегося списка</a></li>
    <li><a class="dropdown-item" href="#">Элемент Раскрывающегося списка</a></li>
    <li><a class="dropdown-item" href="#">Элемент Раскрывающегося списка</a></li>
  </ul>
</div>

Узнайте больше о нашем JavaScript в виде модулей и использовании программного API.

Полный набор плагинов

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


Персонализация с помощью Иконок

Иконки Bootstrap — это библиотека SVG-иконок с открытым исходным кодом, содержащая более 1600 глифов, постоянно добавляемых с каждым выпуском. Их можно использовать в любом проекте, независимо от того, используете ли вы сам Bootstrap или нет. Используйте их как SVG или иконочные шрифты — оба варианта обеспечивают векторное масштабирование и простую настройку с помощью CSS.

Получить иконки Bootstrap

Bootstrap Icons

Официальные темы

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

Обзор тем Bootstrap

Bootstrap Themes