Мощный, расширяемый и многофункциональный интерфейсный инструментарий. Создавайте и настраивайте с помощью Sass, используйте готовую систему сеток и компоненты и воплощайте проекты в жизнь с помощью мощных плагинов JavaScript.
Текущая версия v5.2.1 · Загрузить · Документация v4.6.x · Все выпуски
Приступайте к созданию с помощью Bootstrap — используйте CDN, установите его с помощью диспетчера пакетов или загрузите исходный код.
Установите исходные файлы Sass и JavaScript для Bootstrap через npm, RubyGems, Composer или Meteor. Установка, управляемая пакетами, не включает документацию или наши полные сценарии сборки. Вы также можете использовать наш репозиторий шаблонов npm для быстрого создания проекта Bootstrap через npm.
npm install [email protected]gem install bootstrap -v 5.2.1Прочтите нашу документацию по установке для получения дополнительной информации и дополнительных менеджеров пакетов.
Если вам нужно включить только скомпилированный CSS или JS Bootstrap, вы можете использовать jsDelivr . Посмотрите его в действии с помощью нашего простого руководства по быстрому запуску или просмотрите примеры , чтобы начать свой следующий проект. Вы также можете включить Popper и наш JS отдельно .
<!-- CSS only -->
<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">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
Bootstrap использует Sass для модульной и настраиваемой архитектуры. Импортируйте только те компоненты, которые вам нужны, включите глобальные параметры, такие как градиенты и тени, и напишите свой собственный CSS с нашими переменными, картами, функциями и миксинами.
Импортируйте одну таблицу стилей, и вы отправитесь в гонку со всеми функциями нашего 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/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 .
Bootstrap 5 развивается с каждым выпуском, чтобы лучше использовать переменные CSS для глобальных стилей темы, отдельных компонентов и даже утилит. Мы предоставляем десятки переменных для цветов, стилей шрифтов и многого другого на :rootуровне, который можно использовать где угодно. В компонентах и утилитах переменные 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);
}Переопределите глобальные, компонентные или служебные переменные класса, чтобы настроить 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;
}Новое в Bootstrap 5, наши утилиты теперь генерируются нашим Utility API . Мы создали его как многофункциональную карту Sass, которую можно быстро и легко настроить. Добавлять, удалять или изменять любые служебные классы еще никогда не было так просто. Сделайте утилиты отзывчивыми, добавьте варианты псевдоклассов и дайте им собственные имена.
Узнать больше об утилитах Исследуйте настраиваемые компоненты
// Create and extend utilities with the Utility API
@import "bootstrap/scss/bootstrap";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
Легко добавляйте переключаемые скрытые элементы, модальные окна и меню вне холста, всплывающие окна и всплывающие подсказки и многое другое — и все это без jQuery. JavaScript в Bootstrap — это HTML-first, а это означает, что добавлять плагины так же просто, как добавлять dataатрибуты. Нужно больше контроля? Включите отдельные плагины программно.
Зачем писать больше 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">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
</ul>
</div>
Узнайте больше о нашем JavaScript в виде модулей и использовании программного API .
В Bootstrap есть дюжина плагинов, которые вы можете добавить в любой проект. Вставьте их все сразу или выберите только те, которые вам нужны.
Bootstrap Icons — это библиотека иконок SVG с открытым исходным кодом, содержащая более 1500 глифов, и с каждым выпуском добавляется больше. Они предназначены для работы в любом проекте, независимо от того, используете ли вы сам Bootstrap или нет. Используйте их как SVG или иконочные шрифты — оба варианта обеспечивают векторное масштабирование и простую настройку с помощью CSS.
Поднимите Bootstrap на новый уровень с премиальными темами с официального рынка тем Bootstrap . Темы создаются на Bootstrap как собственные расширенные фреймворки, богатые новыми компонентами и плагинами, документацией и мощными инструментами сборки.
