Потужний, розширюваний і багатофункціональний інтерфейсний інструментарій. Створюйте та налаштовуйте за допомогою Sass, використовуйте готову сітку та компоненти та втілюйте проекти в життя за допомогою потужних плагінів JavaScript.
Наразі версія 5.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, а це означає, що додавати плагіни так само просто, як і dataатрибути. Потрібно більше контролю? Включайте окремі плагіни програмно.
Навіщо писати більше 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">
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 як власні розширені фреймворки, багаті новими компонентами та плагінами, документацією та потужними інструментами для створення.
