Ku rhurhela eka v5

Landzelela no kambisisa ku cinca eka tifayela ta xihlovo xa Bootstrap, matsalwa, na swiphemu ku ku pfuna ku rhurha ku suka eka v4 ku ya eka v5.

Eka tluka leri

v5.2.0

Dizayini leyi pfuxetiweke

Bootstrap v5.2.0 yi kombisa ku pfuxetiwa ka dizayini leyi nga vonakiki ya swiphemu swi nga ri swingani na swihlawulekisi eka phurojeke hinkwayo, ngopfungopfu hi ku tirhisa border-radiusmimpimo leyi antswisiweke eka swikomba-nkarhi na vulawuri bya xivumbeko . Maphepha ya hina na wona ya pfuxetiwile hi pheji leyintshwa ya le kaya, layout yo olova ya tidokisi leyi nga ha pfurhiki swiyenge swa barhi ya le tlhelo, na swikombiso leswi vonakaka swinene swa Swifaniso swa Bootstrap .

Swilo swo tala leswi cinca-cincaka swa CSS

Hi pfuxetile swiphemu swa hina hinkwaswo ku tirhisa swilo leswi cinca-cincaka swa CSS. Loko Sass ya ha seketela hinkwaswo, xiphemu xin’wana na xin’wana xi pfuxetiwile ku katsa swilo leswi cinca-cincaka swa CSS eka titlilasi ta xisekelo ta xiphemu (xikombiso, .btn), leswi pfumelelaka ku cinca-cinca lokukulu ka nkarhi wa xiviri ka Bootstrap. Eka minkandziyiso leyi landzelaka, hi ta ya emahlweni hi ndlandlamuxa matirhiselo ya hina ya swilo leswi cinca-cincaka swa CSS eka xivumbeko xa hina, tifomo, vapfuni, na switirhisiwa. Hlaya swo tala hi swilo leswi cinca-cincaka swa CSS eka xiphemu xin’wana ni xin’wana eka matluka ya swona ya matsalwa hi ku hambana ka swona.

Ku tirhisiwa ka hina ka CSS variable ku ta va ku nga helelanga hi ndlela yo karhi ku fikela eka Bootstrap 6. Hambileswi hi nga tsakelaka ku tirhisa leswi hi ku helela eka bodo hinkwayo, swi endla ekhombyeni ro vanga ku cinca loku tshovekaka. Xikombiso, ku veka $alert-border-width: var(--bs-border-width)eka khodi ya hina ya xihlovo swi tshova Sass leyi nga kotekaka eka khodi ya wena loko a wu endla $alert-border-width * 2hi swivangelo swo karhi.

Hi ndlela yaleyo, laha swi kotekaka kona, hi ta ya emahlweni hi susumeta ku ya eka swilo swo tala leswi cinca-cincaka swa CSS, kambe hi kombela u lemuka leswaku ku tirhisiwa ka hina ku nga ha va ku ringaniseriwile nyana eka v5.

Xintshwa`_maps.scss`

Bootstrap v5.2.0 yi nghenise fayili leyintshwa ya Sass leyi nga na _maps.scss. Yi humesa mimepe yo hlayanyana ya Sass ku suka eka _variables.scssku lulamisa mhaka laha ku pfuxetiwa ka mepe wo sungula ku nga tirhisiwangiki eka mimepe ya vumbirhi leyi yi andlalaka. Hi xikombiso, ku pfuxetiwa ka $theme-colorsa ku nga tirhisiwi eka mimepe yin’wana ya nhloko-mhaka leyi a yi titshege hi $theme-colors, ku tshova maendlelo ya ntirho ya nkoka ya ku cinca-cinca. Hi ku komisa, Sass yi na xipimelo laha loko se ku tirhisiwile xihlawulekisi xa ntolovelo kumbe mepe , a wu nge pfuxetiwi. Ku na ku pfumaleka loku fanaka eka swilo leswi cinca-cincaka swa CSS loko swi tirhisiwa ku vumba swilo swin’wana leswi cinca-cincaka swa CSS.

Leswi hi swona swi endlaka leswaku ku cinca-cinca ka ku cinca-cinca eka Bootstrap ku fanele ku ta endzhaku ka @import "functions", kambe emahlweni @import "variables"na hinkwaswo leswin’wana swa xithaki xa hina xo nghenisa. Swi tano ni hi mimepe ya Sass—u fanele u tlula swilo leswi nga riki swa xiviri swi nga si swi tolovela. Mimepe leyi landzelaka yi rhurhiseriwe eka leyintshwa _maps.scss:

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

Swiaki swa wena swa Bootstrap CSS swa ntolovelo sweswi swi fanele ku languteka swin’wana swo fana na leswi hi ku nghenisa mimepe leyi hambaneke.

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

Switirhisiwa leswintshwa

Switirhisiwa leswi andlariweke ku katsa eka tifonto ta semibold font-weight..fw-semibold
Switirhisiwa border-radiusleswi andlariweke ku katsa tisayizi timbirhi letintshwa, .rounded-4na .rounded-5, ku kuma swihlawulekisi swo tala.

Ku cinca loku engetelekeke

