Мощный, расширяемый и многофункциональный интерфейсный инструментарий. Создавайте и настраивайте с помощью Sass, используйте готовую систему сеток и компоненты и воплощайте проекты в жизнь с помощью мощных плагинов JavaScript.
Установите исходные файлы Sass и JavaScript для Bootstrap через npm, RubyGems, Composer или Meteor. Установка, управляемая пакетами, не включает документацию или наши полные сценарии сборки. Вы также можете использовать наш репозиторий шаблонов npm для быстрого создания проекта Bootstrap с помощью npm.
Если вам нужно включить только скомпилированный CSS или JS Bootstrap, вы можете использовать jsDelivr. Посмотрите его в действии с помощью нашего простого быстрого старта или просмотрите примеры, чтобы начать свой следующий проект. Вы также можете включить Popper и наш JS отдельно.
Bootstrap использует Sass для модульной и настраиваемой архитектуры. Импортируйте только те компоненты, которые вам нужны, включите глобальные параметры, такие как градиенты и тени, и напишите свой собственный CSS с нашими переменными, картами, функциями и миксинами.
Импортируйте одну таблицу стилей и приступайте к гонкам со всеми функциями нашего CSS.
// Переменная переопределяемая в первую очередь
$primary:#900;$enable-shadows:true;$prefix:"mo-";// Затем импортируйте Bootstrap
@import"../node_modules/bootstrap/scss/bootstrap";
Самый простой способ настроить Bootstrap — включить только тот CSS, который вам нужен.
// Начальные функции
@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/variables-dark";@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";
Создавайте и расширяйте в реальном времени с помощью CSS переменных
Bootstrap 5 развивается с каждым выпуском, чтобы лучше использовать переменные CSS для глобальных стилей темы, отдельных компонентов и даже утилит. Мы предоставляем десятки переменных для цветов, стилей шрифтов и многого другого на уровне :root для использования где угодно. В компонентах и утилитах переменные CSS привязаны к соответствующему классу и могут быть легко изменены.
Используйте любую из наших глобальных переменных :root для написания новых стилей. Переменные CSS используют синтаксис var(--bs-variableName) и могут наследоваться дочерними элементами.
Переопределите глобальные, компонентные или служебные переменные класса, чтобы настроить Bootstrap так, как вам нравится. Не нужно повторно объявлять каждое правило, просто новое значение переменной.
Новое в Bootstrap 5: наши утилиты теперь генерируются нашим Utility API. Мы создали его как многофункциональную карту Sass, которую можно быстро и легко настроить. Добавлять, удалять или изменять любые служебные классы еще никогда не было так просто. Сделайте утилиты отзывчивыми, добавьте варианты псевдоклассов и дайте им собственные имена.
Быстрая настройка компонентов
Примените любой из наших включенных служебных классов к нашим компонентам, чтобы настроить их внешний вид, как в примере навигации ниже. Доступны сотни классов — от positioning и sizing и colors и effects. Смешайте их с переопределениями переменных CSS для еще большего контроля.
<ulclass="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);"><liclass="nav-item"role="presentation"><buttonclass="nav-link active rounded-5"id="home-tab2"data-bs-toggle="tab"type="button"role="tab"aria-selected="true">Главная</button></li><liclass="nav-item"role="presentation"><buttonclass="nav-link rounded-5"id="profile-tab2"data-bs-toggle="tab"type="button"role="tab"aria-selected="false">Профиль</button></li><liclass="nav-item"role="presentation"><buttonclass="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 для изменения, добавления или удаления утилит.
Добавляйте переключаемые скрытые элементы, модальные окна и меню вне холста, всплывающие окна и всплывающие подсказки и многое другое — и все это без jQuery. JavaScript в Bootstrap ориентирован на HTML, а это означает, что большинство плагинов добавляются с атрибутами data в ваш HTML. Нужно больше контроля? Включите отдельные плагины программно.
Зачем писать больше JavaScript, если можно писать HTML? Почти все плагины Bootstrap для JavaScript имеют первоклассный API данных, позволяющий использовать JavaScript, просто добавляя data атрибуты.
Иконки Bootstrap — это библиотека SVG-иконок с открытым исходным кодом, содержащая более 1800 глифов, постоянно добавляемых с каждым выпуском. Их можно использовать в любом проекте, независимо от того, используете ли вы сам Bootstrap или нет. Используйте их как SVG или иконочные шрифты — оба варианта обеспечивают векторное масштабирование и простую настройку с помощью CSS.
Поднимите Bootstrap на новый уровень с премиальными темами с официального маркетплейса тем Bootstrap. Темы создаются на Bootstrap как собственные расширенные фреймворки, богатые новыми компонентами и плагинами, документацией и мощными инструментами сборки.
Читать документацию
