Tɛmɛn ka taa kunnafoni kunbabaw la
Check
Kuru bɛ ​​v5.2 kɔnɔ CSS fɛn caman sɛgɛsɛgɛli, jaabi offcanvas, nafamafɛn kuraw, ani fɛn wɛrɛw! Bootstrap ye

Sitiw jɔ teliya la, minnu bɛ jaabi di ni Bootstrap ye

Baarakɛminɛn barikama, min bɛ se ka bonya, ani min falen bɛ fɛn caman na, o ye ɲɛfɛla baarakɛminɛnw ye. Aw bɛ jɔ ani ka fɛnw labɛn ni Sass ye, ka baara kɛ ni grid system ni a yɔrɔw ye minnu jɔra ka kɔn, ani ka porozɛw lase ɲɛnamaya ma ni JavaScript plugins barikamaw ye.

npm i [email protected]
Aw ye docs kalan

Sisan v5.2.1 · Télécharger · v4.6.x docs · A bɔlenw bɛɛ

I b’a fɛ cogo o cogo, i k’a daminɛ

I ka pan ka don boon kɔnɔ ni Bootstrap ye—ka baara kɛ ni CDN ye, k’a sigi pakew ɲɛnabɔbaga fɛ, walima ka source code telesarse.

Aw ye installation docs kalan

Install via package manager fɛ

Bootstrap ka source Sass ani JavaScript filew sigi sen kan npm, RubyGems, Composer, walima Meteor fɛ. Package managed installs tɛ sɛbɛnw walima an ka jɔli sɛbɛnni dafalenw Sɔrɔ. Aw bɛ se fana ka baara kɛ ni an ka npm template repo ye walasa ka Bootstrap porozɛ dɔ labɛn joona npm fɛ.

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

Aw ye an ka installation docs kalan walasa ka kunnafoni wɛrɛw sɔrɔ ani ka pakew ɲɛnabɔbaga wɛrɛw sɔrɔ.

A bɛ don a kɔnɔ CDN fɛ

Ni i mago bɛ Bootstrap ka CSS walima JS lajɛlen dɔrɔn de la, i bɛ se ka baara kɛ ni jsDelivr ye . Aw k’a lajɛ wale la ni an ka daminɛ teliya nɔgɔman ye , walima aw ka misaliw lajɛ walasa ka aw ka porozɛ nata daminɛ. aw bɛ se fana ka sugandi ka Popper ni an ka JS don u dan na .

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

Aw ye an ka daminɛ gafew kalan

Aw ye wuli ka Bootstrap ka source files don porozɛ kura dɔ kɔnɔ ni an ka guide officielw ye.

Webpack ye Du tɛrɛn Vite ye

Aw bɛ fɛn bɛɛ kɛ ka kɛɲɛ ni Sass ye

Bootstrap bɛ baara Kɛ ni Sass ye walasa ka fɛn dɔ Kɛ min bɛ Se ka Kɛ ni modulari ye ani min bɛ Se ka Labɛn. I mago bɛ fɛn minnu na, i ka olu dɔrɔn de don, ka diɲɛ sugandiliw kɛ i n’a fɔ gradients ani shadows, ani ka i yɛrɛ ka CSS sɛbɛn ni an ka variables, maps, functions ani mixins ye.

Aw ye kunnafoni wɛrɛw sɔrɔ ka kɛɲɛ ni mɔgɔw sago ye

Bootstrap ka Sass bɛɛ don a kɔnɔ

I ka stylesheet kelen don ani i bɛ taa boliw la ni an ka CSS ka fɛn bɛɛ ye.

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

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

Aw ye kunnafoni wɛrɛw sɔrɔ an ka diɲɛ Sass suganditaw kan .

I mago bɛ fɛn minnu na, i ka olu fana sen don a la

Bootstrap labɛncogo nɔgɔman—i mago bɛ CSS dɔrɔn de la.

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

Aw ye kunnafoni wɛrɛw sɔrɔ Bootstrap baaracogo kan ni Sass ye .

