Twe kɔ emu nsɛm atitiriw no so Twe kɔ docs navigation so
Check
in English

Woretu akɔ v5 so

Di akyi na hwɛ nsakrae a aba wɔ Bootstrap fibea fael ahorow, nkrataa, ne nneɛma a ɛwom no mu na aboa wo ma woatu afi v4 akɔ v5.

Wɔ kratafa yi so

v5.2.0 na ɛwɔ hɔ

Nneɛma a wɔayɛ no foforo

Bootstrap v5.2.0 kyerɛ anifere nhyehyɛe update ma nsa kakraa bi afã horow ne agyapade wɔ adwuma no nyinaa mu, titiriw denam nsusuwii border-radiusahorow a wɔayɛ no yiye wɔ buttons ne form controls so . Yɛn nkrataa nso ayɛ foforo denam homepage foforo, docs nhyehyɛe a ɛyɛ mmerɛw a ɛnsɛe afã horow a ɛwɔ afã bi bio, ne nhwɛso ahorow a ɛda nsow kɛse a ɛfa Bootstrap Icons ho .

CSS nsakrae pii

Yɛayɛ yɛn components no nyinaa foforo de adi dwuma de CSS variables adi dwuma. Bere a Sass da so ara gyina biribiara so no, wɔayɛ ɔfã biara foforo de CSS nsakrae ahorow aka afã no nnyinaso adesua ahorow no ho (sɛ nhwɛso no, .btn), a ɛma kwan ma Bootstrap no yɛ bere ankasa mu nsakrae pii. Wɔ nsɛm a ɛbɛba akyiri yi mu no, yɛbɛkɔ so atrɛw yɛn CSS nsakrae ahorow a yɛde di dwuma no mu akɔ yɛn nhyehyɛe, nkrataa, aboafo, ne mfaso horow mu. Kenkan CSS nsakraeɛ ho nsɛm pii wɔ ɔfa biara mu wɔ wɔn nkrataa nkratafa so.

Yɛn CSS variable dwumadie no bɛyɛ nea ɛnwie pɛyɛ kakra kɔsi sɛ Bootstrap 6. Bere a yɛn ani begye ho sɛ yɛde yeinom bedi dwuma koraa wɔ board no nyinaa so no, wɔyɛ asiane sɛ ɛde nsakraeɛ a ɛbɛbubu aba. Sɛ nhwɛso no, nhyehyɛe $alert-border-width: var(--bs-border-width)a ɛwɔ yɛn source code no mu no bubu Sass a ebetumi aba wɔ w’ankasa code mu sɛ na woreyɛ $alert-border-width * 2esiane biribi nti a.

Sɛnea ɛte no, baabiara a ɛbɛyɛ yiye no, yɛbɛkɔ so apiapia akɔ CSS nsakrae pii so, nanso yɛsrɛ wo hu sɛ yɛn dwumadie no betumi ayɛ anohyeto kakra wɔ v5 mu.

Foforɔ_maps.scss

Bootstrap v5.2.0 de Sass fael foforo a ɛwɔ _maps.scss. Ɛtwe Sass asase mfonini ahorow pii fi mu _variables.scssde siesie asɛm bi a wɔamfa nsɛm foforo a wɔayɛ wɔ asase mfonini a edi kan bi mu no anni dwuma wɔ asase mfonini ahorow a ɛto so abien a ɛtrɛw mu no ho. Sɛ nhwɛso no, na wɔmfa updates to $theme-colorsno nni dwuma wɔ asɛmti map afoforo a ɛde ne ho to $theme-colors, a ɛbubu key customization adwumayɛ nhyehyɛe ahorow no so. Ne tiawa mu no, Sass wɔ anohyeto bi a sɛ wɔde default variable anaa map di dwuma wie a , wontumi nyɛ no foforo. Ɛwɔ sintɔ a ɛte saa ara wɔ CSS nsakraeɛ ho berɛ a wɔde di dwuma de hyehyɛ CSS nsakraeɛ foforɔ.

Eyi nti na ɛsɛ sɛ variable customizations wɔ Bootstrap mu ba akyi @import "functions", nanso ansa @import "variables"na ne yɛn import stack nkae no. Saa ara na ɛte wɔ Sass map ahorow ho—ɛsɛ sɛ wubu defaults no so ansa na wɔde adi dwuma. Wɔde asase mfonini ahorow a edidi so yi akɔ foforo no so _maps.scss:

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

Ɛsɛ sɛ wo Bootstrap CSS adan a woahyɛ da ayɛ no afei deɛ ɛyɛ biribi te sɛ yei a ɛwɔ maps import a ɛyɛ soronko.

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

Nneɛma foforo a wɔde di dwuma

  • Wɔatrɛw font-weightutilities a wɔde bɛka ho .fw-semiboldama semibold fonts.
  • Wɔatrɛw border-radiusutilities mu ma ɛde akɛse foforo abien aka ho, .rounded-4ne .rounded-5, ama nneɛma pii a wubetumi apaw.

