in English

Gbigbe lọ si v5

Tọpinpin ati atunyẹwo awọn ayipada si awọn faili orisun Bootstrap, iwe, ati awọn paati lati ṣe iranlọwọ fun ọ lati jade lati v4 si v5.

Lori iwe yi

v5.2.0

Apẹrẹ atunṣe

Bootstrap v5.2.0 ṣe ẹya imudojuiwọn apẹrẹ arekereke fun iwonba awọn paati ati awọn ohun-ini kọja iṣẹ akanṣe naa, paapaa nipasẹ awọn border-radiusiye ti a ti tunṣe lori awọn bọtini ati awọn iṣakoso fọọmu . Awọn iwe-ipamọ wa tun ti ni imudojuiwọn pẹlu oju-iwe akọkọ, ipilẹ awọn docs ti o rọrun ti ko wó awọn apakan ti ẹgbẹ ẹgbẹ mọ, ati awọn apẹẹrẹ olokiki diẹ sii ti Awọn aami Bootstrap .

Diẹ CSS oniyipada

A ti ṣe imudojuiwọn gbogbo awọn paati wa lati lo awọn oniyipada CSS. Lakoko ti Sass tun ṣe atilẹyin ohun gbogbo, paati kọọkan ti ni imudojuiwọn lati ni awọn oniyipada CSS lori awọn kilasi ipilẹ paati (fun apẹẹrẹ, .btn), gbigba fun isọdi akoko gidi diẹ sii ti Bootstrap. Ni awọn idasilẹ ti o tẹle, a yoo tẹsiwaju lati faagun lilo awọn oniyipada CSS wa si ipilẹ wa, awọn fọọmu, awọn oluranlọwọ, ati awọn ohun elo. Ka diẹ sii nipa awọn oniyipada CSS ni paati kọọkan lori awọn oju-iwe iwe aṣẹ wọn.

Lilo oniyipada CSS wa yoo jẹ pe ko pe titi di Bootstrap 6. Lakoko ti a fẹ lati ṣe imuse wọnyi ni kikun kọja igbimọ, wọn ṣe eewu ti nfa awọn ayipada fifọ. Fun apẹẹrẹ, eto $alert-border-width: var(--bs-border-width)ninu koodu orisun wa fọ Sass ti o pọju ninu koodu tirẹ ti o ba n ṣe $alert-border-width * 2fun idi kan.

Bii iru bẹẹ, nibikibi ti o ba ṣeeṣe, a yoo tẹsiwaju lati Titari si awọn oniyipada CSS diẹ sii, ṣugbọn jọwọ da imuse wa le ni opin diẹ ni v5.

Tuntun`_maps.scss`

Bootstrap v5.2.0 ṣafihan faili Sass tuntun pẹlu _maps.scss. O fa ọpọlọpọ awọn maapu Sass jade _variables.scsslati ṣatunṣe ọran kan nibiti awọn imudojuiwọn si maapu atilẹba ko lo si awọn maapu Atẹle ti o fa wọn siwaju. Fun apẹẹrẹ, awọn imudojuiwọn si $theme-colorsko ni lilo si awọn maapu akori miiran ti o gbarale $theme-colors, fifọ awọn ṣiṣan isọdi bọtini. Ni kukuru, Sass ni aropin nibiti o ti lo iyipada aiyipada tabi maapu , ko le ṣe imudojuiwọn. Aipe iru kan wa pẹlu awọn oniyipada CSS nigba ti wọn lo lati ṣajọ awọn oniyipada CSS miiran.

Eyi ni idi ti awọn isọdi oniyipada ni Bootstrap ni lati wa lẹhin @import "functions", ṣugbọn ṣaaju @import "variables"ati iyoku akopọ agbewọle wa. Kanna kan si awọn maapu Sass — o gbọdọ yi awọn aiṣedeede silẹ ṣaaju lilo wọn. Awọn maapu wọnyi ti gbe lọ si tuntun _maps.scss:

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

Itumọ Bootstrap CSS aṣa rẹ yẹ ki o dabi nkan bayi pẹlu agbewọle awọn maapu lọtọ.

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

Awọn ohun elo tuntun

Awọn font-weightohun elo ti o gbooro lati pẹlu .fw-semiboldfun awọn nkọwe olominira.
Awọn border-radiusohun elo ti o gbooro lati pẹlu awọn titobi tuntun meji, .rounded-4ati .rounded-5, fun awọn aṣayan diẹ sii.

Awọn iyipada afikun

