Na-akwaga na v5

Sochie ma nyochaa mgbanwe na faịlụ isi mmalite Bootstrap, akwụkwọ na akụrụngwa iji nyere gị aka ịkwaga site na v4 gaa v5.

Na ibe a

v5.2.0

Nhazi eweghachitere

Bootstrap v5.2.0 na-egosipụta mmelite aghụghọ dị nro maka obere akụkụ na akụrụngwa n'ofe ọrụ ahụ, ọkachasị site na border-radiusụkpụrụ a nụchara anụcha na bọtịnụ na njikwa ụdị . Ejikwa ibe obibi ọhụrụ emelite akwụkwọ anyị, nhazi docs dị mfe nke na-anaghị adakpọ akụkụ nke sidebar, yana ihe atụ ama ama nke Bootstrap Icons .

Ọtụtụ mgbanwe CSS

Anyị emelitela akụrụngwa anyị niile iji jiri mgbanwe CSS. Ọ bụ ezie na Sass ka na-akwado ihe niile, emelitela akụrụngwa nke ọ bụla ka ọ tinye mgbanwe CSS na klaasị ntọala akụrụngwa (dịka, .btn), na-enye ohere maka nhazi oge nke Bootstrap. Na mwepụta ndị na-esote, anyị ga-aga n'ihu na-agbasawanye ojiji nke mgbanwe CSS n'ime nhazi, ụdị, ndị enyemaka, na akụrụngwa anyị. Gụkwuo maka mgbanwe CSS na mpaghara ọ bụla na ibe akwụkwọ ha.

Anyị CSS agbanwe ojiji ga-abụ dịtụ ezughi ezu ruo mgbe Bootstrap 6. Ọ bụ ezie na anyị ga-amasị n'ụzọ zuru ezu mejuputa ihe ndị a n'ofe osisi, ha na-eme na-agba ọsọ n'ihe ize ndụ nke na-akpata imebi mgbanwe. Dịka ọmụmaatụ, ịtọ $alert-border-width: var(--bs-border-width)na koodu isi mmalite anyị na-agbaji Sass nwere ike na koodu nke gị ma ọ bụrụ na ị na-eme $alert-border-width * 2ihe ụfọdụ.

Dị ka nke a, ebe ọ bụla enwere ike, anyị ga-aga n'ihu na-aga n'ihu na mgbanwe CSS ndị ọzọ, mana biko mara na mmejuputa anyị nwere ike ịdị ntakịrị na v5.

Ọhụrụ`_maps.scss`

Bootstrap v5.2.0 webatara faịlụ Sass ọhụrụ yana _maps.scss. Ọ na-ewepụta ọtụtụ maapụ Sass _variables.scssiji dozie esemokwu ebe emeliteghị maapụ izizi na maapụ nke abụọ na-agbatị ha. Dịka ọmụmaatụ, anaghị etinye mmelite maka $theme-colorsmaapụ isiokwu ndị ọzọ dabere na $theme-colors, na-emebi usoro nhazi nhazi igodo. Na nkenke, Sass nwere oke ebe ọ bụrụ na ejirila ndabara ma ọ bụ maapụ , enweghị ike imelite ya. Enwere mmejọ yiri nke ahụ na mgbanwe CSS mgbe ejiri ha mepụta mgbanwe CSS ndị ọzọ.

Nke a bụ ya mere mgbanwe mgbanwe dị na Bootstrap ga-abịa mgbe @import "functions", mana tupu @import "variables"na ihe ndị ọzọ nchịkọta mbubata anyị. Otu a na-emetụta maapụ Sass-ị ga-emerịrị ihe ndabara tupu ejiri ya. Ebugharịla maapụ ndị a na nke ọhụrụ _maps.scss:

$theme-colors-rgb
$utilities-colors
$utilities-text
$utilities-text-colors
$utilities-bg
$utilities-bg-colors
$negative-spacers
$gutters

Omenala Bootstrap CSS na-ewu kwesịrị ịdị ugbu a ka nke a nwere mbubata maapụ dị iche.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

Ngwa ọhụrụ

Akụrụngwa font-weightgbasaara iji tinye .fw-semiboldmaka mkpụrụedemede ọkara siri ike.
Akụrụngwa border-radiusgbasaara iji tinye nha ọhụrụ abụọ, .rounded-4yana .rounded-5, maka nhọrọ ndị ọzọ.

Mgbanwe ndị ọzọ

