Ag aistriú go v5

Rianaigh agus athbhreithnigh athruithe ar bhunchomhaid Bootstrap, doiciméadú agus comhpháirteanna chun cabhrú leat aistriú ó v4 go v5.

Ar an leathanach seo

v5.2.0

Dearadh athnuachan

Tugann Bootstrap v5.2.0 nuashonrú dearadh subtle do dornán comhpháirteanna agus airíonna ar fud an tionscadail, go háirithe trí luachanna scagtha border-radiusar chnaipí agus rialuithe foirme . Nuashonraíodh ár gcáipéisíocht freisin le leathanach baile nua, leagan amach doiciméad níos simplí nach dtiteann codanna den bharra taoibh a thuilleadh, agus samplaí níos suntasaí de Bootstrap Icons .

Tuilleadh athróga CSS

Rinneamar ár gcomhpháirteanna go léir a nuashonrú chun athróga CSS a úsáid. Cé go bhfuil Sass fós mar bhonn agus mar thaca ag gach rud, nuashonraíodh gach comhpháirt chun athróga CSS a chur san áireamh sna bunranganna comhpháirte (m.sh., .btn), ag ligean do shaincheapadh níos mó fíor-ama ar Bootstrap. In eisiúintí ina dhiaidh sin, leanfaimid orainn ag leathnú ár n-úsáid d'athróga CSS isteach inár leagan amach, foirmeacha, cúntóirí agus fóntais. Léigh tuilleadh faoi athróga CSS i ngach comhpháirt ar a leathanaigh doiciméadaithe faoi seach.

Beidh ár n-úsáid athróg CSS beagán neamhiomlán go dtí Bootstrap 6. Cé gur bhreá linn iad seo a chur i bhfeidhm go hiomlán ar fud an domhain, tá an baol ann go ndéanfaidh siad athruithe briste. Mar shampla, $alert-border-width: var(--bs-border-width)briseann socrú inár gcód foinse Sass féideartha i do chód féin má bhí tú ag déanamh $alert-border-width * 2ar chúis éigin.

Mar sin, nuair is féidir, leanfaimid orainn ag brú i dtreo níos mó athróg CSS, ach le do thoil a aithint go bhféadfadh ár gcur i bhfeidhm a bheith teoranta beagán i v5.

Nua`_maps.scss`

Thug Bootstrap v5.2.0 comhad Sass nua isteach le _maps.scss. Tarraingíonn sé roinnt léarscáileanna Sass amach as _variables.scsschun saincheist a réiteach nár cuireadh nuashonruithe ar bhunléarscáil i bhfeidhm ar léarscáileanna tánaisteacha a chuireann síneadh leo. Mar shampla, $theme-colorsní raibh nuashonruithe á gcur i bhfeidhm ar léarscáileanna téama eile a rabhthas ag brath orthu $theme-colors, ag briseadh príomhshreafaí oibre saincheaptha. I mbeagán focal, tá teorainn ag Sass nuair a úsáidtear athróg nó léarscáil réamhshocraithe , ní féidir é a nuashonrú. Tá easnamh cosúil le hathróga CSS nuair a úsáidtear iad chun athróga CSS eile a chumadh.

Sin é an fáth go gcaithfidh saincheaptha athraitheacha i Bootstrap teacht ina dhiaidh sin @import "functions", ach roimhe sin @import "variables"agus an chuid eile dár stack allmhairithe. Baineann an rud céanna le léarscáileanna Sass - ní mór duit na mainneachtainí a shárú sula n-úsáidtear iad. Bogadh na léarscáileanna seo a leanas go dtí an ceann nua _maps.scss:

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

Ba cheart go mbeadh cuma mar seo ar do chuid tógála saincheaptha Bootstrap CSS anois le hiompórtáil léarscáileanna ar leith.

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

Fóntais nua

font-weightFóntais leathnaithe le cur san áireamh .fw-semiboldle haghaidh clónna leathtrom.
border-radiusFóntais leathnaithe chun dhá mhéid nua a áireamh, .rounded-4agus .rounded-5, le haghaidh tuilleadh roghanna.

Athruithe breise