Agbekale titun $enable-container-classesaṣayan. - Ni bayi nigbati o ba jade sinu apẹrẹ Grid CSS adanwo, .container-*awọn kilasi yoo tun ṣe akopọ, ayafi ti o ba ṣeto aṣayan yii si false. Awọn apoti tun ni bayi tọju awọn iye gota wọn.
Ẹya paati Offcanvas bayi ni awọn iyatọ idahun . Kilasi atilẹba .offcanvasko wa ni iyipada — o tọju akoonu kọja gbogbo awọn ibudo wiwo. Lati jẹ ki o ṣe idahun, yi .offcanvaskilasi naa pada si eyikeyi .offcanvas-{sm|md|lg|xl|xxl}kilasi.
Awọn pin tabili ti o nipon ti wa ni ijade ni bayi. - A ti yọkuro ti o nipon ati iṣoro diẹ sii lati bori aala laarin awọn ẹgbẹ tabili ati gbe lọ si kilasi iyan ti o le lo, .table-group-divider. Wo awọn iwe aṣẹ tabili fun apẹẹrẹ.
Scrollspy ti jẹ atunko lati lo API Oluwoye Ikorita , eyi ti o tumọ si pe iwọ ko nilo awọn iwe-itumọ obi ibatan mọ, sọoffsetatunto konfigi, ati diẹ sii. Wa fun awọn imuse Scrollspy rẹ lati jẹ deede diẹ sii ati ni ibamu ni afihan wọn nav.
Popovers ati Tooltips bayi lo CSS oniyipada. Diẹ ninu awọn oniyipada CSS ti ni imudojuiwọn lati ọdọ awọn ẹlẹgbẹ Sass wọn lati dinku nọmba awọn oniyipada. Bi abajade, awọn oniyipada mẹta ti jẹ idinku ninu itusilẹ yii: $popover-arrow-color, $popover-arrow-outer-color, ati $tooltip-arrow-color.
.text-bg-{color}Ti ṣafikun awọn oluranlọwọ tuntun . Dipo ti ṣeto olukuluku .text-*ati .bg-*awọn ohun elo, o le lo awọn .text-bg-*oluranlọwọ lati ṣeto background-colorpẹlu itansan iwaju iwaju color.
Atunṣe .form-check-reverseti a ṣafikun lati yi aṣẹ awọn aami ati awọn apoti ayẹwo/awọn redio ti o somọ.
Awọn ọwọn ṣi kuro ni atilẹyin si awọn tabili nipasẹ .table-striped-columnskilasi tuntun.

Fun atokọ pipe ti awọn ayipada, wo iṣẹ akanṣe v5.2.0 lori GitHub .

v5.1.0

Ṣe afikun atilẹyin esiperimenta fun Ifilelẹ Grid CSS . - Eyi jẹ iṣẹ ti nlọ lọwọ, ati pe ko ti ṣetan fun lilo iṣelọpọ, ṣugbọn o le jade sinu ẹya tuntun nipasẹ Sass. Lati muu ṣiṣẹ, mu akoj aiyipada ṣiṣẹ, nipa siseto $enable-grid-classes: falseati mu Akoj CSS ṣiṣẹ nipa ṣiṣeto $enable-cssgrid: true.
Awọn navbars ti a ṣe imudojuiwọn lati ṣe atilẹyin offcanvas. - Ṣafikun awọn iyaworan offcanfasi ni eyikeyi navbar pẹlu awọn .navbar-expand-*kilasi idahun ati diẹ ninu isamisi itafasi.
Ti ṣafikun paati ibi ipamọ tuntun . - Ẹya tuntun wa, ọna lati pese awọn bulọọki igba diẹ ni dipo akoonu gidi lati ṣe iranlọwọ fihan pe ohunkan tun n ṣe ikojọpọ ninu aaye tabi app rẹ.
Ohun itanna Collapse ni bayi ṣe atilẹyin iṣubu petele . - Ṣafikun .collapse-horizontalsi rẹ .collapselati ṣubu widthdipo ti height. Yago fun atunṣe ẹrọ aṣawakiri nipasẹ siseto kan min-heighttabi height.
Ti ṣafikun akopọ tuntun ati awọn oluranlọwọ ofin inaro. - Ni kiakia lo awọn ohun-ini flexbox pupọ lati ṣẹda awọn ipilẹ aṣa ni kiakia pẹlu awọn akopọ . Yan lati petele ( .hstack) ati inaro ( .vstack) awọn akopọ. Ṣafikun awọn ipin inaro ti o jọra si <hr>awọn eroja pẹlu awọn oluranlọwọ tuntun.vr .
:rootTi ṣafikun awọn oniyipada CSS agbaye tuntun . - Ṣafikun ọpọlọpọ awọn oniyipada CSS tuntun si :rootipele fun iṣakoso <body>awọn aza. Diẹ sii wa ninu awọn iṣẹ, pẹlu kọja awọn ohun elo ati awọn paati, ṣugbọn fun bayi ka awọn oniyipada CSS ni apakan Ṣe akanṣe .
Awọ ti o bori ati awọn ohun elo abẹlẹ lati lo awọn oniyipada CSS, o si ṣafikun opacity ọrọ tuntun ati awọn ohun elo opacity abẹlẹ . - .text-* ati .bg-*awọn ohun elo ti wa ni itumọ ti pẹlu awọn oniyipada CSS ati rgba()awọn iye awọ, gbigba ọ laaye lati ṣe irọrun ṣe eyikeyi ohun elo pẹlu awọn ohun elo aimọ tuntun.
Ṣafikun awọn apẹẹrẹ snippet tuntun ti o da lati ṣafihan bi a ṣe le ṣe akanṣe awọn paati wa. - Fa setan lati lo awọn paati adani ati awọn ilana apẹrẹ ti o wọpọ pẹlu awọn apẹẹrẹ Snippets tuntun wa . Pẹlu awọn ẹlẹsẹ , awọn silẹ , awọn ẹgbẹ atokọ , ati awọn awoṣe .
Yọ awọn aza ipo ipo ti ko lo kuro lati awọn agbejade ati awọn itọsi irinṣẹ bi iwọnyi ṣe mu nipasẹ Popper nikan. $tooltip-marginti yọkuro ati ṣeto si nullilana naa.