$enable-container-classesKu nghenisiwile xihlawuhlawu lexintshwa . — Sweswi loko u hlawula eka xivumbeko xa CSS Grid xa ku ringeta, .container-*titlilasi ta ha ta hlengeletiwa, handle ka loko nhlawulo lowu wu vekiwile eka false. Swibye na swona sweswi swi hlayisa mimpimo ya swona ya gutter.
Xiphemu xa Offcanvas sweswi xi na ku hambana loku hlamulaka . Tlilasi yo sungula a .offcanvasyi cincanga—yi tumbeta leswi nga endzeni eka tindhawu hinkwato to languta eka tona. Leswaku yi hlamula, cinca tlilasi yoleyo .offcanvasyi va tlilasi yihi na yihi .offcanvas-{sm|md|lg|xl|xxl}.
Swihambanisi swa tafula leswi tiyeke sweswi swi opt-in. — Hi susile ndzilakano lowu tiyeke ni lowu tikaka ku wu tlula exikarhi ka mintlawa ya tafula ivi hi wu yisa eka tlilasi leyi nga hlawuriki leyi u nga yi tirhisaka, .table-group-divider. Vona ti docs ta tafula ku kuma xikombiso.
Scrollspy yi tsariwile nakambe ku tirhisa Intersection Observer API , leswi vulaka leswaku a wa ha lavi swifunengeto swa mutswari wa maxaka, deprecatesoffsetconfig, na swin’wana. Languta ku tirhisiwa ka wena ka Scrollspy ku va loku kongomeke swinene naswona ku nga cinci eka ku kandziyisa ka vona ka nav.
Ti-popover na switsundzuxo swa switirhisiwa sweswi swi tirhisa swilo leswi cinca-cincaka swa CSS. Swilo swin’wana swa swilo leswi cinca-cincaka swa CSS swi pfuxetiwile ku suka eka vatirhisani va swona va Sass ku hunguta nhlayo ya swilo leswi cinca-cincaka. Hikwalaho ka sweswo, swilo swinharhu leswi cinca-cincaka swi nga ha tirhisiwi eka nkandziyiso lowu: $popover-arrow-color, $popover-arrow-outer-color, na $tooltip-arrow-color.
Ku engeteriwe .text-bg-{color}vapfuni lavantshwa. Ematshan’weni yo veka munhu hi xiyexe .text-*ni .bg-*switirhisiwa, sweswi u nga tirhisa vapfuni ku.text-bg-* veka a background-colorwith contrasting foreground color.
Ku engeteriwe .form-check-reversemucinci ku flip order ya malebvu na mabokisi yo kambela/radio lama fambelanaka na swona.
Ku engeteriwe tikholomu ta mitila leti.table-striped-columns seketelaka eka matafula hi ku tirhisa tlilasi leyintshwa .

Ku kuma nxaxamelo lowu heleleke wa ku cinca, vona phurojeke ya v5.2.0 eka GitHub .

v5.1.0

Ku engeteriwe nseketelo wa swikambelo wa xivumbeko xa CSS Grid . — Lowu i ntirho lowu yaka emahlweni, naswona a wu si lunghekela ku tirhisiwa eka vuhumelerisi, kambe u nga hlawula ku nghena eka xivumbeko lexintshwa hi ku tirhisa Sass. Ku yi endla yi tirha, tshikisa giridi ya ntolovelo, hi ku veka $enable-grid-classes: falseni ku pfumelela Gridi ya CSS hi ku veka $enable-cssgrid: true.
Ti navbar leti pfuxetiweke ku seketela offcanvas. — Engetela tidrowara ta offcanvas eka navbar yihi na yihi na titlilasi leti hlamulaka .navbar-expand-*na swin’wana swa offcanvas markup.
Ku engeteriwe xiphemu lexintshwa xa xikhomela-ndhawu . — Xiphemu xa hina lexintshwa, ndlela yo nyika swibokisana swa nkarhinyana ematshan’wini ya swilo swa xiviri ku pfuneta ku kombisa leswaku nchumu wo karhi wa ha layicha eka sayiti kumbe app ya wena.
Plugin ya collapse sweswi yi seketela ku wisa ka horizontal . — Engetela .collapse-horizontaleka ya wena .collapseku wisa widthematshan’weni ya height. Papalata ku penda nakambe browser hi ku veka min-heightkumbe height.
Ku engeteriwe swipfuni leswintshwa swa nawu wa stack na vertical. — Hi ku hatlisa tirhisa swihlawulekisi swo tala swa flexbox ku hatlisa u endla swivumbeko swa ntolovelo hi switachi . Hlawula eka switachi leswi nga etlhelo ( .hstack) ni leswi nga etlhelo ( .vstack). Engetela swihambanisi leswi yimisiweke leswi fanaka na <hr>swiaki hi vapfuni lavantshwa.vr .
Ku engeteriwe swilo leswintshwa :rootleswi cinca-cincaka swa CSS swa misava hinkwayo. — Ku engeteriwe swilo swo hlayanyana leswintshwa leswi cinca-cincaka swa CSS eka :rootxiyimo xa ku lawula <body>switayele. Swin’wana swi le ku tirheni, ku katsa na ku tsemakanya switirhisiwa swa hina na swiphemu, kambe sweswi hlaya swilo leswi cinca-cincaka swa CSS eka xiyenge xa Customize .
Ku lulamisiwile switirhisiwa swa mihlovo na swa le ndzhaku ku tirhisa swilo leswi cinca-cincaka swa CSS, na ku engetela switirhisiwa leswintshwa swa ku nga vonaki ka matsalwa na ku nga vonaki ka le ndzhaku . — .text-* naswona .bg-*switirhisiwa sweswi swi akiwile hi swilo leswi cinca-cincaka swa CSS na rgba()mimpimo ya mihlovo, leswi ku pfumelelaka ku olova ku lulamisa xitirhisiwa xihi na xihi hi switirhisiwa leswintshwa swa opacity.
Ku engeteriwe swikombiso leswintshwa swa swiphemu leswi sekeriweke ku kombisa ndlela yo endla swiphemu swa hina swi va leswi u swi lavaka. — Koka u lunghekele ku tirhisa swiphemu leswi endleriweke wena ni swivumbeko swin’wana leswi tolovelekeke swa dizayini hi swikombiso swa hina leswintshwa swa Swiphemu . Ku katsa swifaniso swa le hansi , swilo leswi nga ehansi , mintlawa ya nxaxamelo , na timodali .
Ku susiwile switayele swa positioning leswinga tirhisiwangiki eka ti popovers na ti tooltips tani hileswi leswi swi khomiwaka ntsena hi Popper. $tooltip-marginyi herisiwile naswona yi vekiwile eka nulleka endlelo.