Nsakrae afoforo

  • Wɔde ɔkwan foforo $enable-container-classesa wobetumi afa so aba. — Afei sɛ wopaw kɔ sɔhwɛ CSS Grid nhyehyɛe no mu a, .container-*wɔbɛda so ara aboaboa adesua ahorow ano, gye sɛ wɔde saa nhyehyɛe yi ahyɛ false. Mprempren nsukorade nso kura wɔn gutter gyinapɛn ahorow mu.

  • Offcanvas component mprempren wɔ mmuae nsakrae ahorow . Mfitiase .offcanvasadesua no nsakra —ɛde nsɛm sie wɔ viewports nyinaa so. Sɛnea ɛbɛyɛ a ɛbɛyɛ nea ɛyɛ adwuma yiye no, sesa saa .offcanvasadesuakuw no kɔ .offcanvas-{sm|md|lg|xl|xxl}adesuakuw biara mu.

  • Mprempren wɔde nneɛma a wɔde kyekyɛ pon mu a ɛyɛ den no paw sɛ wɔbɛkɔ mu. — Yɛayi hyeɛ a ɛyɛ den na ɛyɛ den sɛ wobɛbu so wɔ table akuo ntam no afiri hɔ na yɛde akɔ adesua a wopɛ a wobɛtumi de adi dwuma, .table-group-divider. Hwɛ table docs no ma nhwɛso.

  • Wɔasan akyerɛw Scrollspy sɛ wɔde Intersection Observer API bedi dwuma , a ɛkyerɛ sɛ wunhia awofo wrappers a ɛfa ho bio, deprecatesoffsetconfig, ne nea ɛkeka ho. Hwehwɛ wo Scrollspy dwumadie ahodoɔ no ma ɛyɛ pɛpɛɛpɛ na ɛkɔ so daa wɔ wɔn nav highlighting mu.

  • Popovers ne adwinnade ho nsɛm mprempren de CSS nsakrae ahorow di dwuma. Wɔayɛ CSS nsakraeɛ binom foforɔ afiri wɔn Sass mfɛfoɔ hɔ de ate nsakraeɛ dodoɔ no so. Nea afi mu aba ne sɛ, wɔagyae nneɛma abiɛsa a ɛsakra no wɔ saa a wɔayi no adi yi mu: $popover-arrow-color, $popover-arrow-outer-color, ne $tooltip-arrow-color.

  • Wɔde .text-bg-{color}aboafo foforo aka ho. Sɛ́ anka wobɛhyehyɛ ankorankoro .text-*ne .bg-*mfaso horow no, afei wubetumi de aboafo .text-bg-*no ahyɛ background-coloranim a ɛne ne ho bɔ abira color.

  • Wɔde .form-check-reversemodifier aka ho sɛ ɛbɛdannan labels ne checkboxes/radio ahorow a ɛbata ho no nnidiso nnidiso.

  • Wɔde striped columns a ɛboa tables via .table-striped-columnsclass foforo no aka ho.

Sɛ wopɛ nsakraeɛ no nyinaa a, hwɛ v5.2.0 adwuma no wɔ GitHub .

v5.1.0 na ɛwɔ hɔ

  • Wɔde sɔhwɛ mmoa a wɔde ma CSS Grid nhyehyɛe no aka ho . — Eyi yɛ adwuma a ɛrekɔ so, na ennya nsiesiee ne ho sɛ wɔde bedi dwuma wɔ adwumayɛ mu, nanso wubetumi apaw sɛ wobɛkɔ ade foforo no mu denam Sass so. Sɛ wopɛ sɛ wo ma ɛyɛ adwuma a, ma default grid no nyɛ adwuma, denam nhyehyɛe so $enable-grid-classes: falsena ma CSS Grid no nyɛ adwuma denam nhyehyɛe so $enable-cssgrid: true.

  • Wɔayɛ navbars foforo de aboa offcanvas. — Fa offcanvas drawers ka ho wɔ navbar biara mu a mmuae .navbar-expand-*adesuakuw ne offcanvas markup binom ka ho.

  • Wɔde beae foforo a wɔde hyɛ mu no fã foforo aka ho . — Yɛn fã foforo koraa, ɔkwan a wobɛfa so de bere tiaa mu blocks ama sen nsɛm ankasa de aboa ma woakyerɛ sɛ biribi da so ara rehyɛ wo site anaa app no ​​mu.

  • Collapse plugin mprempren boa horizontal collapsing . — Fa ka .collapse-horizontalwo .collapseho na woabubu no widthmmom sen sɛ wobɛbɔ height. Kwati sɛ wobɛsan ayɛ browser no ho mfonini denam min-heightanaa height.

  • Wɔde stack foforo ne vertical mmara aboafo aka ho. — Fa flexbox agyapade ahorow pii di dwuma ntɛmntɛm na ama woayɛ nhyehyɛe ahorow a wɔahyɛ da ayɛ a stacks wom ntɛmntɛm . Paw fi horizontal ( .hstack) ne vertical ( .vstack) stacks no mu. Fa vertical dividers a ɛte sɛ <hr>elements no ka ho ne aboafo foforo.vr no .

  • Wɔde wiase nyinaa :rootCSS nsakrae foforo aka ho. — Wɔde CSS nsakrae foforo pii kaa :rootlevel no ho ma controlling <body>styles. Pii wɔ nnwuma no mu, a yɛn utilities ne components nyinaa ka ho, nanso seesei kenkan CSS variables wɔ Customize ɔfã no mu .

  • Wɔayɛ kɔla ne akyi mfasoɔ foforɔ de adi dwuma de CSS nsakraeɛ adi dwuma, na wɔde nkyerɛwee opacity ne akyi opacity mfasoɔ foforɔ kaa ho. — .text-* na .bg-*seesei wɔde CSS nsakraeɛ ne rgba()kɔla botaeɛ na ɛsi utilities, a ɛma wo kwan ma ɛyɛ mmerɛw sɛ wobɛsesa utility biara a opacity utilities foforɔ.

  • Wɔde snippet nhwɛso foforo a egyina so kaa ho de kyerɛ sɛnea yɛbɛsesa yɛn afã horow no. — Twe krado sɛ wode nneɛma a wɔahyɛ da ayɛ ne nhyehyɛe afoforo a wɔtaa yɛ no bedi dwuma denam yɛn Snippets nhwɛso foforo no so . Nea ɛka ho ne ase hɔ nsɛm , nsɛm a ɛwɔ ase , list akuw , ne modals .

  • Woyii positioning styles a wɔmfa nni dwuma fii popovers ne tooltips mu efisɛ eyinom yɛ Popper nkutoo na odi ho dwuma. $tooltip-marginwɔagyae adwuma no na wɔde asi hɔ nullwɔ adeyɛ no mu.

