Моќен, растеглив и полн со функции преден комплет алатки. Изградете и приспособете со Sass, искористете го претходно изградениот мрежен систем и компоненти и оживувајте ги проектите со моќни приклучоци за JavaScript.
Во моментов v5.2.1 · Преземи · v4.6.x документи · Сите изданија
Скокни веднаш во зградата со Bootstrap - користете го CDN, инсталирајте го преку менаџер на пакети или преземете го изворниот код.
Инсталирајте ги изворните датотеки на Bootstrap Sass и JavaScript преку npm, RubyGems, Composer или Meteor. Инсталациите со управувани пакети не вклучуваат документација или нашите целосни скрипти за изработка. Можете исто така да го користите нашето складиште за шаблони npm за брзо генерирање на проект за Bootstrap преку npm.
npm install [email protected]gem install bootstrap -v 5.2.1Прочитајте ги нашите документи за инсталација за повеќе информации и дополнителни менаџери на пакети.
Кога треба да вклучите само компајлирана CSS или JS на Bootstrap, можете да користите jsDelivr . Погледнете го во акција со нашиот едноставен брз почеток или прелистајте ги примерите за да го започнете вашиот следен проект. Можете исто така да изберете да ги вклучите Попер и нашиот 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,
)
)
);
Лесно додајте скриени елементи што може да се менуваат, модали и менија offcanvas, поповери и совети за алатки и многу повеќе - сето тоа без 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 која содржи над 1.500 глифи, со повеќе додадени секое издание. Тие се дизајнирани да работат во кој било проект, без разлика дали го користите самиот Bootstrap или не. Користете ги како SVG или фонтови за икони - двете опции ви даваат векторско скалирање и лесно прилагодување преку CSS.
Однесете го Bootstrap на следното ниво со врвни теми од официјалниот пазар за Bootstrap Themes . Темите се изградени на Bootstrap како нивни проширени рамки, богати со нови компоненти и приклучоци, документација и моќни алатки за градење.