Xana u lava rungula leri engetelekeke? Hlaya xiviko xa blog xa v5.1.0.

Hey kwalahaya! Ku cinca eka nkandziyiso wa hina wo sungula lowukulu wa Bootstrap 5, v5.0.0, ku tsariwile laha hansi. A ti kombisi ku cinca loku engetelekeke loku kombisiweke laha henhla.

Swilo leswi titshegeke hi swona

Ku hoxiwa jQuery.
Ku ndlandlamuxiwile ku suka eka Popper v1.x ku ya eka Popper v2.x.
Ku siviwe Libsass hi Dart Sass tani hi leswi muhlengeleti wa hina wa Sass loyi a nyikiweke Libsass a nga ha tirhisiwi.
Ku rhurhile ku suka eJekyll ku ya eHugo hikwalaho ko aka matsalwa ya hina

Nseketelo wa xihlamusela-marito

Ku hoxiwe Internet Explorer 10 na 11
Ku hoxiwa ka Microsoft Edge < 16 (Edge ya Ndzhaka) .
Ku hoxiwa Firefox < 60
Ku wisa Safari < 12
Ku hoxiwa ka iOS Safari < 12
Ku hoxiwa ka Chrome < 60

Ku cinca ka matsalwa

Ku endliwe hi vuntshwa pheji ya le kaya, layout ya docs, na footer.
Ku engeteriwe nkongomiso lowuntshwa wa Tiphasela .
Ku engeteriwe xiyenge lexintshwa xa Customize , ku siva v4’s Theming page , hi vuxokoxoko lebyintshwa eka Sass, swihlawulekisi swa vuhlanganisi bya misava hinkwayo, swikimi swa mihlovo, swilo leswi cinca-cincaka swa CSS, na swin’wana.
Ku hlela nakambe matsalwa hinkwawo ya tifomo eka xiyenge lexintshwa xa Tifomo , ku hambanyisa leswi nga endzeni swi va matluka lama kongomisiweke swinene.
Hilaha ku fanaka, ku pfuxetiwile xiyenge xa Layout , ku flesh out grid content kahle.
Ku thyiwile vito lerintshwa ra tluka ra xiphemu ra “Navs” ri va “Navs & Tabs”.
Ku thyiwile vito lerintshwa ra tluka ra “Checks” ri va “Checks & radios”.
Hi tlhele hi endla navbar ivi hi engetela subnav leyintshwa leswaku swi olova ku famba-famba eka tisayiti ta hina ni tivhidiyo ta ti-docs.
Ku engeteriwe ndlela leyintshwa ya khibhodi ya nsimu yo lavisisa: Ctrl + /.

Sass

Hi ditched default Sass map merges ku endla leswaku swi olova ku susa mimpimo leyi nga lavekiki. Hlayisa emiehleketweni sweswi u fanele ku hlamusela mimpimo hinkwayo eka mimepe ya Sass ku fana na $theme-colors. Languta ndlela yo tirhana na mimepe ya Sass .
Ku tshovekaKu thyiwile vito lerintshwa ra color-yiq()ntirho na swilo leswi cinca-cincaka leswi fambelanaka na swona color-contrast()tanihi leswi swi nga ha fambelaniki na ndhawu ya mihlovo ya YIQ. Vona #30168.
- $yiq-contrasted-thresholdyi thyiwile vito lerintshwa ri va $min-contrast-ratio.
- $yiq-text-darknaswona $yiq-text-lighthi ku landzelelana ti thyiwile mavito ya $color-contrast-darkna $color-contrast-light.
Ku tshovekaTiparameter ta mixins ta xivutiso xa media ti cincile ku kuma endlelo leri twisisekaka swinene.
- media-breakpoint-down()yi tirhisa breakpoint hi yoxe ematshan’wini ya breakpoint leyi landzelaka (xikombiso, media-breakpoint-down(lg)ematshan’wini ya media-breakpoint-down(md)swikongomelo swa swivono leswitsongo ku tlula lg).
- Hilaha ku fanaka, parameter ya vumbirhi eka media-breakpoint-between()yi tlhela yi tirhisa breakpoint hi yoxe ematshan’wini ya breakpoint leyi landzelaka (xikombiso, media-between(sm, lg)ematshan’wini ya media-breakpoint-between(sm, md)swikongomelo swa swivono exikarhi ka smna lg).
Ku tshovekaKu susiwile switayele swo gandlisa na ku $enable-print-stylescinca-cinca. Titlilasi to kombisa ku gandlisa ta ha ri kona. Vona #28339 .
Ku tshovekaKu hoxiwa color(), theme-color(), na gray()mintirho leyi seketelaka swilo leswi cinca-cincaka. Vona #29083 .
Ku tshovekaRenamed theme-color-level()function to color-level()and sweswi yi amukela muvala wihi na wihi lowu u wu lavaka ematshan’wini ya $theme-colormihlovo ntsena. Vona #29083 Tivonele: color-level() endzhaku u hoxiwe v5.0.0-alpha3.
Ku tshovekaKu thyiwile vito lerintshwa $enable-prefers-reduced-motion-media-queryna $enable-pointer-cursor-for-buttonsku ya eka $enable-reduced-motionna $enable-button-pointersku komisa.
Ku tshovekaKu susiwile bg-gradient-variant()mixin. Tirhisa .bg-gradienttlilasi ku engetela swirhendzevutani eka swiaki ematshan’wini ya .bg-gradient-*titlilasi leti endliweke.
Ku tshoveka Ku susiwile ti mixins leti khale a ti nga ha tirhisiwi:
- hover, hover-focus, plain-hover-focus, nahover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(u tlhele a tshika tlilasi ya vukorhokeri leyi fambisanaka na yona, .text-hide) .
- visibility()
- form-control-focus()
Ku tshovekaRenamed scale-color()function to shift-color()ku papalata ku tlumbana na ntirho wa Sass wa yona wa ku ringanisa mihlovo.
box-shadowmixins sweswi yi pfumelela nullmimpimo na ku wa ku nonesuka eka swivutiso swo tala. Vona #30394 .
Mixin sweswi yi border-radius()na ntikelo wa xiviri.

