Twe kɔ emu nsɛm atitiriw no so Twe kɔ docs navigation so
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

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

  • Wɔagyae jQuery.
  • 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ɛ ɔkyekyee 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ɔsesaa din “Checks” kratafa no 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 ​​no 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 colorspace 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 breakpoint a edi hɔ no (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 sɛ 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ɛfra fitaa anaa tuntum mu 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 ayɛ 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

  • 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-checkno yɛ mprempren .form-check.
    • .custom-check.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.

  • 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/ .5emkosi .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 na data-bs-popper="none"bere a 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 seesei boa .dropdown-items a wɔde s abɔ mu <li>.

Jumbotron a ɛyɛ hu

Kyerɛw kuw no din

  • Wɔde nullnsakrae foforo aka font-size, font-weight, color, ne adesua no ho :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).

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

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

  • popperConfigwobetumi atwam sɛ dwumadie a ɛgye Bootstrap no default Popper config no tom sɛ akasakasa, sɛdeɛ ɛbɛyɛ a wobɛtumi de saa default nhyehyeɛ 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.

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