Tugadh isteach $enable-container-classesrogha nua. — Anois nuair a roghnaíonn tú leagan amach turgnamhach Eangaí CSS, .container-*cuirfear ranganna le chéile fós, mura bhfuil an rogha seo socraithe go false. Coimeádann coimeádáin a luachanna gutter anois.
Tá éagsúlachtaí sofhreagracha ag an gcomhpháirt Offcanvas anois . Níl aon athrú ar an rang bunaidh .offcanvas- folaíonn sé inneachar thar gach amharcchláir. Chun é a dhéanamh freagrúil, athraigh an rang sin go .offcanvasrang ar bith .offcanvas-{sm|md|lg|xl|xxl}.
Tá roinnteoirí tábla níos tiús rogha an diúltaithe anois. — Táimid tar éis an teorainn atá níos tiús agus níos deacra a shárú idir na grúpaí boird a bhaint agus a aistriú chuig rang roghnach ar féidir leat iarratas a dhéanamh , .table-group-divider. Féach ar na doiciméid tábla le haghaidh sampla.
Tá Scrollspy athscríofa chun an Intersection Observer API a úsáid , rud a chiallaíonn nach bhfuil cumhdaigh tuismitheora coibhneasta ag teastáil uait a thuilleadh, ní féidir leis anoffsetconfig, agus níos mó. Cuardaigh le haghaidh do chuid feidhmiúcháin Scrollspy a bheith níos cruinne agus níos comhsheasmhaí ina aibhsiú nav.
Úsáideann popovers agus leideanna uirlisí athróga CSS anois. Nuashonraíodh roinnt athróg CSS óna gcomhghleacaithe Sass chun líon na n-athróg a laghdú. Mar thoradh air sin, tá trí athróg dímheasta sa scaoileadh seo: $popover-arrow-color, $popover-arrow-outer-color, agus $tooltip-arrow-color.
Cuireadh .text-bg-{color}cúntóirí nua leis. In ionad fóntais aonair .text-*agus .bg-*fóntais a shocrú, is féidir leat na .text-bg-*cúntóirí a úsáid anois chun background-colortulra codarsnachta a shocrú color.
Mionathraitheoir curtha .form-check-reverseleis chun ord na lipéad agus na ticbhoscaí/raidiónna gaolmhara a smeach.
Tacaíocht colúin stiallacha curtha le táblaí tríd an .table-striped-columnsrang nua.

Le haghaidh liosta iomlán athruithe, féach ar an tionscadal v5.2.0 ar GitHub .

v5.1.0

Tacaíocht thurgnamhach breise do leagan amach Eangaí CSS . — Is obair idir lámha é seo, agus níl sé réidh fós le húsáid táirgeachta, ach is féidir leat rogha a dhéanamh den ghné nua trí Sass. Chun é a chumasú, díchumasaigh an eangach réamhshocraithe, tríd $enable-grid-classes: falsean Eangach CSS a shocrú agus a chumasú trí $enable-cssgrid: true.
Barraí nascleanúna nuashonraithe chun tacú le offcanvas. — Cuir tarraiceáin an chanbhás leis in aon bharra nascleanúna leis na .navbar-expand-*ranganna sofhreagracha agus roinnt marcáil lasmuigh den chanbhás.
Cuireadh comhpháirt ionadsealbhóra nua leis . — An chomhpháirt is nuaí atá againn, bealach chun bloic shealadacha a chur ar fáil in ionad ábhar fíor chun cabhrú le léiriú go bhfuil rud éigin fós á luchtú i do shuíomh nó aip.
Tacaíonn an breiseán Collapse le titim chothrománach anois . — Cuir .collapse-horizontalle do .collapsechun an titim widthin ionad an height. Seachain athphéinteáil brabhsálaí trí min-heightnó height.
Cuireadh stack nua agus cúntóirí rialacha ingearacha leis. — Cuir airíonna flexbox iolracha i bhfeidhm go tapa chun leagan amach saincheaptha a chruthú go tapa le stoic . Roghnaigh ó chruacha cothrománacha ( .hstack) agus ingearach ( .vstack). Cuir roinnteoirí ingearacha cosúil le <hr>heilimintí leis na cúntóirí nua.vr .
:rootCuireadh athróga CSS domhanda nua leis . — Cuireadh roinnt athróg CSS nua leis an leibhéal chun stíleanna a :rootrialú . <body>Tá níos mó fós le déanamh, lena n-áirítear ar fud ár bhfóntas agus ár gcomhpháirteanna, ach faoi láthair léigh athróga CSS sa rannóg Saincheap .
Athchóiríodh fóntais datha agus chúlra chun athróga CSS a úsáid, agus cuireadh fóntais nua teimhneachta téacs agus teimhneachta cúlra leis . — .text-* agus .bg-*tógtar fóntais anois le hathróga CSS agus rgba()luachanna datha, rud a ligeann duit aon áirgiúlacht a shaincheapadh go héasca le fóntais nua teimhneachta.
Cuireadh samplaí nua leis atá bunaithe chun a thaispeáint conas ár gcomhpháirteanna a shaincheapadh. — Bain réidh le húsáid comhpháirteanna saincheaptha agus patrúin dearaidh coitianta eile lenár samplaí Blúire nua . Áirítear buntásca , anuas , grúpaí liostaí , agus módúil .
Baintear stíleanna suite neamhúsáidte ó popovers agus leideanna uirlisí mar is é Popper amháin a láimhseálann iad seo. $tooltip-margincurtha i léig agus socraithe dó nullsa phróiseas.