Endlelo ra mihlovo

Endlelo ra mihlovo leri tirheke na color-level()naswona $theme-color-intervalri susiwile ku seketela endlelo lerintshwa ra mihlovo. Hinkwaswo lighten()na darken()mintirho eka codebase ya hina swi siviwa hi tint-color()na shade-color(). Mintirho leyi yi ta hlanganisa muvala ni wo basa kumbe wa ntima ematshan’weni yo cinca ku olova ka wona hi mpimo lowu vekiweke. The shift-color()will either tint or shade a color kuya hiku parameter ya yona ya ntiko yiri positive kumbe negative. Vona #30622 ku kuma vuxokoxoko byo tala.
Ku engeteriwe tints letintshwa na tinxaka ta muvala wun’wana na wun’wana, ku nyika mihlovo ya nhungu yo hambana eka muvala wun’wana na wun’wana wa le hansi, tanihi swilo leswintshwa leswi cinca-cincaka swa Sass.
Ku antswisiwa ka ku hambana ka mihlovo. Bumped color contrast ratio kusuka eka 3:1 kuya eka 4.5:1 na ku pfuxetiwa ka mihlovo ya blue, green, cyan, na pink ku tiyisisa WCAG 2.1 AA contrast. Nakambe hi cince muvala wa hina wa ku hambana ka mihlovo ku suka eka $gray-900ku ya eka $black.
Ku seketela fambiselo ra hina ra mihlovo, hi engetele mikhuva leyintshwa tint-color()ni shade-color()mintirho yo hlanganisa mihlovo ya hina hi ndlela leyi faneleke.

Ku pfuxetiwa ka gridi

Xiphemu lexintshwa xo wisa! Ku engeteriwe xxlbreakpoint leyintshwa ya 1400pxna le henhla. Ku hava ku cinca eka tindhawu tin’wana hinkwato to wisa.
Ti- gutter leti antswisiweke. Ti gutters sweswi ti vekiwile eka rems, naswona ti tsindziyerile ku tlula v4 ( 1.5rem, kumbe kwalomu ka 24px, ehansi ku suka 30px). Leswi swi ringanisa ti-gutter ta sisiteme ya hina ya giridi na switirhisiwa swa hina swa ku hambana.
- Ku engeteriwe ntlawa lowuntshwa wa migerho ( .g-*, .gx-*, na .gy-*) ku lawula migerho leyi nga etlhelo/leyi yimisiweke, migerho leyi nga etlhelo, ni migerho leyi yimisiweke.
- Ku tshovekaKu cinciwile vito .no-guttersku va .g-0ku fambisana na switirhisiwa leswintshwa swa gutter.
Tikholomu a ta ha tirhi position: relative, hikwalaho u nga ha boheka ku engetela .position-relativeeka swiaki swin’wana leswaku u vuyisela mahanyelo wolawo.
Ku tshovekaU tshike titlilasi to hlayanyana .order-*leti hakanyingi a ti nga tirhisiwi. Sweswi hi nyika ntsena .order-1ku .order-5huma ebokisini.
Ku tshovekaDrop the .mediacomponent tani hi leswi yi nga tlheriseriwaka hi ku olova hi switirhisiwa. Vona #28265 na tluka ra switirhisiwa swa flex ku kuma xikombiso .
Ku tshoveka bootstrap-grid.csssweswi yi tirha ntsena box-sizing: border-boxeka kholomo ematshan’weni yo tlhela yi veka vukulu bya mabokisi ya misava hinkwayo. Hi ndlela leyi, switayele swa hina swa gridi swi nga tirhisiwa etindhawini to tala handle ko kavanyetiwa.
$enable-grid-classesa ya ha tshiki ku tumbuluxiwa ka titlilasi ta swikhomela-ndhawu. Vona #29146.
Ku pfuxetiwile make-colmixin ku va default eka tikholomu to ringana handle ka sayizi leyi boxiweke.

Swilo leswi nga endzeni, Reboot, na swin’wana