Ewebata $enable-container-classesnhọrọ ọhụrụ. - Ugbu a mgbe ị na-abanye na nhazi CSS Grid nnwale, .container-*a ka ga-achịkọta klaasị, ọ gwụla ma edobere nhọrọ a ka false. Ngwa na-edokwa ụkpụrụ gọta ha ugbu a.
Ngwa Offcanvas nwere ụdị dị iche iche na-anabata . Klas izizi .offcanvaska agbanwebeghị - ọ na-ezobe ọdịnaya n'ofe ebe nlele niile. Iji mee ka ọ zaghachi, gbanwee klaasị ahụ ka ọ bụrụ klaasị .offcanvasọ bụla .offcanvas-{sm|md|lg|xl|xxl}.
Ndị nkesa tebụl kariri abanyela ugbu a. - Anyị ewepụla ihe siri ike ma sie ike ịkwụsị oke n'etiti otu tebụl wee bugharịa ya na klaasị nhọrọ ị nwere ike itinye, .table-group-divider. Lee akwụkwọ akụkọ tebụl maka ọmụmaatụ.
Edegharịrị Scrollspy iji jiri Intersection Observer API , nke pụtara na ị chọghịzi ihe mkpuchi nne na nna, deprecatesoffsetconfig, na ndị ọzọ. Chọọ maka mmejuputa Scrollspy gị ka ọ bụrụ nke ziri ezi yana na-agbanwe agbanwe n'ịkọwapụta ụgbọ mmiri ha.
Popovers na Tooltips na-ejizi mgbanwe CSS.Emelitela ụfọdụ mgbanwe CSS site na ndị otu Sass ha iji belata ọnụọgụ mgbanwe. N'ihi ya, agbanweela mgbanwe atọ na ntọhapụ a: $popover-arrow-color, $popover-arrow-outer-color, na $tooltip-arrow-color.
Ndị enyemaka ọhụrụ agbakwunyere .text-bg-{color}. Kama ịtọlite onye ọ bụla .text-*na .bg-*akụrụngwa, ị nwere ike iji ugbu a ndị na- .text-bg-*enyere aka mee ka background-colorihu ihu dị iche color.
Mgbanwe agbakwunyere .form-check-reverseiji tụgharịa usoro aha akara yana igbe nyocha/redio metụtara.
agbakwunyereOgidi ndị nwere eriri na- akwado tebụl site na .table-striped-columnsklaasị ọhụrụ.

Maka ndepụta mgbanwe zuru oke, hụ ọrụ v5.2.0 na GitHub .

v5.1.0

Nkwado nnwale agbakwunyere maka okirikiri nhọrọ ukwuu CSS . - Nke a bụ ọrụ na-aga n'ihu, ma ọ dịbeghị njikere maka iji mmepụta ihe, mana ị nwere ike ịbanye na njirimara ọhụrụ site na Sass. Iji mee ya, gbanyụọ grid ndabara, site na ịtọ ntọala$enable-grid-classes: false ma mee ka Grid CSS rụọ ọrụ site na ịtọ $enable-cssgrid: true.
Navbars emelitere iji kwado apụọ kanvas. - Tinye drawer offcanvas n'ime ụgbọ mmiri ọ bụla nwere .navbar-expand-*klaasị na-anabata ya yana ụfọdụ akara ngosi.
agbakwunyere akụrụngwa ebe nchekwa ọhụrụ ọhụrụ . - Ngwa anyị kachasị ọhụrụ, ụzọ isi nye ngọngọ nwa oge n'ọnọdụ ezigbo ọdịnaya iji nyere aka gosi na ihe ka na-ebunye na saịtị ma ọ bụ ngwa gị.
Ngwa mgbakwunye mebiri emebi ugbu a na-akwado ndakpọ kehoraizin . - Tinye .collapse-horizontalna gị .collapsedaa widthkama nke height. Zere imegharị ihe nchọgharị site na ịtọ amin-height ma ọ bụ height.
agbakwunyere nchịkọta ọhụrụ yana ndị enyemaka iwu kwụ ọtọ. - Tinye ngwa ngwa ngwa ngwa ọtụtụ flexbox iji mepụta usoro nhazi ngwa ngwa na ngwugwu . Họrọ site na ngwugwu kwụ ọtọ ( .hstack) na vetikal ( .vstack) Tinye nkewa kwụ ọtọ ka <hr>ihe ndị nwere nke ọhụrụ.vr enyere aka .
:rootAgbakwunyere mgbanwe CSS ọhụrụ zuru ụwa ọnụ . - Agbakwunyere ọtụtụ mgbanwe CSS ọhụrụ na :rootọkwa maka njikwa <body>ụdị. Ihe ndị ọzọ na-arụ ọrụ, gụnyere n'ofe akụrụngwa na akụrụngwa anyị, mana ugbu a gụọ ya mgbanwe CSS na ngalaba Hazie .
Agba agbachapụrụ agbachapụ na ngwa nzụlite iji jiri mgbanwe CSS, tinyekwa opacity ederede ọhụrụ na akụrụngwa enweghị mwepu n'okirikiri . - .text-* na .bg-*eji mgbanwe CSS na rgba()ụkpụrụ agba arụ ụlọ ọrụ ugbu a, na-enye gị ohere iji ngwa opacity ọhụrụ hazie ngwa ọ bụla ngwa ngwa.
Agbakwunyere ihe atụ snippet ọhụrụ dabere iji gosi ka esi hazie ngwa anyị. - Were ihe atụ Snippet ọhụrụ anyị dị njikere iji akụrụngwa ahaziri ahazi yana ụkpụrụ ndị ọzọ a na-ahụkarị . Na-agụnye n'okpuru ụkwụ , dropdowns , ndepụta otu , na modal .
E wepụrụ ụdị ndowe ejighi ya na popovers na ndụmọdụ ngwaọrụ dịka ọ bụ naanị Popper na-edozi ihe ndị a. $tooltip-margine deprecated na atọrọ kanull na usoro a.