Fẹ alaye diẹ sii? Ka v5.1.0 bulọọgi post.

Iwo ti o wa nibe yen! Awọn iyipada si itusilẹ pataki akọkọ wa ti Bootstrap 5, v5.0.0, jẹ akọsilẹ ni isalẹ. Wọn ko ṣe afihan awọn iyipada afikun ti o han loke.

Awọn igbẹkẹle

Ju silẹ jQuery.
Igbegasoke lati Popper v1.x si Popper v2.x.
Libsass ti o rọpo pẹlu Dart Sass bi olupilẹṣẹ Sass wa ti a fun Libsas ti jẹ idinku.
Iṣilọ lati Jekyll si Hugo fun kikọ iwe-ipamọ wa

Atilẹyin aṣawakiri

Ju Internet Explorer 10 ati 11 silẹ
Silẹ Microsoft Edge <16 (Legacy Edge)
Firefox ti lọ silẹ <60
Safari silẹ <12
Ju iOS Safari silẹ <12
Chrome silẹ <60

Awọn iyipada iwe

Oju-iwe ile ti a tun ṣe, iṣeto awọn iwe aṣẹ, ati ẹlẹsẹ.
Ti ṣafikun itọsọna Parcel tuntun .
Ti ṣafikun apakan Isọdi tuntun , rirọpo oju-iwe Theming v4 , pẹlu awọn alaye tuntun lori Sass, awọn aṣayan atunto agbaye, awọn ero awọ, awọn oniyipada CSS, ati diẹ sii.
Ṣe atunto gbogbo awọn iwe fọọmu sinu apakan Awọn fọọmu tuntun , fifọ yato si akoonu sinu awọn oju-iwe idojukọ diẹ sii.
Bakanna, ṣe imudojuiwọn apakan Ifilelẹ , si ẹran-ara jade akoonu akoj diẹ sii kedere.
Fun lorukọmii “Navs” oju-iwe paati si “Navs & Awọn taabu”.
Fun lorukọmii oju-iwe “Ṣayẹwo” si “Ṣayẹwo & awọn redio”.
Ti ṣe atunto navbar o si ṣafikun subnav tuntun lati jẹ ki o rọrun lati wa ni ayika awọn aaye wa ati awọn ẹya docs.
Ṣafikun ọna abuja keyboard tuntun fun aaye wiwa Ctrl + /:.

Sass

A ti sọ adapo maapu Sass aiyipada lati jẹ ki o rọrun lati yọkuro awọn iye laiṣe. Ranti pe o ni lati ṣalaye gbogbo awọn iye ninu awọn maapu Sass bii $theme-colors. Ṣayẹwo bi o ṣe le ṣe pẹlu awọn maapu Sass .
FifọIṣẹ ti a tun lorukọ color-yiq()ati awọn oniyipada ti o ni ibatan si color-contrast()bi ko ṣe ni ibatan si aaye awọ YIQ mọ. Wo #30168.
- $yiq-contrasted-thresholdti wa ni lorukọmii si $min-contrast-ratio.
- $yiq-text-darkati $yiq-text-lightti wa ni lẹsẹsẹ lorukọmii si $color-contrast-darkati $color-contrast-light.
FifọMedia ibeere mixins paramita ti yi pada fun kan diẹ mogbonwa ona.
- media-breakpoint-down()nlo aaye fifọ funrararẹ dipo aaye fifọ ti o tẹle (fun apẹẹrẹ, media-breakpoint-down(lg)dipo awọn oju wiwo ibi- media-breakpoint-down(md)afẹde ti o kere ju lg).
- Bakanna, paramita keji ninu media-breakpoint-between()tun nlo aaye fifọ funrarẹ dipo aaye fifọ atẹle (fun apẹẹrẹ, media-between(sm, lg)dipo awọn ibi-iwoye ibi- media-breakpoint-between(sm, md)afẹde laarin smati lg).
FifọYọ awọn aza titẹjade ati $enable-print-stylesoniyipada. Awọn kilasi ifihan titẹ sita tun wa ni ayika. Wo # 28339 .
FifọJu silẹ color(), theme-color(), ati gray()awọn iṣẹ ni ojurere ti awọn oniyipada. Wo # 29083 .
FifọIṣẹ ti a lorukọmii theme-color-level()si color-level()ati bayi gba eyikeyi awọ ti o fẹ dipo awọn $theme-colorawọ nikan. Wo # 29083 Ṣọra: color-level() nigbamii ti lọ silẹ ni v5.0.0-alpha3.
FifọFun lorukọmii $enable-prefers-reduced-motion-media-queryati $enable-pointer-cursor-for-buttonssi $enable-reduced-motionati $enable-button-pointersfun kukuru.
FifọApopọ ti yọ kuro bg-gradient-variant(). Lo .bg-gradientkilasi lati ṣafikun awọn gradients si awọn eroja dipo awọn .bg-gradient-*kilasi ti ipilẹṣẹ.
Fifọ Yọ awọn akojọpọ ti a ti sọ tẹlẹ kuro:
- hover, hover-focus, plain-hover-focus, atihover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(tun fi kilasi ohun elo ti o somọ silẹ, .text-hide)
- visibility()
- form-control-focus()
FifọIṣẹ ti a tunrukọ scale-color()lati shift-color()yago fun ikọlura pẹlu iṣẹ igbelowọn awọ tirẹ ti Sass.
box-shadowmixins bayi gba nulliye ati ju silẹ nonelati ọpọ ariyanjiyan. Wo # 30394 .
Mixin ni border-radius()bayi ni iye aiyipada.

