Pwisan, ekstansibl, ak karakteristik-chaje zouti entèfas. Konstwi ak pèsonalize ak Sass, itilize sistèm griy ak konpozan ki deja bati, epi pote pwojè yo bay lavi ak plugin JavaScript pwisan.
Kounye a v5.2.1 · Telechaje · v4.6.x dokiman · Tout degaje yo
Ale dwat nan bilding ak Bootstrap—sèvi ak CDN a, enstale li atravè manadjè pake, oswa telechaje kòd sous la.
Enstale dosye sous Bootstrap Sass ak JavaScript atravè npm, RubyGems, Composer, oswa Meteor. Enstalasyon pakè jere yo pa enkli dokiman oswa scripts konplè nou yo. Ou kapab tou itilize repo modèl npm nou an pou jenere byen vit yon pwojè Bootstrap atravè npm.
npm install [email protected]gem install bootstrap -v 5.2.1Li dokiman enstalasyon nou yo pou plis enfòmasyon ak administratè pakè adisyonèl yo.
Lè ou sèlman bezwen enkli CSS oswa JS konpile Bootstrap a, ou ka itilize jsDelivr . Gade li an aksyon ak senp demaraj rapid nou an , oswa browse egzanp yo pou demare pwochen pwojè ou a. Ou ka chwazi tou pou enkli Popper ak JS nou an separeman .
<!-- 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 itilize Sass pou yon achitekti modilè ak customizable. Enpòte sèlman eleman ou bezwen yo, pèmèt opsyon mondyal tankou gradyan ak lonbraj, epi ekri pwòp CSS ou ak varyab, kat, fonksyon, ak mixin nou yo.
Enpòte yon fèy style epi w ap ale nan kous yo ak chak karakteristik nan CSS nou an.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Aprann plis sou opsyon global Sass nou yo .
Fason ki pi fasil pou personnaliser Bootstrap—gen ladan sèlman CSS ou bezwen an.
// 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";
Aprann plis sou itilizasyon Bootstrap ak Sass .
Bootstrap 5 ap evolye ak chak lage pou pi byen itilize varyab CSS pou estil tèm mondyal, eleman endividyèl, e menm sèvis piblik. Nou bay plizyè douzèn varyab pou koulè, estil font, ak plis ankò nan yon :rootnivo pou itilize nenpòt kote. Sou konpozan ak sèvis piblik yo, varyab CSS yo ranje nan klas ki enpòtan an epi yo ka fasilman modifye.
Sèvi ak nenpòt nan varyab mondyal:root nou yo pou ekri nouvo estil. Varyab CSS itilize var(--bs-variableName)sentaks la epi yo ka eritye pa eleman timoun yo.
.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);
}Ranplase varyab mondyal, eleman oswa klas sèvis piblik yo pou personnaliser Bootstrap jan ou renmen. Pa bezwen redeklare chak règ, jis yon nouvo valè varyab.
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;
}Nouvo nan Bootstrap 5, sèvis piblik nou yo kounye a pwodwi pa API sèvis piblik nou an . Nou bati li kòm yon kat Sass ki gen anpil karakteristik ki ka byen vit ak fasil Customized. Li pa janm te pi fasil pou ajoute, retire, oswa modifye nenpòt klas sèvis piblik. Fè sèvis piblik yo reponn, ajoute variants pseudo-klas, epi ba yo non koutim.
// 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,
)
)
);
Fasil ajoute eleman kache ki ka chanje, modal ak meni offcanvas, popovers ak konsèy sou zouti, ak plis ankò-tout san jQuery. JavaScript nan Bootstrap se HTML-premye, ki vle di ajoute grefon se osi fasil ke ajoute dataatribi. Bezwen plis kontwòl? Mete grefon endividyèl pwogramasyon.
Poukisa ekri plis JavaScript lè ou ka ekri HTML? Prèske tout grefon JavaScript Bootstrap yo prezante yon API done premye klas, ki pèmèt ou itilize JavaScript jis lè w ajoute dataatribi.
<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>
Aprann plis sou JavaScript nou an kòm modil ak lè l sèvi avèk API pwogramasyon an .
Bootstrap prezante yon douzèn grefon ke ou ka lage nan nenpòt pwojè. Depoze yo tout an menm tan, oswa chwazi jis sa ou bezwen yo.
Bootstrap Icons se yon bibliyotèk ikon SVG sous ouvè ki gen plis pase 1,500 glif, ak plis ajoute chak lage. Yo fèt pou travay nan nenpòt pwojè, si ou itilize Bootstrap tèt li oswa ou pa. Sèvi ak yo kòm SVG oswa polis icon-tou de opsyon ba ou dechèl vektè ak pèsonalizasyon fasil atravè CSS.
Pran Bootstrap nan pwochen nivo ak tèm prim ki soti nan mache ofisyèl Bootstrap Themes . Tèm yo bati sou Bootstrap kòm pwòp kad pwolonje yo, rich ak nouvo konpozan ak grefon, dokiman, ak zouti pwisan bati.