Ag iarraidh tuilleadh eolais? Léigh an blog post v5.1.0.

Hey ann! Tá athruithe ar ár gcéad eisiúint mhór de Bootstrap 5, v5.0.0, doiciméadaithe thíos. Ní léiríonn siad na hathruithe breise a thaispeántar thuas.

Spleáchais

Thit jQuery.
Uasghrádaithe ó Popper v1.x go Popper v2.x.
Cuireadh Dart Sass in ionad Libsass mar bhí ár dtiomsaitheoir Sass i bhfianaise Libsass i léig.
Aistrigh ó Jekyll go Hugo chun ár gcáipéisíocht a thógáil

Tacaíocht bhrabhsálaí

Internet Explorer 10 agus 11 a ísliú
Microsoft Edge tite < 16 (Legacy Edge)
Thit Firefox <60
Safari tite < 12
iOS Safari tite < 12
Chrome tite <60

Athruithe ar dhoiciméadú

Athdhearadh leathanach baile, leagan amach docs, agus buntásc.
Treoir nua beartán curtha leis .
Cuireadh rannán nua Saincheap leis, ag cur sonraí nua ar Sass, roghanna cumraíochta domhanda, scéimeanna datha, athróga CSS, agus go leor eile in ionad leathanach Téamaí v4 .
Doiciméadú na foirme go léir a atheagrú ina rannán Foirmeacha nua , ag scaradh an ábhair ina leathanaigh níos dírithe.
Mar an gcéanna, nuashonraíodh an rannán Leagan Amach , chun ábhar greille a fheabhsú ar bhealach níos soiléire.
Athainmníodh leathanach comhpháirte “Navs” go “Navs & Tabs”.
Athainmníodh an leathanach “Seiceálacha” go “Seiceálacha & raidiónna”.
Athdhearadh an barra nascleanúna agus cuireadh fo-nav nua leis chun é a dhéanamh níos éasca dul timpeall ar ár suíomhanna agus ar ár leaganacha doiciméad.
Cuireadh aicearra méarchláir nua leis don réimse cuardaigh: Ctrl + /.

Sass

Táimid tar éis an cumasc réamhshocraithe léarscáil Sass a dhíchóimeáil chun é a dhéanamh níos éasca luachanna iomarcacha a bhaint. Coinnigh i gcuimhne anois go gcaithfidh tú gach luach a shainiú sna léarscáileanna Sass mar $theme-colors. Seiceáil conas déileáil le léarscáileanna Sass .
BriseadhFeidhm athainmnithe color-yiq()agus athróga gaolmhara color-contrast()mar níl baint aige le spás datha YIQ a thuilleadh. Féach #30168.
- $yiq-contrasted-thresholdathainmnítear go $min-contrast-ratio.
- $yiq-text-darkagus $yiq-text-lightathainmnítear iad go dtí $color-contrast-darkagus $color-contrast-light.
BriseadhTá paraiméadair mheascáin cheist na meán athraithe le haghaidh cur chuige níos loighciúil.
- media-breakpoint-down()úsáideann an brisphointe féin in ionad an brisphointe eile (m.sh., media-breakpoint-down(lg)in ionad na n- media-breakpoint-down(md)amharcphointí spriocanna níos lú ná lg).
- Mar an gcéanna, úsáideann an dara paraiméadar i media-breakpoint-between()freisin an brisphointe féin in ionad an brisphointe eile (m.sh., media-between(sm, lg)in ionad na media-breakpoint-between(sm, md)spriocanna amhairc idir smagus lg).
BriseadhBaineadh stíleanna priontála agus $enable-print-stylesathróg. Tá ranganna taispeántais priontála fós thart. Féach #28339 .
BriseadhTite color(), theme-color(), agus gray()feidhmeanna i bhfabhar athróg. Féach #29083 .
Briseadhtheme-color-level()Feidhm athainmnithe go dtí color-level()agus anois glacann sé le haon dath atá uait in ionad $theme-colordathanna amháin. Féach #29083 Bí ag faire amach: color-level() thit sé isteach níos déanaí v5.0.0-alpha3.
BriseadhAthainmnithe $enable-prefers-reduced-motion-media-queryagus $enable-pointer-cursor-for-buttonsgo dtí $enable-reduced-motionagus $enable-button-pointerschun go hachomair.
BriseadhBaineadh an bg-gradient-variant()mixin. Úsáid an .bg-gradientrang chun grádáin a chur le heilimintí seachas na .bg-gradient-*ranganna ginte.
Briseadh Baineadh meascáin dímheasta roimhe seo:
- hover, hover-focus, plain-hover-focus, agushover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()( thit freisin an aicme fóntais ghaolmhara , .text-hide)
- visibility()
- form-control-focus()
Briseadhscale-color()Feidhm athainmnithe shift-color()chun imbhualadh le feidhm scálaithe dath Sass féin a sheachaint.
box-shadowCeadaíonn meascáin anois nullluachanna agus titim noneó argóintí iolracha. Féach #30394 .
Tá border-radius()luach réamhshocraithe ag an mixin anois.

