Skip to di men tin dɛn we de insay
Check
Nyu na v5.2 CSS vεriεbul dεm, rεspכns כfkanvas, nyu yutiliti dεm, εn mכr! Bootstrap fɔ yuz

Bil fast, rispɔnsiv sayt dɛn wit Bootstrap

Pawaful, ɛkstensible, ɛn ficha-pak frɔntɛnd tulkit. Bil ɛn kɔstɔmayz wit Sass, yuz prɛbild grid sistem ɛn kɔmpɔnɛnt dɛn, ɛn briŋ prɔjɛkt dɛn to layf wit pawaful JavaSkript plɔgin dɛn.

npm i [email protected]
Rid di dɔkyumɛnt dɛn

Naw v5.2.1 · Daunlod · v4.6.x docs · Ɔl di rilis dɛn

Get stat eni wei yu want

Jɔmp rayt insay bildin wit Bootstrap—yuz di CDN, instɔl am tru di pakej manija, ɔ dawnlod di sɔs kɔd.

Rid di instɔleshɔn dɔkyumɛnt dɛn

Instɔl via pakej manija

Instɔl Bootstrap in sɔs Sass ɛn JavaSkript fayl dɛn bay npm, RubyGems, Kɔmpozitɔ, ɔ Mitiɔ. Pakɛj manej instɔl dɛn nɔ gɛt dɔkyumentri ɔ wi ful bild skript dɛn. Yu kin yuz wi npm tɛmplat repo bak fɔ kwik kwik wan jenarayz wan Bootstrap projɛkt via npm.

npm install [email protected]
gem install bootstrap -v 5.2.1

Rid wi instɔleshɔn dɔks fɔ mɔ info ɛn ɔda pakej manija dɛn.

Inklud via CDN

We yu jɔs nid fɔ put Bootstrap in kɔmpilayt CSS ɔ JS, yu kin yuz jsDelivr . Si am in akshɔn wit wi simpul kwik stat , ɔ browz di ɛgzampul dɛn fɔ jompstart yu nɛks prɔjek. Yu kin pik bak fɔ put Popper ɛn wi JS sɛpret wan .

<!-- 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>

Rid wi gayd dɛn fɔ bigin

Gɛt wan jomp pan inklud Bootstrap in sɔs fayl dɛn insay wan nyu prɔjek wit wi ɔfishal gayd dɛn.

Wɛbpak Bɔks Vite fɔ di wan dɛn we de

Customize evritin wit Sass

Bootstrap de yuz Sass fɔ wan modular ɛn kɔstɔmayz akitɛkɛt. Impɔt ɔl di kɔmpɔnɛnt dɛn we yu nid, ɛnabul glob ɔl opshɔn dɛn lɛk grɛdiɛnt ɛn shado, ɛn rayt yu yon CSS wit wi vɛriɔbul dɛn, map dɛn, fɛnshɔn dɛn, ɛn miksin dɛn.

Lan mɔ bɔt aw fɔ kɔstɔmayt

Inklud ɔl di Bootstrap in Sass

Impɔt wan staylshit ɛn yu de ɔf to di res dɛn wit ɛvri ficha na wi CSS.

// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

Lan mɔ bɔt wi global Sass opshɔn dɛn .

Put wetin yu nid insay

Di izi we fɔ kɔstɔmayt Bootstrap—inklud di CSS nɔmɔ we yu nid.

// 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";

Lan mɔ bɔt aw fɔ yuz Bootstrap wit Sass .

Bil ɛn ɛkstɛnd insay rial-taym wit CSS vɛriɔbul dɛn

Bootstrap 5 de evolv wit ɛni rilis fɔ bɛtɛ yuz CSS vɛriɔbul fɔ glob ɔl tim stayl dɛn, wan wan kɔmpɔnɛnt dɛn, ɛn ivin yutiliti dɛn. Wi de gi dɔzin vayriɔbul fɔ kɔlɔ, font stayl, ɛn ɔda tin dɛn na wan :rootlɛvul fɔ yuz ɛnisay. Na kɔmpɔnɛnt ɛn yutiliti, CSS vɛriɔbul dɛn de skɔp to di rilevɛns klas ɛn dɛn kin izi fɔ chenj dɛn.

Lan mɔ bɔt di CSS vɛriɔbul dɛn

Yuz CSS vɛriɔbul dɛn

Yuz ɛni wan pan wi glob ɔl :rootvɛriɔbul dɛn fɔ rayt nyu stayl dɛn. CSS vεriεbul dεm de yuz di var(--bs-variableName)sintaks εn kin inhεrit bay pikin εlimεnt dεm.

.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);
}

Kastamayz via CSS vɛriɔbul dɛn

Ɔvarayd global, kɔmpɔnɛnt, ɔ yutiliti klas vɛriɔbul dɛn fɔ kɔstɔmayz Bootstrap jɔs aw yu lɛk. Nɔ nid fɔ ridiklare ɛni rul, jɔs wan nyu vɛriɔbul valyu.

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;
}

Komponent dɛn, mit di Yutiliti API