Eto awọ

Eto awọ eyiti o ṣiṣẹ pẹlu color-level()ati $theme-color-intervalyọkuro ni ojurere ti eto awọ tuntun kan. Gbogbo lighten()ati darken()awọn iṣẹ inu koodu koodu wa ti rọpo nipasẹ tint-color()ati shade-color(). Awọn iṣẹ wọnyi yoo dapọ awọ pẹlu boya funfun tabi dudu dipo iyipada ina rẹ nipasẹ iye ti o wa titi. Ifẹ shift-color()boya tint tabi iboji awọ kan da lori boya paramita iwuwo rẹ jẹ rere tabi odi. Wo #30622 fun alaye diẹ sii.
Ti ṣafikun awọn tints tuntun ati awọn ojiji fun gbogbo awọ, pese awọn awọ lọtọ mẹsan fun awọ ipilẹ kọọkan, bi awọn oniyipada Sass tuntun.
Imudara iyatọ awọ. Ipin itansan awọ bumped lati 3: 1 si 4.5: 1 ati imudojuiwọn buluu, alawọ ewe, cyan, ati awọn awọ Pink lati rii daju iyatọ WCAG 2.1 AA. Tun yi awọ itansan awọ wa pada lati $gray-900si $black.
Lati ṣe atilẹyin eto awọ wa, a ti ṣafikun aṣa tuntun tint-color()ati shade-color()awọn iṣẹ lati dapọ awọn awọ wa ni deede.

Awọn imudojuiwọn akoj

Oju-iwe fifọ tuntun! Fi kun titun xxlbreakpoint fun 1400pxati si oke. Ko si awọn ayipada si gbogbo awọn aaye isinmi miiran.
Awọn gotters ti o ni ilọsiwaju. Awọn gọta ti wa ni bayi ṣeto ni awọn rems, ati pe o dín ju v4 ( 1.5rem, tabi nipa 24px, isalẹ lati 30px). Eyi ṣe deede awọn gọta ti eto akoj wa pẹlu awọn ohun elo aye aye.
- Fikun kilasi titun gutter ( .g-*, .gx-*, ati .gy-*) lati ṣakoso awọn gogo petele / inaro, awọn gọta petele, ati awọn gọta inaro.
- FifọTi lorukọmii .no-gutterslati .g-0baamu awọn ohun elo gutter tuntun.
Awọn ọwọn ko ti position: relativelo mọ, nitorinaa o le ni lati ṣafikun .position-relativesi diẹ ninu awọn eroja lati mu ihuwasi yẹn pada.
FifọSilẹ orisirisi awọn .order-*kilasi ti o igba lọ ajeku. A pese nikan .order-1lati .order-5jade kuro ninu apoti.
FifọSilẹ .mediapaati bi o ti le ṣe ni irọrun tun ṣe pẹlu awọn ohun elo. Wo #28265 ati oju-iwe awọn ohun elo irọrun fun apẹẹrẹ .
Fifọ bootstrap-grid.cssbayi nikan kan box-sizing: border-boxọwọn dipo ti atunto titobi apoti agbaye. Ni ọna yii, awọn aza akoj wa le ṣee lo ni awọn aaye diẹ sii laisi kikọlu.
$enable-grid-classesko si ohun to disables awọn iran ti eiyan kilasi mọ. Wo #29146.
Ṣe imudojuiwọn make-colmixin si aiyipada si awọn ọwọn dogba laisi iwọn kan pato.

Akoonu, Atunbere, ati be be lo