Córas datha

An córas dathanna a d'oibrigh leis color-level()agus $theme-color-intervala baineadh i bhfabhar córas nua dathanna. Cuirtear lighten()agus . _ _ Meascfaidh na feidhmeanna seo an dath le bán nó dubh in ionad a gile a athrú de mhéid seasta. Tintfidh nó scáthóidh sé dath ag brath ar cibé an bhfuil a pharaiméadar meáchain dearfach nó diúltach. Féach #30622 le haghaidh tuilleadh sonraí.darken()tint-color()shade-color()shift-color()
Cuireadh tint agus dathanna nua leis do gach dath, ag soláthar naoi ndath ar leith do gach bundath, mar athróga nua Sass.
Codarsnacht dathanna feabhsaithe. Bumpáil cóimheas codarsnachta dathanna ó 3:1 go 4.5:1 agus dathanna gorm, glasa, cian agus bándearg nuashonraithe chun codarsnacht WCAG 2.1 AA a chinntiú. Chomh maith leis sin d'athraigh ár dath codarsnachta dath ó $gray-900go $black.
Chun tacú lenár gcóras datha, chuireamar saincheaptha tint-color()agus shade-color()feidhmeanna nua leis chun ár ndathanna a mheascadh go cuí.

Nuashonruithe greille

Brisphointe nua! xxlBrisphointe nua curtha leis 1400pxagus suas. Gan aon athrú ar gach brisphointe eile.
Gutters feabhsaithe. Tá gáitéir socraithe anois i rems, agus tá siad níos cúinge ná v4 ( 1.5rem, nó thart ar 24px, síos ó 30px). Déanann sé seo gáitéir ár gcóras eangaí a ailíniú lenár bhfóntais spáis.
- Cuireadh aicme nua gáitéir ( .g-*, .gx-*, agus .gy-*) leis chun gáitéir chothrománacha/ingearach, gáitéir chothrománacha agus gáitéir ingearacha a rialú.
- BriseadhAthainmnithe .no-guttersgo dtí .g-0chun fóntais nua gáitéir a mheaitseáil.
Níl feidhm ag colúin a thuilleadh position: relative, mar sin b'fhéidir go mbeidh ort cur .position-relativele roinnt gnéithe chun an t-iompar sin a chur ar ais.
BriseadhThit roinnt .order-*ranganna nach raibh in úsáid go minic. .order-1Ní chuirimid ar fáil anois ach amháin .order-5as an mbosca.
BriseadhThit an .mediachomhpháirt mar is féidir é a mhacasamhlú go héasca le fóntais. Féach #28265 agus an leathanach flex utilities le haghaidh sampla .
Briseadh bootstrap-grid.cssanois ní bhaineann sé ach box-sizing: border-boxleis an gcolún seachas an méid bosca domhanda a athshocrú. Ar an mbealach seo, is féidir ár stíleanna greille a úsáid i níos mó áiteanna gan cur isteach.
$enable-grid-classesní dhíchumasaíonn sé giniúint ranganna coimeádán a thuilleadh. Féach #29146.
Nuashonraíodh an make-colmeascthóir go réamhshocrú go colúin chothroma gan méid sonraithe.

Ábhar, Atosaigh, etc

