Мощен, разширяем и пълен с функции набор от инструменти за интерфейс. Изградете и персонализирайте със 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, което означава, че добавянето на добавки е толкова лесно, колкото добавянето 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 Themes . Темите са изградени върху Bootstrap като свои собствени разширени рамки, богати на нови компоненти и добавки, документация и мощни инструменти за изграждане.