RFS ti ṣiṣẹ bayi nipasẹ aiyipada. Awọn akọle nipa lilofont-size()mixin yoo ṣatunṣe wọn laifọwọyifont-sizesi iwọn pẹlu wiwo wiwo. Ẹya yii ti jade tẹlẹ pẹlu v4.
FifọTi ṣe atunṣe iwe kikọ ifihan wa lati rọpo awọn $display-*oniyipada wa ati pẹlu $display-font-sizesmaapu Sass kan. Tun yọ awọn $display-*-weightoniyipada kọọkan kuro fun ẹyọkan $display-font-weightati atunṣe font-sizes.
Ṣe afikun awọn .display-*titobi akọle tuntun meji, .display-5ati .display-6.
Awọn ọna asopọ ti wa ni abẹlẹ nipasẹ aiyipada (kii ṣe lori rababa nikan), ayafi ti wọn ba jẹ apakan ti awọn paati kan pato.
Awọn tabili ti a tunṣe lati tun awọn aṣa wọn ṣe ati tun wọn kọ pẹlu awọn oniyipada CSS fun iṣakoso diẹ sii lori iselona.
FifọAwọn tabili itẹle ko jogun awọn aṣa mọ.
Fifọ .thead-lightati .thead-darkpe a sọ silẹ ni ojurere ti awọn .table-*kilasi iyatọ eyiti o le ṣee lo fun gbogbo awọn eroja tabili ( thead,,,,, tbodyati tfoot) .trthtd
FifọMixin ti table-row-variant()wa ni lorukọmii si table-variant()ati gba awọn paramita 2 nikan: $color(orukọ awọ) ati $value(koodu awọ). Awọ aala ati awọn awọ asẹnti jẹ iṣiro laifọwọyi da lori awọn oniyipada ifosiwewe tabili.
Pipin tabili cell padding oniyipada sinu -yati -x.
FifọSilẹ .pre-scrollablekilasi. Wo #29135
Fifọ .text-*Awọn ohun elo ko ṣe afikun fifin ati awọn ipinlẹ idojukọ si awọn ọna asopọ mọ. .link-*awọn kilasi oluranlọwọ le ṣee lo dipo. Wo #29267
FifọSilẹ .text-justifykilasi. Wo #29793
Fifọ <hr>eroja bayi lo heightdipo ti borderlati dara support sizeabuda. Eyi tun ngbanilaaye lilo awọn ohun elo padding lati ṣẹda awọn ipin ti o nipon (fun apẹẹrẹ, <hr class="py-1">).
Tun petele aiyipada to padding-lefttan <ul>ati <ol>awọn eroja lati aiyipada ẹrọ aṣawakiri 40pxsi 2rem.
Ṣafikun $enable-smooth-scroll, eyiti o kan scroll-behavior: smoothni agbaye-ayafi fun awọn olumulo ti n beere fun idinku gbigbe nipasẹ prefers-reduced-motionibeere media. Wo # 31877

RTL

Itọnisọna petele awọn oniyipada pato, awọn ohun elo, ati awọn alapọpọ ti jẹ lorukọmii lati lo awọn ohun-ini ọgbọn bii awọn ti a rii ni awọn ipilẹ flexbox — fun apẹẹrẹ, startati endni dipo leftati right.

Awọn fọọmu

Ṣafikun awọn fọọmu lilefoofo tuntun! A ti ṣe igbega apẹẹrẹ awọn aami Lilefoofo si awọn paati fọọmu ti o ni atilẹyin ni kikun. Wo oju-iwe awọn aami Lilefoofo tuntun.
Fifọ Isopọ abinibi ati awọn eroja fọọmu aṣa. Awọn apoti ayẹwo, awọn redio, awọn yiyan, ati awọn igbewọle miiran ti o ni awọn kilasi abinibi ati aṣa ni v4 ti ni isọdọkan. Bayi fere gbogbo awọn eroja fọọmu wa jẹ aṣa patapata, pupọ julọ laisi iwulo HTML aṣa.
- .custom-control.custom-checkboxni bayi .form-check.
- .custom-control.custom-custom-radioni bayi .form-check.
- .custom-control.custom-switchni bayi .form-check.form-switch.
- .custom-selectni bayi .form-select.
- .custom-fileati .form-filepe a ti rọpo nipasẹ awọn aṣa aṣa lori oke .form-control.
- .custom-rangeni bayi .form-range.
- Silẹ abinibi .form-control-fileati .form-control-range.
FifọSilẹ .input-group-appendati .input-group-prepend. O le kan ṣafikun awọn bọtini ati .input-group-textbi awọn ọmọ taara ti awọn ẹgbẹ titẹ sii.
Radiọsi aala ti o ti pẹ ti o padanu lori ẹgbẹ titẹ sii pẹlu kokoro esi afọwọsi ni ipari nipasẹ fifi .has-validationkilasi afikun kun si awọn ẹgbẹ titẹ sii pẹlu afọwọsi.
Fifọ Awọn kilasi iṣeto-fọọmu kan ti o lọ silẹ fun eto akoj wa. Lo akoj ati awọn ohun elo wa dipo .form-group, .form-row, tabi .form-inline.
FifọAwọn aami fọọmu nilo bayi .form-label.
Fifọ .form-textno gun seto display, gbigba ọ laaye lati ṣẹda inline tabi dènà ọrọ iranlọwọ bi o ṣe fẹ nikan nipa yiyipada eroja HTML.
Awọn iṣakoso fọọmu ko tun lo ti o wa titi heightnigbati o ṣee ṣe, dipo idaduro lati min-heightmu ilọsiwaju isọdi ati ibaramu pẹlu awọn paati miiran.
Awọn aami afọwọsi ko ni lilo si <select>s pẹlu multiple.
Atunto orisun Sass awọn faili labẹ scss/forms/, pẹlu awọn aza ẹgbẹ titẹ sii.