Tá RFS cumasaithe anois de réir réamhshocraithe. Déanfaidh ceannteidil a úsáideann anfont-size()mixin a n-athrú go huathoibríoch defont-sizeréir scála leis an gcalafort amharc. Bhí an ghné seo rogha an diúltaithe roimhe seo le v4.
BriseadhRinneadh athchóiriú ar ár gclóghrafaíocht taispeána chun ár n-athróga a chur in ionad ár n- $display-*athróg agus le $display-font-sizesléarscáil Sass. Baineadh na $display-*-weighthathróga indibhidiúla freisin le haghaidh s amháin $display-font-weightagus coigeartaíodh font-sizes.
Cuireadh dhá .display-*mhéid ceannteidil nua leis, .display-5agus .display-6.
Leagtar béim ar naisc de réir réamhshocraithe (ní hamháin ar ainlíon), ach amháin más cuid de chomhpháirteanna sonracha iad.
Athdhearadh táblaí chun a stíleanna a athnuachan agus iad a atógáil le hathróga CSS chun smacht níos fearr a fháil ar stíliú.
BriseadhNí fhaigheann táblaí neadaithe stíleanna a thuilleadh.
Briseadh .thead-lightagus .thead-darkfágtar iad i bhfabhar na n .table-*-aicmí athraitheacha is féidir a úsáid do na heilimintí boird go léir ( thead, tbody, tfoot, , tr, thagus td).
BriseadhAthainmnítear an table-row-variant()mixin table-variant()agus ní ghlacann sé ach le 2 pharaiméadar: $color(ainm datha) agus $value(cód datha). Ríomhtar na dathanna teorann agus dathanna accent go huathoibríoch bunaithe ar na hathróga fachtóir tábla.
Scoilt athróga stuála cille boird isteach -yagus -x.
BriseadhRang tite .pre-scrollable. Féach #29135
Briseadh .text-*ní chuireann fóntais stáit ainlithe agus fócais le naisc a thuilleadh. .link-*is féidir ranganna cúntóir a úsáid ina ionad. Féach #29267
BriseadhRang tite .text-justify. Féach #29793
Briseadh <hr>Úsáideann gnéithe anois heightseachas borderchun tacú níos fearr leis an sizetréith. Ligeann sé seo freisin úsáid a bhaint as fóntais stuála chun roinnteoirí níos tiús a chruthú (m.sh., <hr class="py-1">).
Athshocraigh cothrománach réamhshocraithe padding-leftar aghaidh <ul>agus <ol>eilimintí ó réamhshocrú an bhrabhsálaí 40pxgo 2rem.
Curtha leis $enable-smooth-scroll, a bhaineann scroll-behavior: smoothgo domhanda - ach amháin i gcás úsáideoirí a iarrann tairiscint laghdaithe trí prefers-reduced-motioncheist ó na meáin. Féach #31877

RTL

Athraíodh athróga sonracha treo cothrománach, fóntais agus meascáin go léir chun úsáid a bhaint as airíonna loighciúla cosúil leis na cinn a fhaightear i leagan amach flexbox - m.sh., startagus endin ionad leftagus right.

Foirmeacha

Cuireadh foirmeacha nua ar snámh leis! Táimid tar éis an sampla Lipéid Snámh a chur chun cinn mar chomhpháirteanna foirm a bhfuil tacaíocht iomlán acu. Féach ar an leathanach nua Lipéid Snámh.
Briseadh Eilimintí foirm dhúchais agus saincheaptha comhdhlúite. Comhdhlúthaíodh ticbhoscaí, raidiónna, roghanna agus ionchuir eile a raibh ranganna dúchais agus saincheaptha acu i v4. Anois tá ár n-eilimintí foirm beagnach go léir go hiomlán saincheaptha, an chuid is mó gan gá le HTML saincheaptha.
- .custom-control.custom-checkboxanois .form-check.
- .custom-control.custom-custom-radioanois .form-check.
- .custom-control.custom-switchanois .form-check.form-switch.
- .custom-selectanois .form-select.
- .custom-fileagus .form-filecurtha in ionad stíleanna saincheaptha ar bharr .form-control.
- .custom-rangeanois .form-range.
- Thit dúchais .form-control-fileagus .form-control-range.
BriseadhThit .input-group-appendagus .input-group-prepend. Is féidir leat anois cnaipí a chur leis agus .input-group-textmar pháistí díreacha de na grúpaí ionchuir.
Socraítear ar deireadh an ga teorann atá ar Iarraidh le fada ar ghrúpa ionchuir le fabht aiseolais bailíochtaithe trí .has-validationrang breise a chur le grúpaí ionchuir le bailíochtú.
Briseadh Ranganna leagan amach a bhaineann go sonrach leis an bhfoirm laghdaithe dár gcóras eangaí. Bain úsáid as ár ngreille agus ár bhfóntais in ionad .form-group, .form-row, nó .form-inline.
BriseadhTeastaíonn lipéid fhoirm anois .form-label.
Briseadh .form-textNí leagann sé seo a thuilleadh display, rud a ligeann duit téacs cabhrach inlíne a chruthú nó a bhlocáil mar is mian leat ach an eilimint HTML a athrú.
Ní úsáidtear rialtáin fhoirm a thuilleadh heightnuair is féidir, ach ina ionad sin déantar iad a iarchur chun min-heightoiriúnú agus comhoiriúnacht le comhpháirteanna eile a fheabhsú.
Ní chuirtear deilbhíní bailíochtaithe i bhfeidhm ar <select>s le multiple.
Foinse atheagraithe comhaid Sass faoi scss/forms/, lena n-áirítear stíleanna grúpa ionchuir.