Chọrọ ozi ndị ọzọ?Gụọ blọgụ v5.1.0.

Lee anya! Mgbanwe na ntọhapụ mbụ anyị bụ Bootstrap 5, v5.0.0, ka edekọtara n'okpuru. Ha anaghị egosipụta mgbanwe ndị agbakwunyere egosiri n'elu.

Ndabere

Wepụrụ jQuery.
Emelitere site na Popper v1.x gaa na Popper v2.x.
Dochie Libsass na Dart Sass dị ka onye nchịkọta Sass anyị nyere Libsas emebiela.
Si Jekyll kwaga Hugo maka iwu akwụkwọ anyị

Nkwado ihe nchọgharị

Wepụrụ Internet Explorer 10 na 11
Wepụrụ Microsoft Edge <16 (Legacy Edge)
Wepụrụ Firefox <60
Ewepụla Safari <12
Ewepụla iOS Safari <12
Etufuru Chrome <60

Mgbanwe akwụkwọ

Ibe mbụ edegharịrị, nhazi akwụkwọ na n'okpuru.
agbakwunyere ntuziaka ngwugwu ọhụrụ .
Agbakwunyere ngalaba ahaziri ọhụrụ , dochie v4's Theming page , na nkọwa ọhụrụ na Sass, nhọrọ nhazi ụwa, atụmatụ agba, mgbanwe CSS, na ndị ọzọ.
Haziri ụdị akwụkwọ niile ka ọ bụrụ ngalaba ụdị ọhụrụ , na-ekewa ọdịnaya ahụ n'ime ibe elekwasị anya karịa.
N'otu aka ahụ, emelitere ngalaba nhazi , iji wepụta ọdịnaya grid nke ọma.
A kpọgharịrị aha ibe mpaghara "Navs" ka ọ bụrụ "Navs & Tabs".
A kpọgharịrị aha ibe "Checks" ka ọ bụrụ "Checks & Redio".
Haziri navbar ma gbakwunye subnav ọhụrụ iji mee ka ọ dịkwuo mfe ịgagharị na saịtị anyị na ụdị docs anyị.
Ụzọ mkpirisi ahụigodo ọhụrụ agbakwunyere maka mpaghara ọchụchọ: Ctrl + /.

Sass

Anyị ewepụla mkpọkọta maapụ Sass ndabara iji mee ka ọ dịrị mfe iwepu ụkpụrụ anaghị arụ ọrụ. Buru n'uche na ị ga-akọwapụta ụkpụrụ niile dị na maapụ Sass dịka $theme-colors. Lelee otu esi eme maapụ Sass .
Na-agbajiỌrụ gbanwegharịrị aha color-yiq()yana mgbanwe ndị emetụtara color-contrast()ka ọ naghịzi emetụta oghere agba YIQ. Lee #30168.
- $yiq-contrasted-thresholda na-akpọgharị ya ka $min-contrast-ratio.
- $yiq-text-darka na $yiq-text-light-akpọgharịkwa aha ya $color-contrast-darkna $color-contrast-light.
Na-agbajiAjụjụ mgbasa ozi mixins paramita agbanweela maka ụzọ ezi uche dị na ya karịa.
- media-breakpoint-down()na-eji ebe nkwụsịtụ n'onwe ya kama ebe nkwụsịtụ na-esote (dịka ọmụmaatụ, media-breakpoint-down(lg)kama media-breakpoint-down(md)ebe elere anya dị obere karịa lg).
- N'otu aka ahụ, oke nke abụọ n'ime na media-breakpoint-between()-ejikwa ebe nkwụsịtụ n'onwe ya kama ebe nkwụsịtụ na-esote (dịka ọmụmaatụ, media-between(sm, lg)kama media-breakpoint-between(sm, md)ilekwasị anya n'etiti smna lg).
Na-agbajiỤdị mbipụta na $enable-print-stylesmgbanwe wepụrụ. Klas ngosi mbipụta ka dị gburugburu. Lee #28339 .
Na-agbajiEtufuru color(), theme-color(), ma na gray()-arụ ọrụ maka mgbanwe dị iche iche. Lee #29083 .
Na-agbajitheme-color-level()Ọrụ kpọgharịrị aha color-level()ugbu a na-anabata agba ọ bụla ịchọrọ kama naanị $theme-coloragba. Hụ #29083 Lezienụ anya: color-level() e mechara tinye na v5.0.0-alpha3.
Na-agbajiA kpọgharịrị aha ya na maka $enable-prefers-reduced-motion-media-querynkenke .$enable-pointer-cursor-for-buttons$enable-reduced-motion$enable-button-pointers
Na-agbajiWepụrụ ngwakọta ahụ bg-gradient-variant(). Jiri .bg-gradientklaasị ka ịgbakwunye gradients na ọcha kama .bg-gradient-*klaasị emepụtara.
Na-agbaji E wepụrụ ngwakọta ndị ewepụrụ na mbụ:
- hover, hover-focus, plain-hover-focus, nahover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(wepukwara klaasị ịba uru, .text-hide)
- visibility()
- form-control-focus()
Na-agbajiỌrụ akpọgharịrị aha scale-color()ya shift-color()ka ịzenarị nkukota ya na ọrụ ịcha agba nke Sass.
box-shadowmixins ugbu a na-enye nullụkpụrụ ma daa nonesite na ọtụtụ arụmụka. Lee #30394 .
Ngwakọta border-radius()ahụ nwere uru ndabara ugbu a.