Wopɛ nsɛm pii? Kenkan v5.1.0 blog asɛm no.

Hey wɔ hɔ! Nsakraeɛ a ɛbaa yɛn Bootstrap 5 a ɛdi kan a wɔayi no adi kɛseɛ, v5.0.0, no, wɔakyerɛw wɔ aseɛ ha. Wɔnkyerɛ nsakrae foforo a wɔada no adi wɔ atifi hɔ no.

Nneɛma a wɔde wɔn ho to so

  • Wɔagyae jQuery no.
  • Wɔayɛ no foforo afi Popper v1.x so akɔ Popper v2.x so.
  • Wɔde Dart Sass sii Libsass ananmu sɛ yɛn Sass compiler a wɔde maa Libsass no yɛ nea wɔagyae.
  • Mitu fii Jekyll kɔɔ Hugo sɛ ɔrekyekye yɛn nkrataa no

Browser mmoa a wɔde ma

  • Wogyaee Internet Explorer 10 ne 11 no
  • Microsoft Edge a wɔatow agu < 16 (Agyapade Edge) .
  • Wɔagyae Firefox < 60
  • Safari a wɔatow agu < 12
  • Wɔagyae iOS Safari < 12
  • Chrome a wɔatow agu < 60

Nwoma ahorow no sesa

  • Wɔasan ayɛ homepage, docs nhyehyɛe, ne ase hɔ.
  • Wɔde Parcel akwankyerɛ foforo aka ho .
  • Wɔde Customize ɔfã foforo aka ho , de nsɛm foforo a ɛfa Sass ho, wiase nyinaa nhyehyeɛ a wobɛpaw, kɔla nhyehyɛe, CSS nsakrae, ne nea ɛkeka ho asi v4 no Theming krataafa ananmu.
  • Wɔsan hyehyɛɛ fom nkrataa nyinaa yɛɛ no ​​Fom ɔfã foforo , na ɛpaapaee emu nsɛm no mu yɛɛ no ​​nkratafa a wɔde wɔn adwene si so kɛse.
  • Saa ara nso na wɔayɛ Layout ɔfã no foforo , sɛnea ɛbɛyɛ a grid mu nsɛm no bɛda adi pefee.
  • Wɔasesa din “Navs” component krataafa no ayɛ no “Navs & Tabs”.
  • Wɔasesa “Checks” krataafa no din ayɛ no “Checks & radios”.
  • Yɛsan yɛɛ navbar no ho nhyehyɛe na yɛde subnav foforo kaa ho sɛnea ɛbɛyɛ a ɛbɛyɛ mmerɛw sɛ yɛbɛkyinkyin yɛn sait ne docs nkyerɛase ahorow no ho.
  • Wɔde keyboard shortcut foforo aka ho ama nhwehwɛmu afã no: Ctrl + /.