Comhpháirteanna

Luachanna aontaithe paddingmaidir le foláirimh, blúiríní aráin, cártaí, anuas, grúpaí liosta, módúil, popovers, agus leideanna uirlisí a bheith bunaithe ar ár n- $spacerathróg. Féach #30564 .

Bosca ceoil

Cuireadh comhpháirt bosca ceoil nua leis .

Foláirimh

Tá samplaí le deilbhíní anois ar fholáirimh .
Baineadh stíleanna saincheaptha do <hr>s i ngach foláireamh ó úsáideann siad cheana féin currentColor.

Suaitheantais

BriseadhThit gach .badge-*rang dathanna le haghaidh fóntais chúlra (m.sh., úsáid .bg-primaryin ionad .badge-primary).
BriseadhThit — bain .badge-pillúsáid as an .rounded-pilláirgiúlacht ina ionad.
BriseadhBainte ainlithe agus stíleanna fócais le haghaidh <a>agus <button>eilimintí.
stuáil réamhshocraithe méadaithe do shuaitheantais ó .25em/ .5emgo .35em/ .65em.

Brioscáin aráin

Simplíodh cuma réamhshocraithe na mbróga aráin trí bhaint padding, background-color, agus border-radius.
Cuireadh maoin shaincheaptha CSS nua leis --bs-breadcrumb-dividerle haghaidh saincheaptha éasca gan gá le CSS a ath-thiomsú.

Cnaipí

Briseadh Scoránaigh cnaipí , le ticbhoscaí nó raidiónna, ní gá JavaScript a thuilleadh agus tá marcáil nua. Ní theastaíonn eilimint timfhilleadh uainn a thuilleadh, cuir.btn-checkleis an<input>, agus péireáil é le haon.btnranganna ar an<label>. Féach #30650 . Tá na doiciméid chuige seo aistrithe ónár leathanach Cnaipí go dtí an rannán Foirmeacha nua.
Briseadh Thit .btn-blockle haghaidh fóntais. In ionad úsáid a bhaint as .btn-blockar an .btn, wrap do cnaipí le .d-gridagus .gap-*fóntais a spásáil iad mar is gá. Téigh chuig ranganna freagrúla le níos mó smachta fós orthu. Léigh na doiciméid le haghaidh roinnt samplaí.
Nuashonraíodh ár button-variant()agus button-outline-variant()mixins chun tacú le paraiméadair bhreise.
Cnaipí nuashonraithe chun codarsnacht mhéadaithe ar ainlíon agus stáit ghníomhacha a chinntiú.
Tá cnaipí díchumasaithe anois pointer-events: none;.

Cárta

BriseadhThit .card-decki bhfabhar ár eangach. Wrap do cártaí i ranganna colún agus cuir .row-cols-*coimeádán tuismitheora a athchruthú deiceanna cártaí (ach le níos mó smachta ar ailíniú sofhreagrach).
BriseadhThit .card-columnsi bhfabhar na saoirseachta. Féach #28922 .
BriseadhCuireadh comhpháirt bosca ceoil nua in ionad an .cardbhosca bhunaithe .

Timpealláin

Cuireadh .carousel-darkmalairt nua leis le haghaidh téacs dorcha, rialuithe agus táscairí (ar fheabhas do chúlraí níos éadroime).
Deilbhíní chevron do rialuithe timpealláin curtha in ionad le SVGanna nua ó Bootstrap Icons .

Dún an cnaipe

BriseadhAthainmníodh é .closele .btn-closehaghaidh ainm nach bhfuil chomh cineálach.
Úsáideann cnaipí dúnta anois background-imageSVG (leabaithe) seachas ×san HTML, rud a ligeann do shaincheapadh níos éasca gan teagmháil a dhéanamh le do mharcáil.
Cuireadh .btn-close-whiteleagan nua leis a úsáideann filter: invert(1)chun deilbhíní codarsnachta níos airde a dhíbhe i gcoinne chúlraí níos dorcha.

Laghdaigh

Baineadh ancaireacht scrollbharra le haghaidh bosca ceoil.

Droim anuas

