Создавайте быстрые и адаптивные сайты с помощью Bootstrap

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

npm i bootstrap@5.3.5

Читать документацию

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

Начните как хотите

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

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

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

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

npm install bootstrap@5.3.5

gem install bootstrap -v 5.3.5

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

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

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>

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

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

Webpack

Parcel

Vite

Кастомизируйте все с помощью Sass

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

Узнайте больше о кастомизации

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

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

// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

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

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

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

// Functions first
@import "../node_modules/bootstrap/scss/functions";

// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional components
@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;
}

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

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

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

Примените любой из наших включенных служебных классов к нашим компонентам, чтобы настроить их внешний вид, как в примере навигации ниже. Доступны сотни классов — от positioning и sizing и colors и effects. Смешайте их с переопределениями переменных CSS для еще большего контроля.

<ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist" style="--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);">
  <li class="nav-item" role="presentation">
    <button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Главная</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Профиль</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Контакт</button>
  </li>
</ul>

Исследуйте настраиваемые компоненты

Создание и расширение утилит

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

@import "bootstrap/scss/bootstrap";

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

Изучите API утилиты

Мощные плагины JavaScript без jQuery

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

Узнайте больше о 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><button class="dropdown-item" type="button">Элемент выпадающего списка</button></li>
    <li><button class="dropdown-item" type="button">Элемент выпадающего списка</button></li>
    <li><button class="dropdown-item" type="button">Элемент выпадающего списка</button></li>
  </ul>
</div>

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

Всесторонний набор плагинов

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

Персонализируйте его с помощью Bootstrap Icons

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

Получить Bootstrap Icons

Сделайте это своим с официальными Темами Bootstrap

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

Обзор Bootstrap Themes

Создавайте быстрые и адаптивные сайты с помощью Bootstrap

Начните как хотите

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

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

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

Кастомизируйте все с помощью Sass

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

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

Создавайте и расширяйте в реальном времени с помощью CSS переменных

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

Настройка через переменные CSS

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

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

Создание и расширение утилит

Мощные плагины JavaScript без jQuery

API дата-атрибутов

Всесторонний набор плагинов

Alert

Button

Carousel

Collapse

Dropdown

Modal

Offcanvas

Popover

Scrollspy

Tab

Toast

Tooltip

Персонализируйте его с помощью Bootstrap Icons

Сделайте это своим с официальными Темами Bootstrap