Usoro agba

Usoro agba nke na-arụ ọrụ na color-level()wepụrụ $theme-color-intervalna ihu ọma nke usoro agba ọhụrụ. A lighten()na darken()-eji na dochie ọrụ niile na koodu tint-color()anyị shade-color(). Ọrụ ndị a ga-agwakọta agba na ma ọ bụ ọcha ma ọ bụ oji kama ịgbanwe ìhè ya site na oke ego. The shift-color()ga-ma tint ma ọ bụ ndo a agba dabere ma ya arọ oke ọ dị mma ma ọ bụ adịghị mma. Hụ #30622 maka nkọwa ndị ọzọ.
Agbakwunyere tints ọhụrụ na ndò maka agba ọ bụla, na-enye agba dị iche iche itoolu maka agba isi ọ bụla, dị ka mgbanwe Sass ọhụrụ.
Ọdịiche agba emelitere. Oke ọdịiche agba agbagoro site na 3:1 ruo 4.5:1 yana emelitere agba anụnụ anụnụ, akwụkwọ ndụ akwụkwọ ndụ, cyan na pink iji hụ na ọdịiche WCAG 2.1 AA dị. Ọ gbanwekwara agba ọdịiche agba $gray-900anyị ka ọ bụrụ $black.
Iji kwado usoro agba anyị, anyị agbakwunyela omenala tint-color()na shade-color()ọrụ ọhụrụ iji gwakọta agba anyị nke ọma.

Mmelite grid

Ebe nkwụsị ọhụrụ! Agbakwunyere nkwụsịtụ ọhụrụ xxlmaka 1400pxna elu. Enweghị mgbanwe na ebe nkwụsịtụ ndị ọzọ niile.
Ọwa mmiri emelitere. A na-edobe olulu mmiri ugbu a na rems, ma dị warara karịa v4 ( 1.5rem, ma ọ bụ ihe dị ka 24px, gbadata site na 30px). Nke a na-ejikọta gọọmenti sistemu grid anyị na akụrụngwa oghere anyị.
- Klas gutter ọhụrụ agbakwunyere ( .g-*, .gx-*, na .gy-*) iji chịkwaa ọwa mmiri kwụ ọtọ / kwụ ọtọ, ọwa mmiri kwụ ọtọ na gọta kwụ ọtọ.
- Na-agbajiA kpọgharịrị aha .no-guttersya ka .g-0ọ dakọbara akụrụngwa gọta ọhụrụ.
Ogidi adịkwaghị position: relativeetinye n'ọrụ, yabụ ị nwere ike itinye .position-relativen'ime ihe ụfọdụ iji weghachi omume ahụ.
Na-agbajiWepụrụ ọtụtụ .order-*klaasị na-agakarị ejighi ya. Ugbu a, anyị na-enye naanị .order-1site .order-5na igbe.
Na-agbajiEtufuru .mediaakụrụngwa ahụ dịka enwere ike iji ngwa eji arụ ọrụ megharịa ya ngwa ngwa. Hụ #28265 na ibe ọrụ mgbanwe maka ọmụmaatụ .
Na-agbaji bootstrap-grid.cssugbu a na-emetụta naanị box-sizing: border-boxkọlụm kama ịtọgharịa igbe igbe zuru ụwa ọnụ. N'ụzọ dị otú a, enwere ike iji ụdị grid anyị n'ọtụtụ ebe na-enweghị nnyonye anya.
$enable-grid-classesanaghịkwa egbochi ọgbọ akpa klas ọzọ. Lee #29146.
Emelitere make-colmixin na ndabara ka ọ bụrụ kọlụm nhata na-enweghị oke akọwapụtara.

Ọdịnaya, Malitegharịa, wdg