Athróg nua .dropdown-menu-darkagus athróga gaolmhara curtha leis le haghaidh anuas dorcha ar éileamh.
Cuireadh athróg nua leis le haghaidh $dropdown-padding-x.
Dorchaigh an roinnteoir anuas le haghaidh codarsnachta feabhsaithe.
BriseadhTá na himeachtaí go léir don anuas spreagtha anois ar an gcnaipe scoránaigh anuas agus ansin bubbled suas go dtí an eilimint tuismitheora.
Tá aitreabúidí ag roghchláir anuas anois data-bs-popper="static"nuair a bhíonn suíomh an anuas statach, nó nuair a bhíonn anuas sa bharra nascleanúna. Cuireann ár JavaScript é seo leis agus cabhraíonn sé linn stíleanna suímh saincheaptha a úsáid gan cur isteach ar shuíomh Popper.
BriseadhRogha tite fliple haghaidh breiseán anuas i bhfabhar cumraíocht Popper dúchais. Is féidir leat an t-iompar smeach a dhíchumasú anois trí eagar folamh a rith le haghaidh fallbackPlacementsrogha i modhnóir smeach .
Is féidir cliceáil ar roghchláir anuas anois le rogha nua chun an t -iompar dúnta uathoibríochautoClose a láimhseáil . Is féidir leat an rogha seo a úsáid chun glacadh leis an cliceáil laistigh nó lasmuigh den roghchlár anuas chun é a dhéanamh idirghníomhach.
Tacaíonn dropdowns anois le .dropdown-items fillte i <li>s.

Jumbotron

BriseadhThit an comhpháirt jumbotron mar is féidir é a mhacasamhlú le fóntais. Féach ar ár sampla nua Jumbotron le haghaidh taispeána.

Liosta grúpa

Cuireadh .list-group-numberedmodhnóir nua leis chun grúpaí a liostú.

Nascleanúint agus cluaisíní

Cuireadh nullathróga nua leis do font-size, font-weight, color, agus :hover colordon .nav-linkrang.

Navbarraí

BriseadhTeastaíonn coimeádán laistigh de na barraí nascleanúna anois (chun riachtanais spáis a shimpliú go mór agus an CSS riachtanach).
BriseadhNí féidir an .activerang a chur i bhfeidhm ar s a thuilleadh .nav-item, ní mór é a chur i bhfeidhm go díreach ar .nav-links.

Lasmuigh den chanbhás

Cuireadh an chomhpháirt nua offcanvas leis .

Leathanaigh

Tá naisc uimhriúcháin insaincheaptha anois margin-lefta dhéantar a shlánú go dinimiciúil ar gach cúinne nuair a bhíonn siad scartha óna chéile.
Cuireadh transitions le naisc leathanach.

Popovers

BriseadhAthainmníodh é seo .arrowinár .popover-arrowdteimpléad preabfhuinneog réamhshocraithe.
whiteListRogha athainmnithe go allowList.

Spinners

Tugann spinners onóir anois prefers-reduced-motion: reducetrí bheochan a mhoilliú. Féach #31882 .
Ailíniú ingearach spinner feabhsaithe.

Tósta

Is féidir toasts a shuíomh anois in a .toast-containerle cabhair ó fhóntais a shuíomh .
Athraíodh fad réamhshocraithe an tósta go 5 soicind.
Baintear na tóstaí overflow: hiddenagus cuirtear cearta border-radiusina n-ionad le calc()feidhmeanna.

Leideanna uirlisí

BriseadhAthainmníodh é seo .arrowinár .tooltip-arrowdteimpléad leid uirlisí réamhshocraithe.
BriseadhAthraítear luach réamhshocraithe an fallbackPlacementsgo dtí ['top', 'right', 'bottom', 'left']le haghaidh socrúchán níos fearr d'eilimintí popper.
BriseadhwhiteListRogha athainmnithe go allowList.

Fóntais

