Мощный, расширяемый и функциональный фронтенд-инструментарий. Создавайте и настраивайте с помощью Sass, используйте готовую сетку и компоненты, оживляйте проекты с помощью мощных JavaScript-плагинов.
npm i bootstrap@5.3.8Текущая версия v5.3.8 · Скачать · Все релизы
Сразу приступайте к созданию с Bootstrap — используйте CDN, установите через менеджер пакетов или скачайте исходный код.
Установите исходные файлы Sass и JavaScript Bootstrap через npm, RubyGems, Composer или Meteor. Установки через менеджер пакетов не включают документацию или наши полные скрипты сборки. Вы также можете использовать любой пример из нашего репозитория примеров для быстрого запуска проектов Bootstrap.
npm install bootstrap@5.3.8gem install bootstrap -v 5.3.8Читайте нашу документацию по установке для получения дополнительной информации и других менеджеров пакетов.
Когда вам нужно только подключить скомпилированный CSS или JS Bootstrap, вы можете использовать jsDelivr. Посмотрите это в действии с нашим простым быстрым стартом, или просмотрите примеры для запуска вашего следующего проекта. Вы также можете выбрать подключение Popper и нашего JS отдельно.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" 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/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.
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-карту, которую можно быстро и легко настроить. Ещё никогда не было так просто добавлять, удалять или изменять любые утилитарные классы. Делайте утилиты адаптивными, добавляйте варианты с псевдоклассами и задавайте им собственные имена.
Применяйте любые встроенные утилитарные классы к компонентам для их настройки, как в примере навигации ниже. Доступны сотни классов — от позиционирования и размеров до цветов и эффектов. Смешивайте их с переопределениями 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>Используйте Utility API Bootstrap для изменения существующих или создания собственных утилит для любого проекта. Сначала импортируйте Bootstrap, затем используйте функции Sass map для изменения, добавления или удаления утилит.
@import "bootstrap/scss/bootstrap";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
Добавляйте переключаемые скрытые элементы, модальные окна и боковые меню, всплывающие подсказки и подсказки, и многое другое — все без
jQuery. JavaScript Bootstrap является HTML-первым, что означает, что большинство плагинов добавляются с помощью атрибутов data в вашем
HTML. Нужно больше контроля? Включите отдельные плагины программно.
Зачем писать больше JavaScript, когда можно писать HTML? Почти все JavaScript плагины Bootstrap имеют
первоклассный 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 — это библиотека SVG-иконок с открытым исходным кодом, содержащая более 1800 глифов, с добавлением новых в каждом релизе. Они разработаны для работы в любом проекте, используете ли вы сам Bootstrap или нет. Используйте их как SVG или шрифты иконок — оба варианта дают вам векторное масштабирование и легкую настройку через CSS.