A jɔ ani ka a janya waati yɛrɛ la ni CSS fɛn caman sɛgɛsɛgɛli ye

Bootstrap 5 bɛ ka yiriwa ni bɔko kelen-kelen bɛɛ ye walasa ka baara kɛ ni CSS fɛn caman ye ka ɲɛ diɲɛ barokun cogoyaw la, yɔrɔ kelen-kelenw, ani hali nafamafɛnw. An bɛ fɛn tan ni caman di kulɛriw, sɛbɛnnikɛcogo ani fɛn wɛrɛw ma :rootnivo dɔ la walasa ka baara kɛ ni u ye yɔrɔ o yɔrɔ. Kɛnɛw ni nafalanw kan, CSS fɛn caman sɛgɛsɛgɛli bɛ kɛ ka kɛɲɛ ni kalasi ye min bɛ tali kɛ u la, wa u bɛ se ka ladilan nɔgɔya la.

Aw ye kunnafoni wɛrɛw sɔrɔ CSS fɛn caman sɛgɛsɛgɛli kan

Baara kɛ ni CSS fɛn caman sɛgɛsɛgɛli ye

Baara kɛ ni an ka diɲɛ :rootfɛn caman sɛgɛsɛgɛli ye walasa ka cogoya kura sɛbɛn. CSS bεε bε baara Kɛ ni var(--bs-variableName)sintasi ye wa u bɛ Se ka ciyɛn Sɔrɔ denmisɛnw ka fɛnw fɛ.

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

Labɛnni kɛli CSS fɛn caman sɛgɛsɛgɛli fɛ

Aw bɛ diɲɛ, yɔrɔ, walima nafalan kalasi fɛn caman sɛgɛsɛgɛli kɛ walasa ka Bootstrap labɛn i n’a fɔ i b’a fɛ cogo min na. Wajibi tɛ ka sariya kelen-kelen bɛɛ fɔ kokura, fɛn caman bɛrɛbɛrɛ nafa kura dɔrɔn de don.

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

Components, ka Utility API kunbɛn

Ko kura Bootstrap 5 kɔnɔ, an ka nafamafɛnw bɛ Sɔrɔ sisan an ka Nafamafɛnw API fɛ . An y’a jɔ i n’a fɔ Sass karti min falen bɛ fɛn caman na, min bɛ se ka ladilan joona ani nɔgɔya la. A ma deli ka nɔgɔn ka nafalan kalasi dɔw fara, ka bɔ yen, walima ka fɛn dɔw sɛmɛntiya. Aw ye nafalanw kɛ jaabiw ye, ka pseudo-class variants fara u kan, ani ka tɔgɔw di u ma minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye.

Aw ye kunnafoni wɛrɛw sɔrɔ nafamafɛnw kan A’ ye fɛnw sɛgɛsɛgɛ minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye

Teliya la, i ka yɔrɔw labɛn ka kɛɲɛ ni i yɛrɛ sago ye
// 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,
    )
  )
);

JavaScript baarakɛminɛn barikamaw ni jQuery tɛ

Aw bɛ fɛn dogolenw fara nɔgɔya la minnu bɛ se ka wuli ka bɔ u nɔ na, ​​modalw ani offcanvas menuw, popovers ani baarakɛminɛnw, ani fɛn caman wɛrɛw—o bɛɛ tɛ ni jQuery ye. JavaScript min bɛ Bootstrap kɔnɔ o ye HTML-fɔlɔ ye, o kɔrɔ ye ko plugins (dakunw) farali ka nɔgɔn i n’a fɔ dataattributs (daɲɛw) farali. Aw mago bɛ kuntigiya caman na wa? A’ ye plugins kelen-kelen bɛɛ don a kɔnɔ porogaramu fɛ.

Aw ye kunnafoni wɛrɛw sɔrɔ Bootstrap JavaScript kan

Donanw ka fɛnsɛbɛnni API

