Twe kɔ emu nsɛm atitiriw no so
Check
Foforo wɔ v5.2 mu CSS nsakraeɛ, offcanvas a ɛyɛ mmuaeɛ, utilities foforɔ, ne nea ɛkeka ho! Bootstrap a wɔde hyɛ mu

Fa Bootstrap kyekyere nsɛmma nhoma ahorow a ɛyɛ ntɛm, ɛyɛ adwuma

Frontend adwinnade a tumi wom, wotumi trɛw mu, na ɛwɔ nneɛma pii. Fa Sass si na yɛ no sɛnea wopɛ, fa grid nhyehyɛe ne nneɛma a wɔadi kan ayɛ no di dwuma, na fa JavaScript plugins a ahoɔden wom ba nnwuma ba nkwa mu.

npm i [email protected]
Kenkan docs no

Mprempren v5.2.1 · Twe · v4.6.x docs · Nneɛma a wɔayi no adi nyinaa

Fi ase ɔkwan biara a wopɛ so

Huruw kɔ ɔdan no mu pɛɛ ne Bootstrap—fa CDN no di dwuma, fa package manager no so fa gu so, anaa twe source code no.

Kenkan instɔlehyɛn ho nkrataa

Install via package manager no so

Install Bootstrap no fibea Sass ne JavaScript fael ahorow no denam npm, RubyGems, Composer, anaa Meteor so. Package managed installs no nka nkrataa anaa yɛn build scripts a edi mũ no ho. Wubetumi nso de yɛn npm template repo no adi dwuma de ayɛ Bootstrap project ntɛmntɛm denam npm so.

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

Kenkan yɛn instɔlehyɛn docs no ma info pii ne package managers foforo.

Fa CDN so ka ho

Sɛ ɛho hia sɛ wode Bootstrap CSS anaa JS a wɔaboaboa ano no nkutoo ka ho a, wubetumi de jsDelivr adi dwuma . Hwɛ no wɔ adeyɛ mu ne yɛn mfiase ntɛm a ɛnyɛ den , anaa hwehwɛ nhwɛso ahorow no mu na woahuruw ahyɛ wo adwuma a edi hɔ no ase. Wubetumi nso apaw sɛ wode Popper ne yɛn JS bɛka ho wɔ ɔkwan soronko so .

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

Kenkan yɛn akwankyerɛ nhoma ahorow a ɛkyerɛ sɛnea wofi ase no

Nya ahuruhuruw wɔ Bootstrap fibea fael ahorow a wɔde bɛka ho wɔ adwuma foforo bi mu a yɛn aban akwankyerɛfo ka ho.

Wɛbsaet a wɔde ahyɛ mu Boa Vite

Fa Sass yɛ biribiara sɛnea wopɛ

Bootstrap de Sass di dwuma ma modular ne customizable architecture. Fa nneɛma a wuhia nkutoo ba, ma wiase nyinaa nhyehyɛe te sɛ gradients ne shadows nyɛ adwuma, na fa yɛn variables, maps, functions, ne mixins kyerɛw w’ankasa CSS.

Sua pii fa sɛnea wobɛsakra wo ho no ho

Fa Bootstrap no Sass no nyinaa ka ho

Import stylesheet biako na woakɔ mmirikatu ahorow no mu ne yɛn CSS no afã biara.

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

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

Sua pii fa yɛn wiase nyinaa Sass akwan horow ho .

Fa nea wuhia no ka ho

Ɔkwan a ɛyɛ mmerɛw a wobɛfa so ayɛ Bootstrap no sɛnea wopɛ—fa CSS a wuhia nkutoo ka ho.

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

Sua pii fa Bootstrap a wode bedi dwuma ne Sass ho .

Si na trɛw mu wɔ bere ankasa mu ne CSS nsakrae ahorow

Bootstrap 5 rekɔ so wɔ bere biara a wɔayi no adi no mu de adi dwuma yiye ama CSS nsakrae ahorow ama wiase nyinaa asɛmti ahorow, ankorankoro afã horow, ne mpo mfaso horow. Yɛde nsakraeɛ du du pii ma kɔla, font styles, ne nea ɛkeka ho wɔ :rootlevel bi a wɔde bedi dwuma wɔ baabiara. Wɔ components ne utilities so no, wɔde CSS variables no scoped kɔ class a ɛfa ho no so na ɛnyɛ den sɛ wɔbɛsesa.

Sua pii fa CSS nsakrae ahorow ho

CSS nsakrae ahorow a wɔde bedi dwuma

Fa yɛn wiase nyinaa :rootnsakrae biara di dwuma fa kyerɛw style foforo. CSS variables de var(--bs-variableName)syntax no di dwuma na mmofra elements betumi anya agyapade.

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

Customizing nam CSS nsakrae ahorow so

Override global, component, anaa utility class variables na woayɛ Bootstrap sɛnea wopɛ no pɛpɛɛpɛ. Ɛho nhia sɛ wobɛsan abɔ mmara biara ho dawuru, nsakrae bo foforo ara kwa.

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

Nneɛma a ɛwom, hyia Utility API no