Sass

  • Yɛayɛ ditched default Sass map merges no sɛnea ɛbɛyɛ a ɛbɛyɛ mmerɛw sɛ wobeyi redundant values ​​afi hɔ. Ma ɛntena w'adwenem sɛ afei ɛsɛ sɛ wokyerɛkyerɛ gyinapɛn ahorow nyinaa mu wɔ Sass map ahorow no mu te sɛ $theme-colors. Hwɛ sɛnea wodi Sass asase mfonini ahorow ho dwuma .

  • AbubuwWɔasan din color-yiq()ayɛ adwuma ne nsakrae a ɛfa ho no color-contrast()sɛnea ɛne YIQ kɔla ahunmu nni abusuabɔ bio. Hwɛ #30168.

    • $yiq-contrasted-thresholdwɔasesa ne din ayɛ no $min-contrast-ratio.
    • $yiq-text-darkna $yiq-text-lightwɔasesa din sɛnea ɛte biara ayɛ no $color-contrast-darkne $color-contrast-light.

  • AbubuwMedia query mixins parameters asesa ama ɔkwan a ntease wom kɛse.

    • media-breakpoint-down()de breakpoint no ankasa di dwuma sen sɛ ɛde breakpoint a edi hɔ no bedi dwuma (sɛ nhwɛso no, media-breakpoint-down(lg)sɛ́ anka ɛde media-breakpoint-down(md)targets viewports nketewa sen lg).
    • Saa ara nso na parameter a ɛtɔ so mmienu wɔ media-breakpoint-between()nso de breakpoint no ankasa di dwuma sen sɛ ɛde breakpoint a edi hɔ no bedi dwuma (sɛ nhwɛso no, media-between(sm, lg)sɛ́ anka ɛde media-breakpoint-between(sm, md)targets viewports bɛto smne ntam lg).

  • AbubuwWɔayi print styles ne $enable-print-stylesvariable afi hɔ. Print display adesua ahorow da so ara wɔ hɔ. Hwɛ #28339 .

  • AbubuwTow color(), theme-color(), ne gray()dwumadi ahorow a ɛboa nsakrae ahorow. Hwɛ #29083 .

  • AbubuwRenamed theme-color-level()function to color-level()na seesei gye kɔla biara a wopɛ sen sɛ $theme-colorɛbɛgye kɔla nkutoo. Hwɛ #29083 Hwɛ yiye: color-level() akyiri yi wɔde too hɔ v5.0.0-alpha3.

  • AbubuwWɔasesa din $enable-prefers-reduced-motion-media-queryne $enable-pointer-cursor-for-buttonsto $enable-reduced-motionne sɛnea ɛbɛyɛ a wɔbɛka $enable-button-pointersno tiawa.

  • AbubuwWoyii bg-gradient-variant()mixin no fii hɔ. Fa .bg-gradientadesua no di dwuma fa gradients ka elements ho sen sɛ wode class ahorow a wɔayɛ no bɛka ho .bg-gradient-*.

  • Abubuw Wɔayi mixins a na wɔagyae adwuma no afi hɔ:

    • hover, hover-focus, plain-hover-focus, nehover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(asan nso gyaee utility class a ɛbata ho no, .text-hide) .
    • visibility()
    • form-control-focus()

  • AbubuwWɔasan din scale-color()ayɛ adwuma no shift-color()sɛnea ɛbɛyɛ a ɛrenhyia Sass ankasa kɔla scaling adwuma no.

  • box-shadowmixins afei ma kwan ma nullvalues ​​na ɛtɔ nonefi nsɛm pii mu. Hwɛ #30394 .

  • Seesei border-radius()mixin no wɔ default value.

Kɔla nhyehyɛe

  • Kɔla nhyehyɛe a ɛne adwuma color-level()na $theme-color-intervalwoyii fii hɔ de boaa kɔla nhyehyɛe foforo. Ne nyinaa lighten()ne darken()dwumadie a ɛwɔ yɛn codebase no mu no, wɔde tint-color()ne shade-color(). Saa dwumadi ahorow yi de kɔla no bɛfrafra fitaa anaa tuntum mmom sen sɛ ɛbɛsakra ne hann no dodow bi a wɔahyɛ ato hɔ. The shift-color()will either tint or shade a color gyina sɛ ebia ne mu duru parameter yɛ papa anaasɛ bɔne. Hwɛ #30622 ma nsɛm pii.

  • Wɔde tints ne shades foforo kaa ho maa kɔla biara, de kɔla ahorow akron a ɛsono emu biara ma kɔla biara a ɛwɔ nnyinaso, sɛ Sass nsakrae foforo.

  • Kɔla ahorow a ɛne ne ho bɔ abira a wɔatu mpɔn. Bumped kɔla nsonsonoe ratio fi 3:1 kosi 4.5:1 ne updated bruu, ahabammono, cyan, ne pink kɔla ahorow de hwɛ hu sɛ WCAG 2.1 AA nsonsonoe. Afei nso wɔsesaa yɛn kɔla a ɛne ne ho bɔ abira kɔla no fii $gray-900kɔɔ $black.

  • Sɛnea ɛbɛyɛ a yɛbɛboa yɛn kɔla nhyehyɛe no, yɛde amanne tint-color()ne shade-color()dwumadi foforo aka ho a yɛde bɛfrafra yɛn kɔla ahorow no yiye.

Grid no ho nsɛm foforo

  • Nneɛma foforo a ɛma wogyae! Wɔde xxlbreakpoint foforo aka ho ama 1400pxne soro. Nsakrae biara nni breakpoints afoforo nyinaa mu.

  • Gutters a wɔatu mpɔn. Mprempren wɔde gutters ahyɛ rems mu, na ɛyɛ teateaa sen v4 ( 1.5rem, anaasɛ bɛyɛ 24px, ase fi 30px). Eyi ma yɛn grid system no gutters no ne yɛn spacing utilities no hyia.

    • Wɔde gutter class foforo ( .g-*, .gx-*, ne .gy-*) aka ho de ahwɛ gutters a ɛkɔ soro/ɛgyina hɔ, gutters a ɛkɔ soro, ne gutters a ɛda hɔ so.
    • AbubuwWɔsesaa din .no-gutterssɛ .g-0ɛne gutter utilities foforo hyia.

  • Nkorabata ahorow no anni dwuma bio position: relative, enti ebia ɛsɛ sɛ wode .position-relativenneɛma bi ka ho na ama woasan de saa suban no aba.

  • AbubuwWogyaee .order-*adesua ahorow pii a na ɛtaa kɔ a wɔmfa nni dwuma no. Seesei yɛde .order-1ma .order-5out of the box nkutoo.

  • AbubuwDroped .mediacomponent no sɛnea wobetumi ayɛ mmerɛw replicated ne utilities. Hwɛ #28265 ne flex utilities krataafa no ma nhwɛso .

  • Abubuw bootstrap-grid.cssmprempren ɛfa box-sizing: border-boxkɔla no nkutoo ho sen sɛ ɛbɛsan ahyɛ wiase nyinaa adaka-kɛse no. Saa kwan yi so no, yebetumi de yɛn grid styles no adi dwuma wɔ mmeae pii a biribiara ntwitware mu.

  • $enable-grid-classesntumi nsiw awo ntoatoaso a ɛwɔ container class ahorow no ano bio. Hwɛ #29146.

  • Wɔayɛ make-colmixin no foforo akɔ default so akɔ columns a ɛyɛ pɛ a enni kɛse a wɔakyerɛ.