Mun na i bɛ JavaScript caman sɛbɛn k’a sɔrɔ i bɛ se ka HTML sɛbɛn? Bootstrap ka JavaScript 'kɔnɔfɛnw bɛɛ bɛ Se ka Kɛ ni data API fɔlɔ ye, min b'a To i bɛ Se ka baara Kɛ ni JavaScript ye ni fɛn dɔw Fàrali dɔrɔn ye 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>

aw ye kunnafoni wɛrɛw sɔrɔ an ka JavaScript kan i n' a fɔ moduluw ani baara kɛli ni porogaramu API ye .

Plugins (plugin) kulu bɛɛ lajɛlen

Bootstrap bɛ 'plugin tan ni fila jira i bɛ Se ka minnu Dòn porozɛ o porozɛ la. Aw bɛ u bɛɛ fili siɲɛ kelen, walima aw mago bɛ minnu na dɔrɔn, aw bɛ olu sugandi.

Lasɔmini

Lakɔlɔsili cikanw jira ani k’u dogo i ka baarakɛlaw la.

Butɔn

Porogaramu ka baarakɛcogo ɲɛnabɔ butɔni kama.

Karosel

Aw bɛ slide jirataw fara ɲɛ o ɲɛ kan, hali crossfade dɛmɛni.

Ka bin

Kɔnɔkow yɔrɔw bonya ani k’u dabɔ, walima ka accordions (accordions) dilan.

Dropdown (Donkilidala).

Meniw dilan minnu bɛ tali kɛ jɛgɛnw, walew, sɛbɛnw ani fɛn wɛrɛw la.

Modal

Aw ye barokɛcogo caman ni jaabiw fara aw ka poroze kan.

Offcanvas ye

Kɛrɛfɛlan dogolenw jɔ ani k’u wuli ka don ɲɛ o ɲɛ kan.

Popover ye

Aw bɛ ladamulenw dabɔ. A jɔlen bɛ Popper kan.

Scrollspy ye

Nav jɛgɛnsira minnu bɛ baara la, olu kuraya i yɛrɛma ka da ɲɛ sɛgɛsɛgɛli kan.

Tab

A to Bootstrap nav yɔrɔw ka kɔnɔkow wuli.

Ka tɔsi kɛ

Ladɔnniyaliw jira ani k’u dogo i ka taamakɛlaw la.

Baarakɛminɛnw ɲɛfɔli

Navigatɛriw ka baarakɛminɛnw bila u nɔ na ni ladiliw ye minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye. A jɔlen bɛ Popper kan.

A kɛ i yɛrɛ ta ye ni Bootstrap Icons ye

Bootstrap Icons ye SVG taamasiyɛn gafemarayɔrɔ da yelennen ye min bɛ ni glyph 1500 ni kɔ ye, ni dɔ wɛrɛw bɛ fara a kan bɔli bɛɛ la. U dabɔra ka baara kɛ porozɛ o porozɛ la, i mana baara kɛ ni Bootstrap yɛrɛ ye walima i tɛ baara kɛ ni min ye. Baara kɛ n’u ye i n’a fɔ SVGw walima taamasiyɛn sɛbɛnnibolow—o sugandi fila bɛɛ bɛ vektɔri sɛgɛsɛgɛli di i ma ani ka i yɛrɛ ladamu nɔgɔya CSS fɛ.

Aw ye Bootstrap Icons sɔrɔ

Bootstrap ka taamasiyɛnw

Aw k'a kɛ aw ta ye ni Bootstrap Themes ofisiyaliw ye

aw bɛ Bootstrap ta ka taa sanfɛ ni barokun ɲumanw ye ka bɔ Bootstrap barokunw suguba ofisiyali la . Barokunw bɛ jɔ Bootstrap kan i n’a fɔ u yɛrɛ ka karamɔgɔya janyalenw, minnu falen bɛ fɛn kuraw ni fɛn kuraw la, sɛbɛnniw, ani jɔli baarakɛminɛn barikamaw.

Bootstrap barokunw lajɛ

Bootstrap ka barokunw