Agbanyere RFS ugbu a site na ndabara. Isiokwu ndị na-ejifont-size()mixin ga-edozi ha ozugbofont-sizena ọnụ ọgụgụ na nlele anya. Eji v4 abanye na mbụ njirimara a.
Na-agbajiMechie ụdị ihe ngosi anyị iji jiri maapụ Sass dochie $display-*mgbanwe anyị. $display-font-sizesE wepụrụkwa $display-*-weightmgbanwe ndị dị n'otu n'otu maka otu s $display-font-weightna emeziri font-size.
.display-*Agbakwunyere nha isiokwu abụọ ọhụrụ , .display-5yana .display-6.
Edebere njikọ na ndabara (ọ bụghị naanị na hover), belụsọ na ha bụ akụkụ nke akụrụngwa akọwapụtara.
Tebụl emegharịrị ka ha nwee ume ụdị ha wee jiri mgbanwe CSS wughachi ha maka njikwa karịa ịke.
Na-agbajiTebụl akwụghị ụgwọ anaghị eketa ụdị ọzọ.
Na-agbaji .thead-lightma .thead-darktụba ya na nkwado nke .table-*klaasị dị iche iche nke enwere ike iji maka ihe okpokoro niile ( thead, tbody, tfoot, tr, thna td).
Na-agbajiA table-row-variant()na-akpọgharị mixin na table-variant()ma nabata naanị 2 paramita: $color(aha agba) na $value(koodu agba). A na-agbakọ agba oke na ụda olu na-akpaghị aka dabere n'ụdị mgbanwe nke tebụl.
Kewaa ihe dị iche iche nke okpokoro okpokoro n'ime -yna -x.
Na-agbajiEwepụla .pre-scrollableklaasị. Lee #29135
Na-agbaji .text-*Utilities anaghị agbakwunye hover na steeti elekwasị anya na njikọ ọzọ. .link-*enwere ike iji klas inyeaka kama. Lee #29267
Na-agbajiEwepụla .text-justifyklaasị. Lee #29793
Na-agbaji ~~<hr>ọcha na-eji ugbu a heightkama borderịkwado sizenjirimara ahụ nke ọma. Nke a na-enyekwara aka iji ngwa mgbochi mepụta oke nkewa (dịka ọmụmaatụ, <hr class="py-1">).~~
Tọgharịa ndabara ndabara padding-leftna <ul>ihe <ol>ndị sitere na ndabara ihe nchọgharị 40pxgaa na 2rem.
agbakwunyere $enable-smooth-scroll, nke na-emetụta scroll-behavior: smoothụwa niile - ewezuga ndị ọrụ na-arịọ maka mbelata ngagharị site na prefers-reduced-motionajụjụ mgbasa ozi. Lee #31877

RTL

Ntụziaka kwụ ọtọ, mgbanwe dị iche iche, akụrụngwa, na mixins ka ahagharịrị aha ka iji akụrụngwa ezi uche dị ka ndị ahụ dị na nhazi flexbox — dịka, startna endn'ọnọdụ leftna right.

Ụdị

Agbakwunyere ụdị na-ese n'elu mmiri! Anyị akwalitela ihe atụ akara n'elu mmiri ka ọ bụrụ ngwa ngwa akwadoro nke ọma. Hụ ibe aha n'ese n'elu.
Na-agbaji Ihe njiri mara obodo na ahaziri ahazi. Igbe nrịbama, redio, nhọrọ na ntinye ndị ọzọ nwere klaasị ala na omenala na v4 ka agbakọwo. Ugbu a ihe fọrọ nke nta ka ọ bụrụ ụdị ụdị anyị niile bụ omenala, ọtụtụ na-enweghị mkpa HTML omenala.
- .custom-control.custom-checkboxdị ugbu a .form-check.
- .custom-control.custom-custom-radiodị ugbu a .form-check.
- .custom-control.custom-switchdị ugbu a .form-check.form-switch.
- .custom-selectdị ugbu a .form-select.
- .custom-filema .form-filejiri ụdị omenala dochie ya n'elu .form-control.
- .custom-rangedị ugbu a .form-range.
- Ahapụla nwa afọ .form-control-filena .form-control-range.
Na-agbajiWepụrụ .input-group-appendna .input-group-prepend. Ị nwere ike tinye naanị bọtịnụ yana .input-group-textdị ka ụmụaka nke otu ntinye aka ozugbo.
A na-edozi radius oke na-efu ogologo oge na otu ntinye nwere mperi nzaghachi nkwado site n'ịgbakwunye .has-validationklaasị na ntinye aka na nkwado.
Na-agbaji Klas nhazi ụdị agbadoro maka sistemu grid anyị. Jiri grid na akụrụngwa anyị kama .form-group, .form-row, ma ọ bụ .form-inline.
Na-agbajiMpempe akwụkwọ achọrọ ugbu a .form-label.
Na-agbaji .form-textnomore sets display, na-enye gị ohere ịmepụta inline ma ọ bụ gbochie ederede enyemaka dị ka ịchọrọ naanị site na ịgbanwe ihe HTML.
A naghịzi eji njikwa ụdị emezi emezi heightmgbe enwere ike, kama na-aga n'ihu min-heightiji kwalite nhazi na ndakọrịta na ihe ndị ọzọ.
Ejikwaghị akara ngosi nkwado na <select>s nwere multiple.
Faịlụ Sass isi mmalite ahaziri ahazi n'okpuru scss/forms/, gụnyere ụdị ntinye otu.