Awọn eroja

Awọn iye iṣọkan paddingfun awọn titaniji, akara akara, awọn kaadi, awọn isọ silẹ, awọn ẹgbẹ atokọ, awọn awoṣe, awọn agbejade, ati awọn imọran irinṣẹ lati da lori $spaceroniyipada wa. Wo # 30564 .

Accordion

Fikun paati accordion tuntun .

Awọn itaniji

Awọn itaniji ni bayi ni awọn apẹẹrẹ pẹlu awọn aami .
Yọ awọn aṣa aṣa kuro fun <hr>s ni itaniji kọọkan niwon wọn ti lo tẹlẹ currentColor.

Baajii

FifọJu gbogbo .badge-*awọn kilasi awọ silẹ fun awọn ohun elo abẹlẹ (fun apẹẹrẹ, lo .bg-primarydipo .badge-primary).
FifọJu silẹ — lo .badge-pillohun .rounded-pillelo dipo.
FifọRaba kuro ati awọn aza idojukọ fun <a>ati <button>awọn eroja.
Alekun fifẹ aiyipada fun awọn baaji lati .25em/ .5emsi .35em/ .65em.

Akara akara

Irọrun irisi aifọwọyi ti burẹdi nipa yiyọ padding, background-color, ati border-radius.
Ṣafikun ohun-ini aṣa CSS tuntun --bs-breadcrumb-dividerfun isọdi irọrun laisi iwulo lati ṣajọ CSS.

Awọn bọtini

Fifọ Awọn bọtini yi pada , pẹlu awọn apoti ayẹwo tabi awọn redio, ko nilo JavaScript mọ ati ni isamisi tuntun. A ko nilo eroja ipari mọ, ṣafikun.btn-checksi<input>, ati ṣe alawẹ-meji pẹlu awọn.btnkilasi eyikeyi lori<label>. Wo #30650 . Awọn iwe aṣẹ fun eyi ti gbe lati oju-iwe Awọn bọtini wa si apakan Awọn fọọmu tuntun.
Fifọ Silẹ .btn-blockfun igbesi. Dipo lilo .btn-blocklori .btn, fi ipari si awọn bọtini rẹ pẹlu .d-gridati ohun .gap-*elo lati aaye wọn bi o ti nilo. Yipada si awọn kilasi idahun fun paapaa iṣakoso diẹ sii lori wọn. Ka awọn iwe aṣẹ fun diẹ ninu awọn apẹẹrẹ.
Ṣe imudojuiwọn wa button-variant()ati button-outline-variant()awọn apopọ lati ṣe atilẹyin awọn paramita afikun.
Awọn bọtini imudojuiwọn lati rii daju iyatọ ti o pọ si lori rababa ati awọn ipinlẹ ti nṣiṣe lọwọ.
Awọn bọtini alaabo ni bayi pointer-events: none;.

Kaadi

FifọSilẹ .card-deckni ojurere ti wa akoj. Pa awọn kaadi rẹ sinu awọn kilasi ọwọn ki o ṣafikun .row-cols-*eiyan obi lati tun awọn deki kaadi ṣe (ṣugbọn pẹlu iṣakoso diẹ sii lori titete idahun).
FifọSilẹ .card-columnsni ojurere ti Masonry. Wo # 28922 .
FifọRọpo .cardaccordion ipilẹ pẹlu paati Accordion tuntun kan .

Carousel

Ṣe afikun .carousel-darkiyatọ tuntun fun ọrọ dudu, awọn idari, ati awọn olufihan (o dara fun awọn ipilẹ ti o fẹẹrẹfẹ).
Awọn aami chevron rọpo fun awọn iṣakoso carousel pẹlu awọn SVG tuntun lati Awọn aami Bootstrap .

Bọtini pipade

FifọFun lorukọmii .closesi .btn-closefun orukọ jeneriki ti o kere si.
Awọn bọtini pipade ni bayi lo background-image(SVG ti a fi sii) dipo kan ×ninu HTML, gbigba fun isọdi irọrun laisi iwulo lati fi ọwọ kan isamisi rẹ.
Ti ṣafikun iyatọ tuntun .btn-close-whiteti o lo filter: invert(1)lati mu awọn aami ifasilẹ itansan giga ṣiṣẹ lodi si awọn ipilẹ dudu.

Subu

Anchoring yi lọ kuro fun accordions.

Awọn idasile