RFS sweswi yi tirhisiwile hi ku tiyimisela. Tinhlokomhaka leti tirhisakafont-size()mixin ti ta lulamisa hi ku tisungulela ta tonafont-sizeku ringanisa na xivono. Xiyenge lexi khale a xi ri opt-in na v4.
Ku tshovekaKu lunghise thayipografi ya hina ya nkombiso ku siva swilo swa hina $display-*leswi cinca-cincaka ni hi $display-font-sizesmepe wa Sass. Nakambe ku susiwile $display-*-weightswilo leswi cinca-cincaka ha xin’we-xin’we xa s yin’we $display-font-weightni leyi lulamisiweke font-size.
Ku engeteriwe .display-*tisayizi timbirhi letintshwa ta tinhloko-mhaka, .display-5naswona .display-6.
Swihlanganisi swi thaleriwa ehansi hi ku tiyimisela (ku nga ri ntsena eka hover), handle ka loko swi ri xiphemu xa swiphemu swo karhi.
Matafula lama endliweke hi vuntshwa ku pfuxeta switayele swa wona na ku ma pfuxeta hi swilo leswi cinca-cincaka swa CSS ku kuma vulawuri byo tala eka switayili.
Ku tshovekaMatafula lama nga ni swisaka a ma ha dyi ndzhaka ya switayele.
Ku tshoveka .thead-lightnaswona .thead-darkti hoxiwa ku seketela .table-*titlilasi ta ku hambana leti nga tirhisiwaka eka swiaki hinkwaswo swa tafula ( thead, tbody, tfoot, tr, thna td).
Ku tshovekatable-row-variant()Mixin yi thyiwile vito lerintshwa ku va naswona table-variant()yi amukela ntsena 2 wa tipharamitha: $color(vito ra muvala) na $value(khodi ya muvala). Muhlovo wa ndzilakano na mihlovo ya accent swi hlayeriwa hi ku tisungulela hi ku ya hi swilo leswi cinca-cincaka swa xivangelo xa tafula.
Hlukanisa swilo leswi cinca-cincaka swa padding ya tisele ta tafula eka -yna -x.
Ku tshovekaTlilasi leyi tshikiweke .pre-scrollable. Vona #29135
Ku tshoveka .text-*switirhisiwa a swa ha engeteli swiyimo swa hover na focus eka swihlanganisi. .link-*titlilasi ta vapfuni ti nga tirhisiwa ematshan’weni ya sweswo. Vona #29267
Ku tshovekaTlilasi leyi tshikiweke .text-justify. Vona #29793
Ku tshoveka <hr>swiaki sweswi swi tirhisa heightematshan’wini ya borderku seketela ku antswa sizexihlawulekisi. Leswi switlhela swiendla leswaku kuva na kutirhisiwa ka switirhisiwa swa padding kuva ku endliwa swiphemu swo tiya (xikombiso, <hr class="py-1">).
Seta default horizontal padding-lefton <ul>na <ol>swiaki ku suka eka browser default 40pxku ya eka 2rem.
Added $enable-smooth-scroll, leyi tirhaka scroll-behavior: smoothemisaveni hinkwayo—handle ka vatirhisi lava kombelaka ku hungutiwa ka ku famba-famba hi ku tirhisa prefers-reduced-motionxivutiso xa swihaxa-mahungu. Vona #31877

RTL

Swilo leswi cinca-cincaka swo karhi swa nkongomiso wa horizontal, switirhisiwa, na mixins hinkwaswo swi thyiwile mavito lamantshwa ku tirhisa swihlawulekisi leswi twisisekaka ku fana na leswi kumekaka eka swivumbeko swa flexbox—xikombiso, startna endematshan’wini ya leftna right.

Swivumbeko

Ku engeteriwe tifomo letintshwa leti papamalaka! Hi tlakusile xikombiso xa malebvu lama papamalaka eka swiphemu swa xivumbeko leswi seketeriwaka hi ku helela. Vona tluka lerintshwa ra malebvu lama papamalaka.
Ku tshoveka Swiaki swa xivumbeko xa ntumbuluko na xa ntolovelo leswi hlanganisiweke. Mabokisi yo kambela, swiya-ni-moya, swihlawulekisi, na swin’wana leswi nghenisiwaka leswi a swi ri na titlilasi ta ntumbuluko na ta ntolovelo eka v4 swi hlanganisiwile. Sweswi kwalomu ka swiaki hinkwaswo swa hina swa xivumbeko i swa ntolovelo hi ku helela, swo tala handle ka xilaveko xa HTML ya ntolovelo.
- .custom-control.custom-checkboxsweswi i .form-check.
- .custom-control.custom-custom-radiosweswi i .form-check.
- .custom-control.custom-switchsweswi i .form-check.form-switch.
- .custom-selectsweswi i .form-select.
- .custom-filenaswona .form-fileti siviwe hi switayele swa ntolovelo ehenhla ka .form-control.
- .custom-rangesweswi i .form-range.
- Ku wisa native .form-control-filena .form-control-range.
Ku tshovekaKu wisa .input-group-appendnaswona .input-group-prepend. Sweswi u nga engetela ntsena swikomba-nkarhi na .input-group-texttanihi vana vo kongoma va mintlawa yo nghenisa.
Radius ya ndzilakano wa Missing leyi nga tshama yi ri kona nkarhi wo leha eka ntlawa wa ku nghenisa lowu nga na xihoxo xa mbuyelo wa ku tiyisisa eku heteleleni wu lulamisiwile hi ku engetela .has-validationtlilasi yo engetela eka mintlawa ya ku nghenisa leyi nga na ku tiyisisiwa.
Ku tshoveka Ku lahliwile titlilasi ta layout leti kongomeke ta xivumbeko xa sisiteme ya hina ya gridi. Tirhisa giridi ya hina ni switirhisiwa ematshan’weni ya .form-group, .form-row, kumbe .form-inline.
Ku tshovekaMalebvu ya tifomo sweswi ma lava .form-label.
Ku tshoveka .form-textno longer sets display, leswi ku pfumelelaka ku endla inline kumbe ku sivela tsalwa ra mpfuneto hilaha u lavaka hakona ntsena hi ku cinca elemente ya HTML.
Vulawuri bya fomo a bya ha tirhisiwi lebyi nga cinciki heightloko swi koteka, ematshan’wini ya sweswo ku tlherisela endzhaku ku min-heightantswisa ku cinca-cinca na ku fambisana na swiphemu swin’wana.
Swifaniso swa ku tiyisisa a swa ha tirhisiwi eka <select>s hi multiple.
Ku hleriwile nakambe tifayela ta Sass ta xihlovo ehansi ka scss/forms/, ku katsa na switayele swa ntlawa wa ku nghenisa.