Foforo wɔ Bootstrap 5 mu, yɛn utilities no afei de yɛn Utility API na ɛyɛ . Yɛkyekyeree no sɛ Sass map a ɛwɔ nneɛma pii a wobetumi ayɛ no ntɛmntɛm na ɛnyɛ den. Ɛnyɛ mmerɛw da sɛ wode utility class biara bɛka ho, ayi afi hɔ, anaasɛ wobɛsesa. Ma utilities nyɛ nea ɛyɛ adwuma, fa pseudo-class variants ka ho, na fa edin a wɔahyɛ da ayɛ ma wɔn.

Sua pii fa nneɛma a wɔde di dwuma ho Hwehwɛ nneɛma a wɔayɛ no sɛnea wopɛ

Yɛ nneɛma a ɛwom no sɛnea wopɛ ntɛmntɛm
// 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 plugins a ahoɔden wom a jQuery nnim

Fa nneɛma a ahintaw a wotumi sesa, modals ne offcanvas menus, popovers ne tooltips, ne nea ɛkeka ho pii ka ho ntɛm —ne nyinaa a jQuery nni mu. JavaScript a ɛwɔ Bootstrap mu no yɛ HTML-a edi kan, a ɛkyerɛ sɛ plugins a wode bɛka ho no yɛ mmerɛw te sɛ nea wode dataattributes bɛka ho. Wohia tumi kɛse? Fa ankorankoro plugins ka ho wɔ nhyehyɛe kwan so.

Sua pii fa Bootstrap JavaScript ho

Data su API

Dɛn nti na wobɛkyerɛw JavaScript pii bere a wubetumi akyerɛw HTML no? Ɛkame ayɛ sɛ Bootstrap JavaScript plugins no nyinaa wɔ data API a edi kan, a ɛma wutumi de JavaScript di dwuma denam datasu ahorow a wode bɛka ho ara kwa so.

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

Sua pii fa yɛn JavaScript ho sɛ module ne programmatic API a wode bedi dwuma .

Plugin ahorow a wɔahyehyɛ no yiye

Bootstrap no wɔ plugins dumien a wubetumi de akɔto adwuma biara mu. Fa wɔn nyinaa gu prɛko pɛ, anaa paw nea wuhia nkutoo.

Nkaebɔ

Kyerɛ na fa kɔkɔbɔ nkrasɛm sie ma wɔn a wɔde di dwuma no.

Bɔtom

Programmatically di dwuma tebea no so ma buttons.

Carousel a wɔde yɛ nneɛma

Fa slideshows ka kratafa biara ho, a crossfade mmoa ka ho.

Gu

Trɛw nsɛm a ɛwɔ mu no mu na fa gu fam, anaa yɛ accordion ahorow.

Dropdown a ɛwɔ hɔ

Yɛ menu ahorow a ɛwɔ link ahorow, nneyɛe, nkrataa, ne nea ɛkeka ho.

Modal a wɔde di dwuma

Fa nkɔmmɔbɔ a ɛyɛ mmerɛw na ɛyɛ mmuae ka wo dwumadi no ho.

Offcanvas a wɔde di dwuma

Si na dannan afã a ahintaw no kɔ kratafa biara mu.

Popover a ɛwɔ hɔ

Yɛ custom overlays ahorow. Wɔasi no wɔ Popper so.

Nwoma mmobɔwee

Fa wo ho yɛ update active nav links a egyina krataafa scroll so.

Tab no

Ma Bootstrap nav afã horow no kwan ma ɛnsakra emu nsɛm.

Toto

Kyerɛ na fa amanneɛbɔ ahorow sie ma wo nsrahwɛfo.

Nnwinnade ho afotu

Fa nea wɔahyɛ da ayɛ no si browser adwinnade ho nyansahyɛ ahorow ananmu. Wɔasi no wɔ Popper so.

Fa Bootstrap Icons yɛ no sɛnea wopɛ

Bootstrap Icons yɛ open source SVG icon nhomakorabea a ɛwɔ glyphs bɛboro 1,500, a wɔde pii ka ho wɔ bere biara a wɔayi no adi. Wɔayɛ no sɛ ɛnyɛ adwuma wɔ adwuma biara mu, sɛ́ wode Bootstrap ankasa bedi dwuma anaasɛ womfa nni dwuma. Fa wɔn di dwuma sɛ SVGs anaa icon fonts—nnwuma abien no nyinaa ma wo vector scaling ne customization a ɛnyɛ den denam CSS so.

Nya Bootstrap Nsɛnkyerɛnnede ahorow

Bootstrap Nsɛnkyerɛnnede ahorow

Ma ɛnyɛ wo dea ne Bootstrap Themes a ɛyɛ aban de

Fa Bootstrap kɔ ɔfa a edi hɔ no so denam nsɛmti a ɛyɛ fɛ a efi Bootstrap Nsɛmti gua a ɛyɛ aban de no so . Wɔasi nsɛmti wɔ Bootstrap so sɛ wɔn ankasa nhyehyɛe a wɔatrɛw mu, a ɛyɛ adefo a ɛwɔ nneɛma foforo ne plugins, nkrataa, ne nnwinnade a ɛyɛ den a wɔde si dan.

Hwehwɛ Bootstrap Nsɛmti ahorow no mu

Bootstrap Nsɛmti ahorow