Nsɛm a ɛwɔ mu, Reboot, ne nea ɛkeka ho

  • Mprempren RFS no ayɛ adwuma default so. Nsɛmti a wɔdefont-size()mixin no di dwuma no bɛsesa wɔnfont-sizeho sɛnea ɛbɛyɛ a ɛne viewport no bɛsesa no ankasa. Saa ade yi yɛ kan opt-in ne v4.

  • AbubuwYɛyɛɛ yɛn display typography no foforo de sii yɛn $display-*variables ananmu na yɛde $display-font-sizesSass map. Afei nso woyii ankorankoro $display-*-weightnsakrae ahorow no fii hɔ maa biako $display-font-weightna wɔayɛ nsakrae font-sizes.

  • .display-*Wɔde asɛmti akɛse foforo abien aka ho , .display-5ne .display-6.

  • Wɔahyɛ link ahorow ase default so (ɛnyɛ hover so nkutoo), gye sɛ ɛyɛ nneɛma pɔtee bi fã.

  • Wɔasan asiesie tables de ayɛ wɔn styles foforo na wɔasan de CSS variables akyekye ama wɔanya tumi kɛse wɔ styling so.

  • AbubuwNested tables nnya styles bio.

  • Abubuw .thead-lightna .thead-darkwɔatow agu de agye .table-*variant classes a wobetumi de adi dwuma ama table elements nyinaa ( thead, tbody, tfoot, tr, thne td).

  • AbubuwWɔsesa table-row-variant()mixin no din ayɛ no table-variant()na ɛgye parameters 2 pɛ: $color(kɔla din) ne $value(kɔla koodu). Wɔbu border kɔla ne accent kɔla no ho akontaa ankasa a egyina table factor variables no so.

  • Kyekyɛ table cell padding nsakrae ahorow mu ma ɛyɛ -yne -x.

  • AbubuwWogyaee .pre-scrollableadesuakuw no. Hwɛ #29135

  • Abubuw .text-*utilities mfa hover ne focus states nka links ho bio. .link-*wobetumi de aboafo adesua ahorow adi dwuma mmom. Hwɛ #29267

  • AbubuwWogyaee .text-justifyadesuakuw no. Hwɛ #29793

  • Abubuw <hr>elements mprempren de di dwuma heightsen sɛ borderwɔde bɛboa sizesu no yiye. Eyi nso ma wotumi de padding utilities di dwuma de yɛ dividers a ɛyɛ den (sɛ nhwɛso no, <hr class="py-1">).

  • Reset default horizontal padding-lefton <ul>ne <ol>elements fi browser default 40pxso kɔ 2rem.

  • Added $enable-smooth-scroll, a ɛfa scroll-behavior: smoothwiase nyinaa ho—gye sɛ wɔn a wɔde di dwuma a wɔsrɛ sɛ wɔtew kankyee so denam prefers-reduced-motionnsɛm ho amanneɛbɔfo asɛmmisa so. Hwɛ #31877

RTL

  • Horizontal direction specific variables, utilities, ne mixins nyinaa wɔasesa din de adi dwuma wɔ logical properties te sɛ nea wohu wɔ flexbox layouts mu —sɛ nhwɛso no, startne endananmu leftne right.

Nkyerɛwee ahorow

  • Wɔde nkrataa foforo a ɛsensɛn nsu so aka ho! Yɛahyɛ Floating labels nhwɛso no ho nkuran akɔ form components a wɔboa koraa. Hwɛ Floating labels kratafa foforo no.

  • Abubuw Consolidated native ne amanne kwan so nneɛma elements. Wɔaboaboa checkboxes, radios, selects, ne inputs afoforo a na ɛwɔ native ne custom classes wɔ v4 mu no ano. Afei ɛkame ayɛ sɛ yɛn form elements no nyinaa yɛ custom koraa, dodow no ara a enhia custom HTML.

    • .custom-control.custom-checkboxno yɛ mprempren .form-check.
    • .custom-control.custom-custom-radiono yɛ mprempren .form-check.
    • .custom-control.custom-switchno yɛ mprempren .form-check.form-switch.
    • .custom-selectno yɛ mprempren .form-select.
    • .custom-filena .form-filewɔde amanne kwan so ntadehyɛ asi ananmu wɔ .form-control.
    • .custom-rangeno yɛ mprempren .form-range.
    • Wogyaee kurom hɔfo .form-control-filene .form-control-range.

  • AbubuwWɔtow gui .input-group-appendna .input-group-prepend. Afei wobɛtumi de buttons aka ho kɛkɛ na .input-group-textsɛ direct mma a ɛwɔ input akuo no mu.

  • Wɔsiesie Missing border radius a akyɛ wɔ input kuw a ɛwɔ validation feedback bug no awiei koraa denam .has-validationadesua foforo a wɔde bɛka input akuw a ɛwɔ validation ho no so.

  • Abubuw Wogyaee form-specific layout adesua ahorow maa yɛn grid nhyehyɛe no. Fa yɛn grid ne utilities no di dwuma sen sɛ wode .form-group, .form-row, anaa .form-inline.

  • AbubuwMprempren nkrataa a wɔde kyerɛw nsɛm hwehwɛ sɛ .form-label.

  • Abubuw .form-textno longer sets display, ɛma wo kwan ma wobɔ inline anaa wosiw mmoa nsɛm ano sɛnea wopɛ denam HTML element no a wobɛsakra no ara kwa so.

  • Form controls no mfa nni dwuma bio fixed heightbere a ɛbɛyɛ yiye, mmom deferring to min-heightsɛ ɛbɛma customization ne compatibility ne components afoforo atu mpɔn.

  • Wɔmfa validation icons nni dwuma bio wɔ <select>s a ɛwɔ multiple.

  • Wɔasan asiesie source Sass fael ahorow wɔ ase scss/forms/, a input kuw styles ka ho.