Swiphemu swa kona

Mimpimo leyi hlanganeke paddingya switsundzuxo, swiphemu swa xinkwa, makhadi, swilo leswi nga ehansi, mintlawa ya nxaxamelo, timodali, ti-popover, na switsundzuxo swa switirhisiwa ku va swi sekeriwe eka $spacerxihlawulekisi xa hina. Vona #30564 .

Accordion leyi vuriwaka Accordion

Ku engeteriwe xiphemu lexintshwa xa accordion .

Switsundzuxo

Sweswi switsundzuxo swi ni swikombiso leswi nga ni swifaniso .
Ku susiwile switayele swa ntolovelo swa <hr>s eka xitsundzuxo xin'wana na xin'wana tanihileswi se va tirhisaka currentColor.

Tibeji

Ku tshovekaKu lahliwile titlilasi hinkwato .badge-*ta mihlovo ya switirhisiwa swa le ndzhaku (xikombiso, tirhisa .bg-primaryematshan’wini ya .badge-primary).
Ku tshovekaDroped .badge-pill—tirhisa .rounded-pillxitirhisiwa ematshan’weni ya sweswo.
Ku tshovekaKu susiwile switayele swa hover na focus swa <a>na <button>swiaki.
Ku engeteriwa ka padding ya xiviri ya tibeji ku suka eka .25em/ .5emku ya eka .35em/ .65em.

Swiphepherhele swa xinkwa

Ku olovise xivumbeko xa ntolovelo xa swiphemuphemu swa xinkwa hi ku susa padding, background-color, na border-radius.
Ku engeteriwile nhundzu leyintshwa ya ntolovelo ya CSS --bs-breadcrumb-dividerku olova ku cinca handle ko lava ku hlengeleta nakambe CSS.

Swikomba-nkarhi

Ku tshoveka Swikomba-nkarhi swo cinca-cinca , leswi nga ni mabokisi yo kambela kumbe swiya-ni-moya, a swa ha lavi JavaScript naswona swi ni mfungho lowuntshwa. A ha ha lavi elemente yo phutsela, hi engetela.btn-checkeka<input>, ivi hi yi hlanganisa na.btntitlilasi tihi na tihi eka<label>. Vona #30650 . Ti docs ta leswi ti rhurhile eka tluka ra hina ra Buttons ku ya eka xiyenge lexintshwa xa Tifomo.
Ku tshoveka Ku lahliwile .btn-blockleswaku ku ta tirhisiwa switirhisiwa. Ematshan’weni yo tirhisa .btn-blockeka .btn, phutsela swikomba-nkarhi swa wena hi .d-gridni .gap-*xitirhisiwa xo swi veka hi ku hambana-hambana loko swi laveka. Cinca eka titlilasi leti hlamulaka leswaku u kuma vulawuri lebyi engetelekeke eka tona. Hlaya ti docs ku kuma swikombiso swin’wana.
Updated our button-variant()na button-outline-variant()mixins ku seketela ti parameter to engetela.
Tiboto leti pfuxetiweke ku tiyisisa ku hambana loku engetelekeke eka swiyimo swa hover na leswi tirhaka.
Swikomba-nkarhi leswi lamaleke sweswi swi ni pointer-events: none;.

Khadi ra

Ku tshovekaKu wile .card-deckhi ku tsakela gridi ya hina. Pfuxeta makhadi ya wena eka titlilasi ta tikholomu ivi u engetela xigwitsirisi xa mutswari .row-cols-*ku tlhela u tumbuluxa tidekhi ta makhadi (kambe hi vulawuri byo tala eka ku ringanisa loku hlamulaka).
Ku tshovekaU wile .card-columnsa seketela Masonry. Vona #28922 .
Ku tshovekaKu siviwe .cardaccordion leyi sekeriweke hi xiphemu lexintshwa xa Accordion .

Xigwitsirisi

Ku engeteriwe .carousel-darkmuxaka lowuntshwa wa tsalwa ra munyama, swilawuri, na swikombiso (swinene eka swivumbeko swa le ndzhaku leswi voningaka).
Ku siviwe swifaniso swa chevron swa vulawuri bya carousel hi ti-SVG letintshwa ku suka eka Swifaniso swa Bootstrap .

Pfala button

Ku tshovekaKu thyiwile vito lerintshwa .closera .btn-closevito leri nga riki ra xivumbeko xa le henhla.
Swikomba-nkarhi swo pfala sweswi swi tirhisa background-image(SVG leyi nghenisiweke) ematshan’weni ya a ×eka HTML, leswi pfumelelaka ku cinca-cinca ko olova handle ka xilaveko xo khumba mfungho wa wena.
Ku engeteriwe .btn-close-whitemuxaka lowuntshwa lowu tirhisaka filter: invert(1)ku endla leswaku ku va ni swifaniso swa ku hlongola ku hambana lokukulu eka swivumbeko swa ntima.

Ku wa

Ku susiwile swikhomela-ndhawu swa buku-nsongwa swa ti- accordion.

Swilo leswi nga ehansi