Nyu insay Bootstrap 5, wi yutiliti dɛn naw na wi Yutiliti API de mek dɛn . Wi bil am as wan Sass map we gɛt bɔku bɔku tin dɛn we yu kin kɔstɔmayz kwik ɛn izi wan. I nɔ ɛva izi fɔ ad, pul, ɔ chenj ɛni yutiliti klas. Mek yutiliti dɛn we de ansa, ad pseudo-klas vayriɔnt dɛn, ɛn gi dɛn kɔstɔm nem dɛn.

Lan mɔ bɔt yutiliti dɛn Ɛksplɔrɔ di kɔmpɔnɛnt dɛn we dɛn dɔn kɔstɔmayt

Kwik kwik wan kɔstɔmayz di kɔmpɔnɛnt dɛn
// 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,
    )
  )
);

Pawaful JavaSkript plɔgin dɛn we nɔ gɛt jQuery

I izi fɔ ad toggleable hiden elements, modals ɛn ɔfkanvas mɛnyu dɛn, popovers ɛn tultips, ɛn bɔku ɔda tin dɛn—ɔl dis we nɔ gɛt jQuery. JavaSkript insay Bootstrap na HTML-fɔs, we min se fɔ ad plɔgin dɛn izi lɛk fɔ ad dataatribyut dɛn. Yu nid fɔ kɔntrol mɔ? Inklud wan wan plɔgin dɛn programmatik wan.

Lan mɔ bɔt Bootstrap JavaSkript

Data atribyut API

Wetin mek yu fɔ rayt mɔ JavaSkript we yu ebul fɔ rayt HTML? Klose to ɔl di JavaSkript plɔgin dɛn na Bootstrap gɛt fɔs klas data API, we de alaw yu fɔ yuz JavaSkript jɔs bay we yu ad dataatribyut dɛn.

<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>

Lan mɔ bɔt wi JavaSkript as modul ɛn yuz di programmatik API .

Komprehensiv set fɔ plɔgin dɛn

Bootstrap gɛt wan duzin plɔgin dɛn we yu kin drɔp insay ɛni prɔjek. Drɔp dɛn ɔl wan tɛm, ɔ pik jɔs di wan dɛn we yu nid.

Pe atɛnshɔn

Sho ɛn ayd alɛt mɛsej dɛn to yu yuza dɛn.

Bɔtin

Programmatically kɔntrol di aktiv stet fɔ bɔtin dɛn.

Karusel we dɛn kin yuz fɔ mek

Ad slayd sho dɛn to ɛni pej, ivin sɔpɔt fɔ krɔsfɛd.

Fɔdɔm

Ɛkspɛn ɛn kɔlap di eria dɛn we de insay di tin dɛn we de insay, ɔ mek akɔdin.

Drɔpdɔwn

Krio mɛnyu dɛn fɔ link dɛn, akshɔn dɛn, fɔm dɛn, ɛn ɔda tin dɛn.

Modal we de sho aw fɔ du am

Ad fleksibul ɛn rispɔnsiv dayalɔg dɛn to yu prɔjek.

Ɔfkanvas

Bil ɛn tɔgl saydbar dɛn we ayd insay ɛni pej.

Popova we de na di wɔl

Krio kɔstɔm ɔvlay dɛn. Dɛn bil am pan Popa.

Skrol dɛn we de na di skrol

Ɔtomɛtik ɔpdet aktif nav link dɛn bays pan pej skrol.

Tab we de sho aw fɔ du am

Alaw Bootstrap nav kɔmpɔnɛnt dɛn fɔ tɔgl kɔntinyu.

Tost

Sho ɛn ayd di notis dɛn to di wan dɛn we de kam fɛn yu.

Tultip fɔ yuz

Riples di brɔwza tultip dɛn wit kɔstɔm wan dɛn. Dɛn bil am pan Popa.

Pɔsnalayz am wit Bootstrap Aykɔn dɛn

Bootstrap Icons na wan opin sɔs SVG aykɔn laybri we gɛt pas 1,500 glif dɛn, wit mɔ we dɛn ad ɛvri rilis. Dɛn mek dɛn fɔ wok na ɛni prɔjek, ilɛksɛf yu yuz Bootstrap insɛf ɔ yu nɔ yuz am. Yuz dɛn as SVG ɔ aykɔn fɔnt—ɔl tu di opshɔn dɛn de gi yu vektɔ skel ɛn izi kɔstɔmayshɔn tru CSS.

Get Bootstrap Aykɔn dɛn

Bootstrap Aykɔn dɛn

Mek am yu yon wit ɔfishal Bootstrap Tim dɛn

Tek Bootstrap to di nɛks lɛvul wit prɛmiɔm tim dɛn frɔm di ɔfishal Bootstrap Tim dɛn makit . Di tim dɛn bil pan Bootstrap as dɛn yon ɛkstend fremwɔk, rich wit nyu kɔmpɔnɛnt ɛn plɔgin dɛn, dɔkyumentri, ɛn pawaful bil tul dɛn.

Brayz di Bootstrap Tim dɛn

Bootstrap Tim dɛn