Ngwa

Ụkpụrụ ejikọtara paddingọnụ maka ọkwa, achịcha achịcha, kaadị, mkpọda, ndị otu ndepụta, modals, popovers na ndụmọdụ ga-adabere na $spacermgbanwe anyị. Lee #30564 .

Accordion

Agbakwunyere akụrụngwa accordion ọhụrụ .

Nti mkpu

Mkpu nwere ihe atụ nwere akara ngosi .
E wepụrụ ụdị omenala maka <hr>s na njikere nke ọ bụla kemgbe ha na-ejibu currentColor.

Akara

Na-agbajiWepụrụ .badge-*klaasị agba niile maka akụrụngwa ndabere (dịka, jiri .bg-primarykama .badge-primary).
Na-agbajiEwepụla .badge-pill— jiri .rounded-pilluru kama.
Na-agbajiWepụrụ ntugharị na ụdị mgbado maka <a>na <button>ihe.
Mbara ndabara padding maka baajị si .25em/ .5emka .35em/ .65em.

Nri achịcha

Mee ka ọdịdị bred dị mfe site na iwepu padding, background-color, na border-radius.
Agbakwunyere akụrụngwa omenala CSS ọhụrụ --bs-breadcrumb-dividermaka nhazi dị mfe na-enweghị mkpa ịchịkọta CSS.

Bọtịnụ

Na-agbaji Bọtịnụ tụgharịa , nwere igbe nrịbama ma ọ bụ redio anaghị achọ Javascript ma nwee akara ọhụrụ. Anyị anaghị achọkwa ihe mkpuchi, tinye.btn-checknaklaasị<input>ọ bụla. Lee #30650 . Docs maka nke a esiwo na ibe bọtịnụ anyị gaa na ngalaba ụdị ọhụrụ..btn<label>
Na-agbaji Etufuru .btn-blockmaka akụrụngwa. Kama iji .btn-blockna .btn, kechie bọtịnụ gị .d-gridna .gap-*akụrụngwa iji tinye ha dịka achọrọ. Banye na klaasị na-anabata maka ịchịkwa ha karịa. Gụọ akwụkwọ ndị ahụ maka ọmụmaatụ ụfọdụ.
Emelitere anyị button-variant()yana button-outline-variant()mixins iji kwado paramita ndị ọzọ.
Bọtịnụ emelitere iji hụ na abawanyela ọdịiche dị na hover na steeti nọ n'ọrụ.
Bọtịnụ ndị nwere nkwarụ nwere ugbu a pointer-events: none;.

Kaadị

Na-agbajiDabara .card-deckna ihu ọma nke grid anyị. Kechie kaadị gị na klaasị kọlụm ma tinye .row-cols-*akpa nne na nna ka ha megharịa oche kaadị (mana na-ejikwa njikwa karịa nnabata).
Na-agbajiAhapụla .card-columnsnkwado nke Masonry. Lee #28922 .
Na-agbajiDochie .cardaccordion dabere na akụrụngwa Accordion ọhụrụ .

Carousel

agbakwunyere ụdị ọhụrụ .carousel-darkmaka ederede gbara ọchịchịrị, njikwa na ihe nrịbama (dị mma maka nzụlite dị mfe).
Akara ngosi chevron edochiri maka njikwa carousel jiri SVG ọhụrụ sitere na akara Bootstrap .

Mechie bọtịnụ

Na-agbajiA kpọgharịrị aha .closeka .btn-closeọ bụrụ aha dị ntakịrị.
Bọtịnụ mechie ugbu a na-eji a background-image(agbakwunyere SVG) kama nke ×dị na HTML, na-enye ohere maka nhazi dị mfe na-enweghị mkpa imetụ akara gị aka.
agbakwunyere ụdị ọhụrụ .btn-close-whitenke na-eji filter: invert(1)mee ka ọgbaghara dị elu dị elu megide nzụlite gbara ọchịchịrị.

daa

E wepụrụ arịlịka akwụkwọ mpịakọta maka accordions.

Mbelata