Ku engeteriwile .dropdown-menu-darkmuxaka lowuntshwa na swilo leswi cinca-cincaka leswi fambelanaka na swona swa swihoxo swa munyama leswi lavekaka.
Ku engeteriwe xihlawulekisi lexintshwa xa $dropdown-padding-x.
Ku endle leswaku dropdown divider yi va munyama leswaku ku ta antswisiwa ku hambana.
Ku tshovekaSwiendlakalo hinkwaswo swa dropdown sweswi swi pfuriwa eka dropdown toggle button ivi swi bubbled ku ya fika eka element ya mutswari.
Timenyu ta dropdown sweswi ti na data-bs-popper="static"attribute set loko positioning ya dropdown yi ri static, kumbe dropdown yi ri eka navbar. Leswi swi engeteriwa hi JavaScript ya hina naswona swi hi pfuna ku tirhisa switayele swa xiyimo xa ntolovelo handle ko kavanyeta ku veka ka Popper.
Ku tshovekaKu lahliwile flipxihlawuhlawu xa plugin yo wisa ku seketela vukorhokeri bya Popper bya ntumbuluko. Sweswi u nga tshikisa mahanyelo ya ku flip hi ku hundzisa array leyi nga riki na nchumu ya fallbackPlacementsoption eka flip modifier.
Timenyu leti nga ehansi sweswi ti nga ha tsindziyela hi ndlela leyintshwa autoCloseyo khoma mahanyelo ya ku pfala hi ku tisungulela . U nga tirhisa nhlawulo lowu ku amukela ku tsindziyela endzeni kumbe ehandle ka menyu leyi nga ehansi leswaku yi va leyi tirhisanaka.
Ti dropdown sweswi ti seketela .dropdown-items leyi phutseriweke hi <li>s.

Jumbotron leyi vuriwaka Jumbotron

Ku tshovekaKu lahliwile xiphemu xa jumbotron tani hi leswi xi nga phindha-phindhiwaka hi switirhisiwa. Vona xikombiso xa hina lexintshwa xa Jumbotron ku kuma demo.

Nxaxamelo wa ntlawa

Ku engeteriwe .list-group-numberedxicinci lexintshwa eka nxaxamelo wa mintlawa.

Navs na tithebhu

Ku engeteriwe swilo leswintshwa nullleswi cinca-cincaka swa font-size, font-weight, color, na :hover coloreka .nav-linktlilasi.

Navbars

Ku tshovekaTi-navbar sweswi ti lava xikhomela-ndhawu endzeni (ku olovisa swinene swilaveko swa ku hambana na CSS leyi lavekaka).
Ku tshovekaTlilasi .activea ya ha tirhisiwi eka .nav-items, yi fanele ku tirhisiwa hi ku kongoma eka .nav-links.

Ehandle ka canvas

Ku engeteriwe xiphemu lexintshwa xa offcanvas .

Ku vekiwa ka matluka

Swihlanganisi swa pagination sweswi swi na customizable margin-leftleswi nga na dynamically rounded eka makhon’wa hinkwawo loko swi hambanisiwile na yin’wana.
Ku engeteriwe transitions eka swihlanganisi swa mapheji.

Popovers

Ku tshovekaKu thyiwile vito lerintshwa .arroweka .popover-arrowxifaniso xa hina xa popover xa ntolovelo.
Ku thyiwile vito lerintshwa ra whiteListnhlawulo ku va allowList.

Vaendli va swirhendzevutana

Va- spinner sweswi va xixima prefers-reduced-motion: reducehi ku hunguta rivilo ra swifaniso leswi hanyaka. Vona #31882 .
Ku antswisiwa ka ku ringanisa ka spinner loku yimisiweke.

Titositi

Sweswi ti- toast ti nga vekiwa eka a .toast-containerhi ku pfuniwa hi switirhisiwa swo veka swilo .
Ku cinciwile nkarhi wa toast wa ntolovelo ku ya eka 5 wa tisekoni.
Yi susiwile overflow: hiddeneka ti toasts yi siviwa hi proper border-radiuss leyingana calc()mintirho.

Switsundzuxo swa Switirhisiwa

Ku tshovekaKu thyiwile vito lerintshwa .arroweka .tooltip-arrowxifaniso xa hina xa xitirhisiwa xa ntolovelo.
Ku tshovekaNhlayo ya xiviri ya the fallbackPlacementsyi cinciwile ku ['top', 'right', 'bottom', 'left']ya eka ku vekiwa ko antswa ka swiaki swa popper.
Ku tshovekaKu thyiwile vito lerintshwa ra whiteListnhlawulo ku va allowList.

Switirhisiwa