Ṣe afikun .dropdown-menu-darkiyatọ tuntun ati awọn oniyipada ti o somọ fun awọn sisọ silẹ dudu ti o beere.
Fi kun titun oniyipada fun $dropdown-padding-x.
Ṣe okunkun pipin sisọ silẹ fun ilọsiwaju itansan.
FifọGbogbo awọn iṣẹlẹ fun sisọ silẹ ti wa ni ṣiṣi silẹ ni bayi lori bọtini toggle silẹ silẹ ati lẹhinna bubbled soke si nkan obi.
Awọn akojọ aṣayan silẹ ni bayi ti data-bs-popper="static"ṣeto abuda kan nigbati ipo sisọ silẹ jẹ aimi, tabi sisọ silẹ wa ni navbar. Eyi jẹ afikun nipasẹ JavaScript wa o ṣe iranlọwọ fun wa lati lo awọn aṣa ipo aṣa laisi kikọlu pẹlu ipo Popper.
FifọAṣayan silẹ flipfun ohun itanna silẹ ni ojurere ti atunto Popper abinibi. O le mu ihuwasi yiyi kuro ni bayi nipa gbigbe orun sofo fun fallbackPlacementsaṣayan ni iyipada isipade .
Awọn akojọ aṣayan silẹ le jẹ titẹ ni bayi pẹlu autoCloseaṣayan tuntun lati mu ihuwasi isunmọ aifọwọyi . O le lo aṣayan yii lati gba titẹ inu tabi ita akojọ aṣayan silẹ lati jẹ ki o ni ibaraẹnisọrọ.
Dropdowns bayi atilẹyin .dropdown-items we ni <li>s.

Jumbotron

FifọJumbotron silẹ paati bi o ṣe le ṣe atunṣe pẹlu awọn ohun elo. Wo apẹẹrẹ Jumbotron tuntun wa fun demo kan.

Ẹgbẹ akojọ

.list-group-numberedTi ṣafikun modifier tuntun si atokọ awọn ẹgbẹ.

Navs ati awọn taabu

Ṣafikun awọn nulloniyipada titun fun font-size, font-weight, color, ati :hover colorsi .nav-linkkilasi naa.

Navbars

FifọNavbars bayi nilo eiyan laarin (lati jẹ ki awọn ibeere aye di irọrun ati CSS nilo).
FifọKilasi .activeko le ṣe lo si awọn .nav-items, o gbọdọ lo taara lori .nav-links.

Offcanfasi

Ti ṣafikun paati offcanvas tuntun .

Oju-iwe

Awọn ọna asopọ oju-iwe ni bayi ni isọdi margin-leftti o yika ni agbara ni gbogbo awọn igun nigbati a yapa si ara wọn.
Ṣafikun transitions si awọn ọna asopọ pagination.

Popovers

Fifọ.arrowFun lorukọmii si ninu awoṣe popover .popover-arrowaiyipada wa.
whiteListAṣayan fun lorukọmii si allowList.

Spinners

Spinners bayi ola prefers-reduced-motion: reducenipa fa fifalẹ awọn ohun idanilaraya. Wo # 31882 .
Imudara spinner inaro titete.

Toasts

Toasts le wa ni ipo ni bayi .toast-containerpẹlu iranlọwọ ti awọn ohun elo ipo ipo .
Yipada iye akoko tositi aiyipada si awọn aaya 5.
Kuro overflow: hiddenlati tositi ati ki o rọpo pẹlu to dara border-radiuss pẹlu calc()awọn iṣẹ.

Awọn imọran irinṣẹ

FifọTi lorukọmii .arrowsi .tooltip-arrowninu awoṣe ọpa irinṣẹ aifọwọyi wa.
FifọAwọn aiyipada iye fun awọn ti fallbackPlacementswa ni yipada si ['top', 'right', 'bottom', 'left']fun dara placement ti popper eroja.
FifọwhiteListAṣayan fun lorukọmii si allowList.

Awọn ohun elo