Nneɛma a ɛwom

  • Nsonsonoeɛ a wɔaka abom paddingama kɔkɔbɔ, paanoo a wɔayam, kaad, dropdowns, list akuo, modals, popovers, ne nnwinnadeɛ a wɔde bɛgyina yɛn $spacernsakraeɛ no so. Hwɛ #30564 .

Accordion a wɔde di dwuma

Kɔkɔbɔ ahorow

Badge ahorow

  • AbubuwWogyaee .badge-*kɔla adesua ahorow nyinaa maa akyi mfaso (sɛ nhwɛso no, fa di dwuma .bg-primarysen sɛ wode bedi dwuma .badge-primary).

  • AbubuwDroped .badge-pill—fa .rounded-pillutility no di dwuma mmom.

  • AbubuwWoayi hover ne focus styles afi hɔ ama <a>ne <button>elements.

  • Nkɔanim default padding ma badge fi .25em/ .5emkɔ .35em/ .65em.

  • Ɛmaa abodoo a wɔayam no sɛnea ɛte dedaw no yɛɛ mmerɛw denam padding, background-color, ne border-radius.

  • Wɔde CSS amanneɛbɔ agyapade foforo aka ho --bs-breadcrumb-dividerama ayɛ mmerɛw sɛ wobɛsakra no a enhia sɛ wosan boaboa CSS ano.

Nsɛmma nhoma no

  • Abubuw Toggle buttons , a ɛwɔ checkboxes anaa radios, nhia JavaScript bio na ɛwɔ markup foforo. Yɛnhia wrapping element bio, de ka.btn-check,<input>na yɛde bata.btnadesua biara a ɛwɔ<label>. Hwɛ #30650 . Docs a ɛwɔ eyi ho no afi yɛn Buttons krataafa no so akɔ Forms ɔfã foforo no so.

  • Abubuw Wɔde .btn-blocktoo hɔ maa utilities. Sɛ́ anka wode bedi dwuma .btn-blockwɔ , fa ne utility bi .btnkyekyere wo buttons no ho sɛnea ɛho hia. Dan kɔ adesua ahorow a ɛyɛ mmuae so na ama woanya wɔn so tumi kɛse mpo. Kenkan docs no ma nhwɛso ahorow bi..d-grid.gap-*

  • Updated yɛn button-variant()ne button-outline-variant()mixins de boa parameters afoforo.

  • Updated buttons de hwɛ hu sɛ nsonsonoe a ɛkɔ soro wɔ hover ne active states so.

  • Mprempren bɔton ahorow a wɔadi dɛm no wɔ pointer-events: none;.

Kaad a wɔde kyerɛw nsɛm

  • AbubuwDred .card-deckin favour of yɛn grid no. Fa wo kaad no kyekyere column classes mu na fa ɔwofo .row-cols-*container ka ho de san yɛ card decks (nanso fa tumi kɛse wɔ responsive alignment so).

  • AbubuwWɔtow gui .card-columnsde gyee Masonry akyi. Hwɛ #28922 .

  • AbubuwWɔde Accordion fã foforo.card sii accordion a egyina so no ananmu .

Fa bɔtn no to mu

  • AbubuwWɔsesaa din .closeyɛɛ .btn-closeno ​​din a ɛnyɛ generic pii.

  • Mprempren bɔtɔn a wɔde to mu no de background-image(SVG a wɔde ahyɛ mu) di dwuma sen sɛ wɔde bedi dwuma &times;wɔ HTML no mu, na ɛma wotumi yɛ nsakrae a ɛyɛ mmerɛw a enhia sɛ wode wo nsa ka wo agyiraehyɛde no.

  • Wɔde .btn-close-whitevariant foforo a ɛde di dwuma filter: invert(1)ma ɛma nsonsonoe a ɛkorɔn a wɔpow ahyɛnsode ahorow a ɛwɔ akyi a ɛyɛ sum kaa ho.