Ku tshovekaKu cinciwile mavito ya switirhisiwa swo hlayanyana ku tirhisa mavito ya nhundzu leyi twisisekaka ematshan’wini ya mavito ya nkongomiso hi ku engeteriwa ka nseketelo wa RTL:
- Ku thyiwile vito lerintshwa .left-*na .right-*ku ya eka .start-*na .end-*.
- Ku thyiwile vito lerintshwa .float-leftna .float-rightku ya eka .float-startna .float-end.
- Ku thyiwile vito lerintshwa .border-leftna .border-rightku ya eka .border-startna .border-end.
- Ku thyiwile vito lerintshwa .rounded-leftna .rounded-rightku ya eka .rounded-startna .rounded-end.
- Ku thyiwile vito lerintshwa .ml-*na .mr-*ku ya eka .ms-*na .me-*.
- Ku thyiwile vito lerintshwa .pl-*na .pr-*ku ya eka .ps-*na .pe-*.
- Ku thyiwile vito lerintshwa .text-leftna .text-rightku ya eka .text-startna .text-end.
Ku tshovekaKu tshikisa margin ya negative hi ku tiyimisela.
Ku engeteriwe .bg-bodytlilasi leyintshwa yo hatlisa ku veka <body>'s background eka swiaki leswi engetelekeke.
Ku engeteriwe switirhisiwa leswintshwa swa xiyimo xa top, right, bottom, na left. Mimpimo yi katsa 0, 50%, na 100%ya nhundzu yin’wana na yin’wana.
Ku engeteriwe swintshwa .translate-middle-x& .translate-middle-yswitirhisiwa eka horizontally kumbe vertically center absolute/fixed positioned elements.
Ku engeteriwe border-widthswitirhisiwa leswintshwa .
Ku tshovekaKu thyiwile vito lerintshwa .text-monospaceri va .font-monospace.
Ku tshovekaKu susiwile .text-hidetani hi leswi ku nga ndlela ya khale yo fihla tsalwa leri nga ha fanelangiki ku tirhisiwa.
Ku engeteriwe .fs-*switirhisiwa swa font-sizeswitirhisiwa (leswi RFS yi tirhisiweke). Leswi swi tirhisa xikalo lexi fanaka na tinhlokomhaka ta xiviri ta HTML (1-6, letikulu ku ya eka letitsongo), naswona ti nga cinciwa hi ku tirhisa mepe wa Sass.
Ku tshovekaKu thyiwile mavito lamantshwa .font-weight-*ya switirhisiwa tanihi .fw-*ku komisa na ku nga cinci.
Ku tshovekaKu thyiwile mavito lamantshwa .font-style-*ya switirhisiwa tanihi .fst-*ku komisa na ku nga cinci.
Ku engeteriwile .d-gridku kombisa switirhisiwa na switirhisiwa leswintshwa gap( .gap) swa CSS Grid na flexbox layouts.
Ku tshovekaKu susiwile .rounded-smna rounded-lg, naswona ku nghenise xikalo lexintshwa xa titlilasi, .rounded-0ku .rounded-3. Vona #31687 .
Ku engeteriwe line-heightswitirhisiwa leswintshwa: .lh-1, .lh-sm, .lh-basena .lh-lg. Vona laha .
Ku rhurhise .d-nonexitirhisiwa eka CSS ya hina ku xi nyika ntiko wo tala ku tlula switirhisiwa swin’wana swa nkombiso.
Ku andlale .visually-hidden-focusablemupfuni ku tlhela a tirha eka swibye, hi ku tirhisa :focus-within.

Vapfuni

Ku tshoveka Vapfuni va ku nghenisa lava hlamulaka va thyiwile mavito lamantshwa ku va vapfuni va ratio lava nga na mavito lamantshwa ya tlilasi na mahanyelo lama antswisiweke, xikan’we na xihlawulekisi xa CSS lexi pfunaka.
- Titlilasi ti thyiwile mavito lamantshwa leswaku ti cinca byti va xeka mpimo wa xivumbeko. Hi xikombiso, .ratio-16by9sweswi i .ratio-16x9.
- Hi hoxe .embed-responsive-itemxihlawulekisi xa ntlawa wa na elemente hi seketela .ratio > *xihlawulekisi xo olova. Ku hava tlilasi yin’wana leyi lavekaka, naswona mupfuni wa ratio sweswi u tirha na elemente yihi na yihi ya HTML.
- Mepe $embed-responsive-aspect-ratioswa Sass wu thyiwile vito lerintshwa $aspect-ratiosnaswona mimpimo ya wona yi olovisiwile ku katsa vito ra tlilasi na phesente tanihi key: valuempatswa.
- Swilo leswi cinca-cincaka swa CSS sweswi swi endliwile naswona swi katsiwile eka ntikelo wun’wana na wun’wana eka mepe wa Sass. Cinca --bs-aspect-ratioxihlawulekisi eka .ratioku tumbuluxa mpimo wihi na wihi wa xivumbeko xa ntolovelo .
Ku tshoveka Titlilasi ta “Screen reader” sweswi i titlilasi leti “fihliweke hi mahlo” .
- Ku cince fayili ya Sass ku suka eka scss/helpers/_screenreaders.scssku ya ekascss/helpers/_visually-hidden.scss
- Ku thyiwile vito lerintshwa .sr-onlyna .sr-only-focusableku .visually-hiddenna.visually-hidden-focusable
- Ku thyiwile vito lerintshwa sr-only()na sr-only-focusable()mixins ku va visually-hidden()na visually-hidden-focusable().
bootstrap-utilities.csssweswi yi tlhela yi katsa ni vapfuni va hina. Vapfuni a va ha lavi ku nghenisiwa eka ku aka ka ntolovelo.

JavaScript

U tshike ku titshega hi jQuery ivi a tsala nakambe ti-plugin leswaku ti va eka JavaScript ya ntolovelo.
Ku tshovekaSwihlawulekisi swa datha swa tiplagi hinkwato ta JavaScript sweswi swi vekiwile hi mavito ku pfuneta ku hambanyisa ntirho wa Bootstrap eka vanhu va vunharhu na khodi ya wena. Hi xikombiso, hi tirhisa data-bs-toggleematshan’weni ya data-toggle.
Tiplagi hinkwato sweswi ti nga amukela xihlawulekisi xa CSS tanihi xivutiso xo sungula. U nga ha hundzisela xiphemu xa DOM kumbe xihlawulekisi xihi na xihi xa CSS lexi tirhaka ku tumbuluxa xikombiso lexintshwa xa xiengetelo:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigyi nga hundzisiwa tanihi ntirho lowu amukelaka xivumbeko xa Popper xa xiviri xa Bootstrap tanihi xivutiso, leswaku u ta kota ku hlanganisa xivumbeko lexi xa xiviri hi ndlela ya wena. Swi tirha eka ti-dropdown, ti-popover, na switsundzuxo swa switirhisiwa.
Nhlayo ya xiviri ya the fallbackPlacementsyi cinciwile ku ['top', 'right', 'bottom', 'left']ya eka ku vekiwa ko antswa ka swiaki swa Popper. Swi tirha eka ti-dropdown, ti-popover, na switsundzuxo swa switirhisiwa.
Ku susiwile xitlhokovetselo xa le hansi eka tindlela ta mani na mani ta static to fana na _getInstance()→ getInstance().