Agbakwunyere ụdịdị ọhụrụ .dropdown-menu-darkyana mgbanwe ndị metụtara maka mwụda gbara ọchịchịrị achọrọ.
Agbakwunyere mgbanwe ọhụrụ maka $dropdown-padding-x.
Gbanwee nkewa ndọda ahụ gbara ọchịchịrị maka ọdịiche ka mma.
Na-agbajiA na-akpalite ihe omume niile maka mwedata ugbu a na bọtịnụ mkpọda wee fụkọta ya na mmewere nne na nna.
Nchịkọta nhọrọ mwụda nwere ugbu a data-bs-popper="static"atọrọ njiri mara mgbe ndobe nke dropdown kwụ ọtọ, ma ọ bụ dobe dị na navbar. Nke a bụ Javascript anyị gbakwunyere ma na-enyere anyị aka iji ụdị ọnọdụ ọpụrụiche na-etinyeghị nsogbu na ndowe Popper.
Na-agbajiEwepụrụ flipnhọrọ maka ngwa mgbakwunye ndọda na nkwado nke nhazi Popper nke ala. Ị nwere ike gbanyụọ omume ntụgharị ahụ ugbu a site n'ịfefe usoro efu maka fallbackPlacementsnhọrọ na ntụgharị ntụgharị.
Enwere ike ịpịnye menus mwụda ugbu a site na autoCloseiji nhọrọ ọhụrụ iji jikwaa omume mmechi akpaaka . Ị nwere ike iji nhọrọ a ịnakwere ọpịpị dị n'ime ma ọ bụ na mpụga menu ndọpụta ka ọ na-emekọrịta ihe.
Dropdowns ugbu a na-akwado .dropdown-items ọbọp na <li>s.

Jumbotron

Na-agbajiWepụrụ akụrụngwa jumbotron ka enwere ike iji akụrụngwa megharịa ya. Hụ ihe atụ Jumbotron ọhụrụ anyị maka ngosi.

Ndepụta otu

.list-group-numberedAgbakwunyere mgbanwe ọhụrụ na ndetu otu.

Navs na taabụ

Agbakwunyere nullmgbanwe ọhụrụ maka font-size, font-weight, color, na :hover colorklaasị .nav-link.

Navbars

Na-agbajiNavbars chọrọ ugbu a akpa n'ime (iji mee ka ọ dị mfe ohere chọrọ yana CSS chọrọ).
Na-agbajiEnweghị .activeike itinye klas ahụ na .nav-items, a ga-etinyerịrị ya ozugbo na .nav-links.

Offcanvas

Agbakwunyere akụrụngwa offcanvas ọhụrụ .

Pagination

Njikọ pagination ugbu a nwere nhazi margin-leftnke na-agbakọta n'akụkụ niile ma kewapụ ya na ibe ya.
Etinyere transitions na njikọ pagination.

Popovers

Na-agbajiA kpọgharịrị aha .arrowya .popover-arrowna ndebiri popover nke ndabara.
whiteListNhọrọ ọzọ akpọgharịrị aha ka allowList.

Ndị na-agbagharị agbagharị

Ndị na-agba ọsọ na -asọpụrụ ugbu a prefers-reduced-motion: reducesite n'ibelata ihe nkiri. Lee #31882 .
Nhazi kwụ ọtọ spinner emelitere.

Toasts

Enwere ike idowe toasts ugbu a n'ọkwa site n'enyemaka .toast-containernke ihe eji etinye ihe .
Gbanwee oge toast ndabara ka ọ bụrụ sekọnd ise.
Ewepụ overflow: hiddenya na toasts wee jiri ọrụ kwesịrị ekwesị dochie border-radiusya calc().

Ntuziaka ngwaọrụ

Na-agbajiA kpọgharịrị aha .arrowka ọ bụrụ .tooltip-arrown'ụdị nrụtụ aka ngwaọrụ anyị.
Na-agbajiA na-agbanwe uru ndabara maka nke fallbackPlacementsahụ ka ọ bụrụ ['top', 'right', 'bottom', 'left']maka idobe ihe popper ka mma.
Na-agbajiwhiteListNhọrọ ọzọ akpọgharịrị aha ka allowList.

Ngwa ọrụ