Gu

  • Woyii nhoma mmobɔwee a wɔde hyɛ accordion ahorow mu no fii hɔ.

  • Wɔde .dropdown-menu-darkvariant foforo ne variables a ɛbata ho aka ho ama on-demand dark dropdowns.

  • Wɔde nsakrae foforo aka ho ama $dropdown-padding-x.

  • Darkened dropdown divider no maa nsonsonoe a ɛkɔ anim.

  • AbubuwMprempren wɔde nsɛm a esisi ma dropdown no nyinaa ahyɛ ase wɔ dropdown toggle button no so na afei wɔde bubble akɔ ɔwofo element no so.

  • Dropdown menus seesei wɔ data-bs-popper="static"attribute a wɔahyehyɛ bere a dropdown no gyinabea yɛ static, anaasɛ dropdown no wɔ navbar no mu. Eyi yɛ yɛn JavaScript de aka ho na ɛboa yɛn ma yɛde gyinabea ahorow a wɔahyɛ da ayɛ no di dwuma a ɛrensiw Popper gyinabea kwan.

  • AbubuwWɔagyae flipoption ma dropdown plugin a ɛboa native Popper nhyehyɛe. Afei wobɛtumi asiw flipping suban no ano denam empty array a wobɛfa so ama fallbackPlacementsoption wɔ flip modifier mu.

  • Mprempren wobetumi akliki dropdown menu ahorow no so denam ɔkwan foforo autoClosea wobɛfa so adi auto close suban no ho dwuma . Wubetumi de saa nhyehyɛe yi agye klik a ɛwɔ dropdown menu no mu anaa akyi no atom na ama ayɛ nkitahodi.

  • Dropdowns mprempren boa .dropdown-items a wɔde s abɔ mu <li>.

Jumbotron a ɛyɛ hu

Kyerɛw kuw no din

  • Wɔde nullnsakrae foforo aka ho ama font-size, font-weight, color, ne adesuakuw no :hover color..nav-link
  • AbubuwNavbars seesei hwehwɛ container wɔ mu (sɛ ɛbɛma spacing ahwehwɛde ne CSS a wɔhwehwɛ no ayɛ mmerɛw kɛse).
  • AbubuwWɔrentumi .activemfa adesua no nni dwuma bio wɔ .nav-items so, ɛsɛ sɛ wɔde di dwuma tẽẽ wɔ .nav-links so.

Offcanvas a wɔde di dwuma

Nkratafa a wɔde kyerɛw nsɛm

  • Pagination links seesei wɔ customizable margin-lefta ɛyɛ dynamically rounded wɔ corners nyinaa bere a wɔatew wɔn ho afi wɔn ho wɔn ho ho.

  • Wɔde transitions aka nkratafa link ahorow ho.

Popovers a wɔde wɔn ho hyɛ mu

  • AbubuwWɔasesa din .arrowno .popover-arrowwɔ yɛn default popover template no mu.

  • Wɔasesa din whiteLista wɔde bɛpaw no ayɛ no allowList.

Nneɛma a wɔde twitwiw nneɛma

  • Mprempren spinners di ni prefers-reduced-motion: reducedenam animations a wɔma ɛyɛ brɛoo no so. Hwɛ #31882 .

  • Spinner vertical alignment a wɔatu mpɔn.

Toast ahorow a wɔde yɛ aduan

  • Mprempren wobetumi de toast ahorow asi baabi a wɔde nneɛma a wɔde di dwuma wɔ baabi a wɔde di dwuma.toast-container no mmoa so .

  • Wɔasesa default toast bere tenten kɔɔ 5 seconds.

  • Woyii overflow: hiddenfi toasts mu na wɔde border-radiuss a ɛfata a ɛwɔ calc()dwumadi ahorow si ananmu.

Nnwinnade Ho Afotu

  • AbubuwWɔasesa din .arrowno .tooltip-arrowwɔ yɛn default tooltip template no mu.

  • AbubuwfallbackPlacementsWɔasesa default value ma the no kɔ ['top', 'right', 'bottom', 'left']ma popper elements a wɔde besisi hɔ yiye.

  • AbubuwWɔasesa din whiteLista wɔde bɛpaw no ayɛ no allowList.

