Снажан, проширив и комплет алата за фронтенд пун функција. Изградите и прилагодите се помоћу Сасс-а, користите унапред изграђен систем мреже и компоненте и оживите пројекте помоћу моћних ЈаваСцрипт додатака.
Тренутно в5.2.1 · Преузимање · в4.6.к документи · Сва издања
Ускочите одмах у изградњу са Боотстрап-ом—користите ЦДН, инсталирајте га преко менаџера пакета или преузмите изворни код.
Инсталирајте изворне Сасс и ЈаваСцрипт датотеке Боотстрапа преко нпм, РубиГемс, Цомпосер или Метеор. Инсталације којима се управља пакетом не укључују документацију или наше комплетне скрипте за прављење. Такође можете користити наш нпм шаблон репо за брзо генерисање Боотстрап пројекта преко нпм-а.
npm install [email protected]gem install bootstrap -v 5.2.1Прочитајте нашу документацију за инсталацију за више информација и додатне менаџере пакета.
Када треба да укључите само Боотстрап-ов преведен ЦСС или ЈС, можете користити јсДеливр . Погледајте то у акцији помоћу нашег једноставног брзог почетка или прегледајте примере да бисте покренули свој следећи пројекат. Такође можете одабрати да укључите Поппер и наш ЈС одвојено .
<!-- 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>
Боотстрап користи Сасс за модуларну и прилагодљиву архитектуру. Увезите само компоненте које су вам потребне, омогућите глобалне опције као што су градијенти и сенке и напишите сопствени ЦСС са нашим варијаблама, мапама, функцијама и миксинама.
Увезите једну листу стилова и крећете у трке са сваком функцијом нашег ЦСС-а.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Сазнајте више о нашим глобалним Сасс опцијама .
Најлакши начин да прилагодите Боотстрап—укључите само ЦСС који вам је потребан.
// 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";
Сазнајте више о коришћењу Боотстрапа са Сасс-ом .
Боотстрап 5 се развија са сваким издањем како би боље искористио ЦСС варијабле за глобалне стилове тема, појединачне компоненте, па чак и услужне програме. Пружамо десетине варијабли за боје, стилове фонта и још много тога на :rootнивоу за употребу било где. На компонентама и услужним програмима, ЦСС варијабле су обухваћене релевантном класом и могу се лако модификовати.
Користите било коју од наших глобалних :rootпроменљивих за писање нових стилова. ЦСС варијабле користе 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);
}Замените глобалне, компонентне или услужне променљиве класе да бисте прилагодили Боотстрап онако како желите. Нема потребе да се поново декларише свако правило, само нова вредност променљиве.
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;
}Ново у Боотстрап 5, наше услужне програме сада генерише наш Утилити АПИ . Направили смо је као Сасс мапу пуну функција која се може брзо и лако прилагодити. Никада није било лакше додати, уклонити или модификовати било коју услужну класу. Учините услужне програме прилагодљивим, додајте варијанте псеудокласа и дајте им прилагођена имена.
Сазнајте више о комуналним услугама Истражите прилагођене компоненте
// 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,
)
)
);
Лако додајте скривене елементе који се могу преклопити, модале и меније ван платна, искачуће приказе и описе алата и још много тога — све без јКуери-ја. ЈаваСцрипт у Боотстрап-у је први ХТМЛ, што значи да је додавање додатака једноставно као и додавање dataатрибута. Треба вам више контроле? Програмски укључите појединачне додатке.
Зашто писати више ЈаваСцрипт-а када можете писати ХТМЛ? Скоро сви Боотстрап-ови ЈаваСцрипт додаци имају првокласни АПИ за податке, који вам омогућава да користите ЈаваСцрипт само додавањем 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>
Сазнајте више о нашем ЈаваСцрипт-у као модулима и коришћењу програмског АПИ-ја .
Боотстрап садржи десетак додатака које можете убацити у било који пројекат. Убаците их све одједном или изаберите само оне које су вам потребне.
Боотстрап Ицонс је СВГ библиотека икона отвореног кода која садржи преко 1500 глифова, са више доданих сваким издањем. Дизајнирани су да раде у било ком пројекту, без обзира да ли користите сам Боотстрап или не. Користите их као СВГ или фонтове икона — обе опције вам дају векторско скалирање и лако прилагођавање преко ЦСС-а.
Подигните Боотстрап на следећи ниво са врхунским темама са званичног тржишта Боотстрап тема . Теме су изграђене на Боотстрапу као сопствени проширени оквири, богати новим компонентама и додацима, документацијом и моћним алатима за прављење.
