Көчле, киңәйтелгән һәм функцияле фронталь кораллар җыелмасы. Sass белән төзү һәм көйләү, төзелгән челтәр системасын һәм компонентларын куллану, көчле JavaScript плагиннары белән проектларны тормышка ашыру.
Хәзерге вакытта v5.2.1 · Йөкләү · v4.6.x документлар · Барлык чыгарылышлар
Bootstrap белән бинага сикерегез - CDN кулланыгыз, пакет менеджеры аша урнаштырыгыз яки чыганак кодын йөкләгез.
Bootstrap чыганагы Sass һәм JavaScript файлларын npm, RubyGems, Композитор яки Метеор аша урнаштырыгыз. Пакет белән идарә ителгән урнаштыру документлар яки тулы сценарийлар кертми. Сез шулай ук безнең npm шаблон репосын npm аша Bootstrap проектын тиз ясау өчен куллана аласыз.
npm install [email protected]gem install bootstrap -v 5.2.1Күбрәк мәгълүмат һәм өстәмә пакет менеджерлары өчен безнең урнаштыру документларын укыгыз .
Сезгә Bootstrap-ның тупланган CSS яки JS-ны гына кертергә кирәк булганда, 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";
Sass белән Bootstrap куллану турында күбрәк белү .
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-ны үзегез теләгәнчә көйләү өчен глобаль, компонент яки файдалы класс үзгәрүләрен кире кагарга. Ruleәр кагыйдәне яңадан аңлатырга кирәк түгел, яңа үзгәрүчән кыйммәт.
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 картасы итеп төзедек. Бернинди файдалы классларны өстәү, бетерү яки үзгәртү беркайчан да җиңел булмаган. Коммуналь хезмәтләрне җаваплы ит, псевдо-класс вариантларын өстә, аларга махсус исемнәр бир.
Коммуналь хезмәтләр турында күбрәк белү Customзләштерелгән компонентларны барлау
// 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сыз. dataBootstrap-та JavaScript - HTML-беренче, плагиннарны өстәү атрибутлар өстәү кебек җиңел . Күбрәк контроль кирәкме? Программалы рәвештә аерым плагиннарны кертегез.
HTML яза алсаң, нигә күбрәк JavaScript язарга? Bootstrap-ның барлык JavaScript плагиннарында диярлек беренче класслы мәгълүмат API бар, бу сезгә dataатрибутлар өстәп JavaScript кулланырга мөмкинлек бирә.
<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 иконалары - ачык чыганак SVG иконасы китапханәсе, 1500 дән артык глифлы, һәр чыгарылышта күбрәк өстәлгән. Алар Bootstrapны кулланасызмы, юкмы, теләсә нинди проектта эшләргә эшләнгән. Аларны SVG яки иконка шрифтлары итеп кулланыгыз - икесе дә вектор масштабын һәм CSS аша җиңел үзләштерүне бирә.
Рәсми Bootstrap Темалар базарыннан премиум темалары белән Bootstrap-ны киләсе дәрәҗәгә күтәрегез . Темалар Bootstrap'та үзләренең киңәйтелгән рамкалары буларак төзелгән, яңа компонентлар һәм плагиннар, документлар һәм көчле төзү кораллары белән бай.