BriseadhAthainmníodh roinnt fóntais chun ainmneacha réadmhaoine loighciúla a úsáid in ionad ainmneacha treo agus cuireadh tacaíocht RTL leis:
- Athainmnithe .left-*agus .right-*chuig .start-*agus .end-*.
- Athainmnithe .float-leftagus .float-rightchuig .float-startagus .float-end.
- Athainmnithe .border-leftagus .border-rightchuig .border-startagus .border-end.
- Athainmnithe .rounded-leftagus .rounded-rightchuig .rounded-startagus .rounded-end.
- Athainmnithe .ml-*agus .mr-*chuig .ms-*agus .me-*.
- Athainmnithe .pl-*agus .pr-*chuig .ps-*agus .pe-*.
- Athainmnithe .text-leftagus .text-rightchuig .text-startagus .text-end.
BriseadhCorrlaigh diúltacha díchumasaithe de réir réamhshocraithe.
Cuireadh .bg-bodyrang nua leis chun an <body>cúlra a shocrú go tapa d'eilimintí breise.
Áiseanna suímh nua curtha leis le haghaidh top, right, bottom, agus left. Áirítear ar luachanna 0, 50%, agus 100%do gach maoin.
Curtha nua .translate-middle-x& .translate-middle-yfóntais leis na heilimintí absalóideacha/suíomh seasta a lárú go cothrománach nó go hingearach.
Cuireadh border-widthfóntais nua leis .
BriseadhAthainmnithe .text-monospacego .font-monospace.
BriseadhBainte .text-hideas mar is modh seanchaite é chun téacs a chur i bhfolach nár cheart a úsáid a thuilleadh.
Fóntais bhreise .fs-*le haghaidh font-sizefóntais (le RFS cumasaithe). Úsáideann siad seo an scála céanna le ceannteidil réamhshocraithe HTML (1-6, beag go mór), agus is féidir iad a mhodhnú trí léarscáil Sass.
Briseadh.font-weight-*Fóntais athainmnithe mar go bhfuil .fw-*siad gonta agus comhsheasmhach.
Briseadh.font-style-*Fóntais athainmnithe mar go bhfuil .fst-*siad gonta agus comhsheasmhach.
Curtha .d-gridleis chun fóntais agus fóntais nua a thaispeáint gap( .gap) le haghaidh leagan amach Eangaí CSS agus flexbox.
BriseadhBainte .rounded-smagus rounded-lg, agus tugadh isteach scála nua ranganna, .rounded-0go .rounded-3. Féach #31687 .
line-heightFóntais nua curtha leis : .lh-1, .lh-sm, .lh-baseagus .lh-lg. Féach anseo .
Ar athraíodh a ionad an .d-noneáirgiúlacht inár CSS chun níos mó meáchain a thabhairt dó thar fóntais taispeána eile.
Leathnaigh an .visually-hidden-focusablecúntóir chun oibriú freisin ar choimeádáin, ag baint úsáide as :focus-within.

Cúntóirí

Briseadh Athainmníodh cúntóirí leabaithe sofhreagracha go cúntóirí cóimheasa le hainmneacha ranga nua agus iompraíochtaí feabhsaithe, chomh maith le hathróg cabhrach CSS.
- Athainmníodh na ranganna le hathrú bygo dtí xan cóimheas gné. Mar shampla , .ratio-16by9anois .ratio-16x9.
- Táimid tar éis an .embed-responsive-itemroghnóir grúpa eiliminte agus eiliminte a scaoileadh i bhfabhar .ratio > *roghnóir níos simplí. Níl gá le níos mó aicme, agus oibríonn an cúntóir cóimheasa anois le haon eilimint HTML.
- Athainmníodh an $embed-responsive-aspect-ratiosléarscáil Sass $aspect-ratiosagus tá a luachanna simplithe chun ainm an ranga agus an céatadán a chur san áireamh mar key: valuephéire.
- Gintear athróga CSS anois agus cuirtear san áireamh iad do gach luach ar léarscáil Sass. Athraigh an --bs-aspect-ratioathróg ar an .ratiochun aon chóimheas gné saincheaptha a chruthú .
Briseadh Ranganna “léitheoireachta scáileáin” is ea ranganna “léitheoireachta ó thaobh amhairc” anois .
- D'athraigh an comhad Sass ó scss/helpers/_screenreaders.scssgoscss/helpers/_visually-hidden.scss
- Athainmnithe .sr-onlyagus .sr-only-focusablechuig .visually-hiddenagus.visually-hidden-focusable
- Athainmnithe sr-only()agus sr-only-focusable()meascáin go visually-hidden()agus visually-hidden-focusable().
bootstrap-utilities.cssfolaíonn sé ár gcuid cúntóirí anois freisin. Ní gá cúntóirí a allmhairiú i dtithe saincheaptha a thuilleadh.

JavaScript

Laghdaigh spleáchas jQuery agus athscríobh forlíontáin le bheith i JavaScript rialta.
BriseadhTá spásanna ag tréithe sonraí do gach breiseán JavaScript anois chun cabhrú le feidhmiúlacht Bootstrap a idirdhealú ó thríú páirtithe agus ó do chód féin. Mar shampla, úsáidimid data-bs-togglein ionad data-toggle.
Is féidir le gach breiseán glacadh le roghnóir CSS mar an chéad argóint. Is féidir leat eilimint DOM nó roghnóir CSS bailí a chur ar aghaidh chun sampla nua den bhreiseán a chruthú:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigIs féidir é a rith mar fheidhm a ghlacann le cumraíocht réamhshocraithe Popper Bootstrap mar argóint, ionas gur féidir leat an chumraíocht réamhshocraithe seo a chumasc ar do bhealach. Baineann sé seo le dropdowns, popovers, agus leideanna uirlisí.
Athraítear an luach réamhshocraithe fallbackPlacementsle ['top', 'right', 'bottom', 'left']haghaidh socrúcháin níos fearr d'eilimintí Popper. Baineann sé seo le dropdowns, popovers, agus leideanna uirlisí.
Baineadh béim ó mhodhanna statacha poiblí mar _getInstance()→ getInstance().