FifọṢe lorukọmii ọpọlọpọ awọn ohun elo lati lo awọn orukọ ohun-ini ọgbọn dipo awọn orukọ itọsọna pẹlu afikun atilẹyin RTL:
- Fun lorukọmii .left-*ati .right-*si .start-*ati .end-*.
- Fun lorukọmii .float-leftati .float-rightsi .float-startati .float-end.
- Fun lorukọmii .border-leftati .border-rightsi .border-startati .border-end.
- Fun lorukọmii .rounded-leftati .rounded-rightsi .rounded-startati .rounded-end.
- Fun lorukọmii .ml-*ati .mr-*si .ms-*ati .me-*.
- Fun lorukọmii .pl-*ati .pr-*si .ps-*ati .pe-*.
- Fun lorukọmii .text-leftati .text-rightsi .text-startati .text-end.
FifọAlaabo awọn ala odi nipasẹ aiyipada.
Fi kun titun .bg-bodykilasi fun ni kiakia ṣeto awọn <body>'s isale si afikun eroja.
Ṣafikun awọn ohun elo ipo tuntun fun top, right, bottom, ati left. Awọn iye pẹlu 0, 50%, ati 100%fun ohun-ini kọọkan.
Ti ṣafikun tuntun .translate-middle-x& .translate-middle-yawọn ohun elo si petele tabi inaro aarin idi/awọn eroja ipo ti o wa titi.
Ti ṣafikun awọn border-widthohun elo tuntun .
FifọFun lorukọmii .text-monospacesi .font-monospace.
FifọYọ kuro .text-hidebi o ṣe jẹ ọna igba atijọ fun fifipamọ ọrọ ti ko yẹ ki o lo mọ.
Awọn .fs-*ohun elo ti a ṣafikun fun font-sizeawọn ohun elo (pẹlu RFS ṣiṣẹ). Iwọnyi lo iwọn kanna gẹgẹbi awọn akọle aiyipada HTML (1-6, nla si kekere), ati pe o le ṣe atunṣe nipasẹ maapu Sass.
FifọAwọn ohun .font-weight-*elo fun lorukọmii bi .fw-*fun kukuru ati aitasera.
FifọAwọn ohun .font-style-*elo fun lorukọmii bi .fst-*fun kukuru ati aitasera.
Fikun -un .d-gridlati ṣafihan awọn ohun elo ati awọn gapohun elo tuntun ( .gap) fun Akoj CSS ati awọn ipalemo flexbox.
FifọYọ kuro .rounded-smati rounded-lg, ati ṣafihan iwọn tuntun ti awọn kilasi, .rounded-0si .rounded-3. Wo # 31687 .
Awọn ohun elo tuntun ti a line-heightṣafikun: .lh-1, .lh-sm, .lh-baseati .lh-lg. Wo nibi .
Ti gbe ohun .d-noneelo naa sinu CSS wa lati fun ni iwuwo diẹ sii lori awọn ohun elo ifihan miiran.
Ṣe afikun .visually-hidden-focusableoluranlọwọ lati tun ṣiṣẹ lori awọn apoti, lilo :focus-within.

Awọn oluranlọwọ

Fifọ Awọn oluranlọwọ ifibọ idahun ti ni lorukọ si awọn oluranlọwọ ipin pẹlu awọn orukọ kilasi tuntun ati awọn ihuwasi ilọsiwaju, bakanna bi oniyipada CSS ti o ṣe iranlọwọ.
- Awọn kilasi ti ni lorukọ lati yipada bysi xni ipin abala. Fun apẹẹrẹ, .ratio-16by9ni bayi .ratio-16x9.
- A ti sọ silẹ .embed-responsive-itemati yiyan ẹgbẹ eroja ni ojurere ti yiyan ti o rọrun .ratio > *. Ko si kilasi diẹ sii ti a nilo, ati oluranlọwọ ipin bayi n ṣiṣẹ pẹlu eyikeyi ẹya HTML.
- Maapu $embed-responsive-aspect-ratiosSass ti ni lorukọ si $aspect-ratiosati pe awọn iye rẹ ti jẹ irọrun lati ni orukọ kilasi ati ipin ogorun bi key: valuebata.
- Awọn oniyipada CSS ti wa ni ipilẹṣẹ ati pe o wa pẹlu iye kọọkan ninu maapu Sass. Ṣatunṣe --bs-aspect-ratiooniyipada lori .ratiolati ṣẹda ipin abala aṣa eyikeyi .
Fifọ Awọn kilasi “Oluka iboju” ti wa ni bayi awọn kilasi “farasin ni wiwo” .
- Yi faili Sass pada lati scss/helpers/_screenreaders.scsssiscss/helpers/_visually-hidden.scss
- Fun lorukọmii .sr-onlyati .sr-only-focusablesi .visually-hiddenati.visually-hidden-focusable
- Fun lorukọmii sr-only()ati sr-only-focusable()dapọ si visually-hidden()ati visually-hidden-focusable().
bootstrap-utilities.cssbayi tun pẹlu awọn oluranlọwọ wa. Awọn oluranlọwọ ko nilo lati gbe wọle ni awọn kikọ aṣa mọ.

JavaScript

Igbẹkẹle jQuery silẹ ati atunkọ awọn afikun lati wa ni JavaScript deede.
FifọAwọn abuda data fun gbogbo awọn afikun JavaScript ti wa ni orukọ ni bayi lati ṣe iranlọwọ ṣe iyatọ iṣẹ ṣiṣe Bootstrap lati awọn ẹgbẹ kẹta ati koodu tirẹ. Fun apẹẹrẹ, a lo data-bs-toggledipo data-toggle.
Gbogbo awọn afikun le gba yiyan CSS kan bi ariyanjiyan akọkọ. O le kọja nkan DOM kan tabi eyikeyi yiyan CSS to wulo lati ṣẹda apẹẹrẹ tuntun ti ohun itanna:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigle ti wa ni kọja bi iṣẹ kan ti o gba Bootstrap aiyipada Popper konfigi bi ohun ariyanjiyan, ki o le dapọ yi aiyipada iṣeto ni ọna rẹ. Kan si awọn isọ silẹ, popovers, ati awọn imọran irinṣẹ.
Awọn aiyipada iye fun awọn ti fallbackPlacementswa ni yipada si ['top', 'right', 'bottom', 'left']fun dara placement ti Popper eroja. Kan si awọn isọ silẹ, popovers, ati awọn imọran irinṣẹ.
Isalẹmọ kuro lati awọn ọna aimi gbangba bi _getInstance()→ getInstance().