Nneɛma a wɔde di dwuma

  • AbubuwWɔasesaa utilities pii din sɛ wɔde logical property din bedi dwuma mmom sen akwankyerɛ din a wɔde RTL mmoa aka ho:

    • Wɔasesa din .left-*ne .right-*to .start-*ne .end-*.
    • Wɔasesa din .float-leftne .float-rightto .float-startne .float-end.
    • Wɔasesa din .border-leftne .border-rightto .border-startne .border-end.
    • Wɔasesa din .rounded-leftne .rounded-rightto .rounded-startne .rounded-end.
    • Wɔasesa din .ml-*ne .mr-*to .ms-*ne .me-*.
    • Wɔasesa din .pl-*ne .pr-*to .ps-*ne .pe-*.
    • Wɔasesa din .text-leftne .text-rightto .text-startne .text-end.

  • AbubuwWɔagyae negative margins no default so.

  • Wɔde .bg-bodyadesuakuw foforo aka ho ma wɔde <body>'s background no si nneɛma foforo so ntɛmntɛm.

  • Wɔde gyinabea foforo a mfaso wɔ so aka ho ama top, right, bottom, ne left. Nneɛma a ɛsom bo no bi ne 0, 50%, ne 100%agyapade biara ho.

  • Wɔde foforo .translate-middle-x& .translate-middle-ymfaso horow kaa ho wɔ horizontally anaa vertically mfinimfini absolute / fixed gyinabea elements.

  • Wɔde nneɛma foforo a border-widthwɔde di dwuma aka ho .

  • AbubuwWɔsesaa ne din .text-monospaceyɛɛ no .font-monospace​​.

  • AbubuwWɔayi .text-hideafi hɔ efisɛ ɛyɛ ɔkwan a akyɛ a wɔfa so de nsɛm sie a ɛnsɛ sɛ wɔde di dwuma bio.

  • Wɔde .fs-*utilities aka ho ama font-sizeutilities (a RFS ayɛ adwuma). Eyinom de nsenia koro no ara na edi dwuma sɛnea HTML no nsɛmti a wɔde ahyɛ hɔ no (1-6, akɛse kosi nketewa), na wobetumi afa Sass map so asesa.

  • AbubuwWɔasesa .font-weight-*utilities din sɛnea ɛte .fw-*wɔ tiawa ne nea ɛkɔ so daa ho.

  • AbubuwWɔasesa .font-style-*utilities din sɛnea ɛte .fst-*wɔ tiawa ne nea ɛkɔ so daa ho.

  • Wɔde aka ho .d-gridde akyerɛ mfasoɔ ne mfasoɔ foforɔ gap( .gap) ama CSS Grid ne flexbox nhyehyɛɛ.

  • AbubuwWoyii .rounded-smne rounded-lg, na wɔde adesua ahorow no nsenia foforo bae, .rounded-0sɛ .rounded-3. Hwɛ #31687 .

  • Wɔde nneɛma foforo a line-heightwɔde di dwuma aka ho: .lh-1, .lh-sm, .lh-basene .lh-lg. Hwɛ ha .

  • Wotutuu .d-noneutility no wɔ yɛn CSS no mu sɛnea ɛbɛyɛ a ɛbɛma no mu duru pii asen display utilities afoforo.

  • Wɔtrɛw .visually-hidden-focusableɔboafo no mu ma ɛyɛɛ adwuma nso wɔ nsukorade so, de :focus-within.

Aboafo

  • Abubuw Wɔasesa embed aboafoɔ a wɔma mmuaeɛ din ayɛ no ratio aboafoɔ a wɔwɔ adesua din foforɔ ne suban a wɔatu mpɔn, ne CSS nsakraeɛ a ɛboa.

    • Wɔasesa adesua ahorow din ma wɔasesa byakɔ xwɔ afã horow no mu. Sɛ nhwɛso no, .ratio-16by9mprempren ne .ratio-16x9.
    • Yɛatow .embed-responsive-itemne element kuw paw no agu de agye paw a ɛyɛ mmerɛw no atom .ratio > *. Klas foforo biara nhia, na mprempren ratio boafo no de HTML element biara yɛ adwuma.
    • Wɔasesa $embed-responsive-aspect-ratiosSass map no din ayɛ no $aspect-ratiosna wɔama ne botae ahorow no ayɛ mmerɛw de adesuakuw no din ne ɔha biara mu nkyem no ahyɛ mu sɛ key: valueabien no.
    • Mprempren wɔayɛ CSS nsakrae ahorow na wɔde aka ho ama botae biara wɔ Sass map no mu. Sesa --bs-aspect-ratiovariable no wɔ no so .rationa woayɛ custom aspect ratio biara .

  • Abubuw Mprempren “Screen reader” adesua ahorow no yɛ adesua ahorow a “wɔde aniwa hu ahintaw” .

    • Sesa Sass fael no fii scss/helpers/_screenreaders.scssto soscss/helpers/_visually-hidden.scss
    • Wɔasesa din .sr-onlyne .sr-only-focusableto .visually-hiddenne.visually-hidden-focusable
    • Wɔsesa din sr-only()na wɔde sr-only-focusable()mixins ayɛ visually-hidden()ne visually-hidden-focusable().

  • bootstrap-utilities.cssafei de yɛn aboafo nso ka ho. Ɛho nhia sɛ wɔde aboafoɔ bɛba wɔ custom builds mu bio.

JavaScript a ɛwɔ hɔ no

  • Wogyaee jQuery dependency na wɔsan kyerɛw plugins sɛ ɛbɛtra JavaScript a ɛyɛ daa mu.

  • AbubuwData attributes a ɛwɔ JavaScript plugins nyinaa mu no, seesei wɔde din ahyɛ mu de aboa ma woahu nsonsonoe a ɛda Bootstrap dwumadie no ntam wɔ nnipa foforɔ ne w’ankasa wo code ho. Sɛ nhwɛso no, yɛde di dwuma data-bs-togglemmom sen sɛ yɛde data-toggle.

  • Mprempren plugins nyinaa betumi agye CSS selector sɛ akyinnyegye a edi kan. Wubetumi de DOM element anaa CSS selector biara a ɛfata atwam de ayɛ plugin no nhwɛso foforo:

    const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

  • popperConfigbetumi atwam sɛ dwumadie a ɛgye Bootstrap no default Popper config no sɛ akasakasa, sɛdeɛ ɛbɛyɛ a wobɛtumi de saa default nhyehyɛɛ yi abɔ mu wɔ wo kwan so. Ɛfa dropdowns, popovers, ne nnwinnade ho nsɛm ho.

  • fallbackPlacementsWɔasesa default value ma the no akɔ ['top', 'right', 'bottom', 'left']ma Popper elements no a wɔde besisi hɔ yiye. Ɛfa dropdowns, popovers, ne nnwinnade ho nsɛm ho.

  • Wɔayi underscore afi ɔmanfo static akwan te sɛ _getInstance()→ getInstance().