Na-agbajiAkpọgharịrị aha ọtụtụ ụlọ ọrụ ka ọ jiri aha akụrụngwa ezi uche dị na ya kama aha ntụzịaka yana mgbakwunye RTL:
- Akpọgharịrị aha .left-*na .right-*na .start-*na .end-*.
- Akpọgharịrị aha .float-leftna .float-rightna .float-startna .float-end.
- Akpọgharịrị aha .border-leftna .border-rightna .border-startna .border-end.
- Akpọgharịrị aha .rounded-leftna .rounded-rightna .rounded-startna .rounded-end.
- Akpọgharịrị aha .ml-*na .mr-*na .ms-*na .me-*.
- Akpọgharịrị aha .pl-*na .pr-*na .ps-*na .pe-*.
- Akpọgharịrị aha .text-leftna .text-rightna .text-startna .text-end.
Na-agbajiAgbanyụrụ oke adịghị mma site na ndabara.
agbakwunyere .bg-bodyklas ọhụrụ maka ịtọ ntọala <body>ndabere ngwa ngwa na ihe ndị ọzọ.
Etinyere akụrụngwa ọnọdụ ọhụrụ maka top, right, bottom, na left. Uru gụnyere 0, 50%, na 100%maka akụrụngwa ọ bụla.
Agbakwunyere ọhụrụ .translate-middle-x& .translate-middle-yakụrụngwa na kehoraizin ma ọ bụ kwụ ọtọ n'etiti ihe zuru oke/ edobere n'ọnọdụ.
Agbakwunyere border-widthngwa ọhụrụ .
Na-agbajiAkpọgharịrị aha .text-monospaceya ka .font-monospace.
Na-agbajiEwepụrụ .text-hidedịka ọ bụ usoro ochie maka izobe ederede nke na-ekwesịghị ijikwa ọzọ.
Ngwa agbakwunyere .fs-*maka font-sizengwa ọrụ (nwere RFS agbanyere). Ndị a na-eji otu nha dị ka isiokwu ndabara HTML (1-6, nnukwu ruo obere), enwere ike gbanwee site na map Sass.
Na-agbajiUtilities akpọgharịrị aha .font-weight-*maka .fw-*nkenke na nkwekọ.
Na-agbajiUtilities akpọgharịrị aha .font-style-*maka .fst-*nkenke na nkwekọ.
Agbakwunyere .d-gridka igosipụta akụrụngwa yana ngwa ọhụrụ gap( .gap) maka CSS Grid na nhazi igbe flexbox.
Na-agbajiWepụrụ .rounded-smna rounded-lg, ma webata ọkwa ọhụrụ nke klaasị, .rounded-0ka .rounded-3. Lee #31687 .
Ngwa ọhụrụ agbakwunyere line-height: .lh-1, .lh-sm, .lh-basena .lh-lg. Lee ebe a .
Bugharịa .d-noneakụrụngwa dị na CSS anyị iji nye ya ibu karịa ngwa ngosi ndị ọzọ.
Agbatịkwara onye .visually-hidden-focusableinyeaka ka ọ rụọ ọrụ na arịa, na-eji :focus-within.

Ndị enyemaka

Na-agbaji Ndị enyemaka agbakwunyere na-anabata aha ka ahagharịrị ka ndị enyemaka ruru nwere aha klaasị ọhụrụ yana akparamagwa emelitere, yana mgbanwe CSS na-enyere aka.
- Aha klaasị agbanweela aha ka byọ bụrụx bụrụ n'ogo akụkụ. Dị ka ihe atụ, .ratio-16by9ugbu a .ratio-16x9.
- Anyị ahapụla ya.embed-responsive-item na-ahọpụta otu na mmewere maka onye .ratio > *nhọpụta dị mfe. Ọ dịghị klaasị ọzọ achọrọ, na onye inyeaka oke na-arụ ọrụ ugbu a na ihe HTML ọ bụla.
- Nke$embed-responsive-aspect-ratios Sass ka ahagharịrị aha $aspect-ratiosma mee ka ụkpụrụ ya dị mfe iji tinye aha klas yana pasent dị ka key: valueụzọ abụọ ahụ.
- A na-emepụta mgbanwe CSS ugbu a ma tinye ya maka uru ọ bụla na maapụ Sass. Gbanwee --bs-aspect-ratiomgbanwe dị na .ratioya ka imepụta oke akụkụ omenala ọ bụla .
Na-agbaji klaasị "Onye na-agụ ihuenyo" bụ klaasị "zoro anya n'anya" .
- Gbanwee faịlụ Sass site nascss/helpers/_screenreaders.scss ka ọ bụrụscss/helpers/_visually-hidden.scss
- Akpọgharịrị aha .sr-onlyna .sr-only-focusableka.visually-hidden na.visually-hidden-focusable
- A kpọgharịrị aha sr-only()wee sr-only-focusable()gwakọta ya visually-hidden()na visually-hidden-focusable().
bootstrap-utilities.cssugbu a gụnyekwara ndị na-enyere anyị aka. Achọghị ka ebubata ndị enyemaka n'ụlọ nrụpụta omenala ọzọ.

Javascript

Wepụrụ ndabere jQuery wee degharịa plugins ka ọ bụrụ Javascript oge niile.
Na-agbajiNjirimara data maka plugins Javascript niile bụ ahaziri aha ugbu a iji nyere aka ịmata ọrụ Bootstrap site na ndị ọzọ yana koodu nke gị. Dị ka ihe atụ, anyị na-eji data-bs-togglekama data-toggle.
Ngwa mgbakwunye niile nwere ike nabata onye nhọpụta CSS dị ka arụmụka mbụ. Ị nwere ike ịgafe mmewere DOM ma ọ bụ onye na-ahọrọ CSS ọ bụla dị irè iji mepụta ihe atụ ọhụrụ nke ngwa mgbakwunye:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigenwere ike ịgafe dị ka ọrụ na-anabata Bootstrap ndabara Popper config dị ka arụmụka, ka ị nwee ike jikọta nhazi ndabara a n'ụzọ gị. Na-emetụta ọdịda, popovers, na ndụmọdụ ndụmọdụ.
Agbanwe uru ndabara maka ihe fallbackPlacementska ọ bụrụ ['top', 'right', 'bottom', 'left']maka idobe ihe ndị kacha mma. Na-emetụta ọdịda, popovers, na ndụmọdụ ndụmọdụ.
Ewepụla mmesi obi ike na ụzọ ọha dị ka _getInstance()→ getInstance().