Yn mudo i v5

Olrhain ac adolygu newidiadau i ffeiliau ffynhonnell Bootstrap, dogfennaeth, a chydrannau i'ch helpu i fudo o v4 i v5.

Ar y dudalen hon

v5.2.0

Dyluniad wedi'i adnewyddu

Mae Bootstrap v5.2.0 yn cynnwys diweddariad dylunio cynnil ar gyfer llond llaw o gydrannau ac eiddo ar draws y prosiect, yn fwyaf nodedig trwy border-radiuswerthoedd mireinio ar fotymau a rheolyddion ffurf . Mae ein dogfennaeth hefyd wedi'i diweddaru gyda hafan newydd, cynllun dogfennau symlach nad yw bellach yn cwympo rhannau o'r bar ochr, ac enghreifftiau mwy amlwg o Bootstrap Icons .

Mwy o newidynnau CSS

Rydym wedi diweddaru ein holl gydrannau i ddefnyddio newidynnau CSS. Er bod Sass yn dal i fod yn sail i bopeth, mae pob cydran wedi'i diweddaru i gynnwys newidynnau CSS ar y dosbarthiadau sylfaen cydrannau (ee, .btn), gan ganiatáu ar gyfer addasu Bootstrap yn fwy amser real. Mewn datganiadau dilynol, byddwn yn parhau i ehangu ein defnydd o newidynnau CSS i'n cynllun, ffurflenni, cynorthwywyr a chyfleustodau. Darllenwch fwy am newidynnau CSS ym mhob cydran ar eu tudalennau dogfennaeth priodol.

Bydd ein defnydd newidyn CSS braidd yn anghyflawn tan Bootstrap 6. Er y byddem wrth ein bodd yn gweithredu'r rhain yn llawn yn gyffredinol, maent mewn perygl o achosi newidiadau torri. Er enghraifft, mae gosod $alert-border-width: var(--bs-border-width)yn ein cod ffynhonnell yn torri Sass potensial yn eich cod eich hun os oeddech chi'n gwneud $alert-border-width * 2am ryw reswm.

Fel y cyfryw, lle bynnag y bo modd, byddwn yn parhau i wthio tuag at fwy o newidynnau CSS, ond cydnabyddwch y gallai ein gweithrediad fod ychydig yn gyfyngedig yn v5.

Newydd`_maps.scss`

Cyflwynodd Bootstrap v5.2.0 ffeil Sass newydd gyda _maps.scss. Mae'n tynnu allan nifer o fapiau Sass _variables.scssi ddatrys mater lle na chafodd diweddariadau i fap gwreiddiol eu cymhwyso i fapiau eilaidd sy'n eu hymestyn. Er enghraifft, nid oedd diweddariadau i $theme-colorsyn cael eu cymhwyso i fapiau thema eraill a oedd yn dibynnu ar $theme-colors, gan dorri llifoedd gwaith addasu allweddol. Yn fyr, mae gan Sass gyfyngiad lle, unwaith y bydd newidyn diofyn neu fap wedi'i ddefnyddio , ni ellir ei ddiweddaru. Mae yna ddiffyg tebyg gyda newidynnau CSS pan gânt eu defnyddio i gyfansoddi newidynnau CSS eraill.

Dyma pam mae'n rhaid i addasiadau amrywiol yn Bootstrap ddod ar ôl @import "functions", ond cyn hynny @import "variables"a gweddill ein pentwr mewnforio. Mae'r un peth yn wir am fapiau Sass - rhaid i chi ddiystyru'r rhagosodiadau cyn iddynt gael eu defnyddio. Mae'r mapiau canlynol wedi'u symud i'r newydd _maps.scss:

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

Dylai eich adeiladwaith Bootstrap CSS personol edrych yn debyg i hyn gyda mewngludiad mapiau ar wahân.

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

Cyfleustodau newydd

Cyfleustodau font-weightestynedig i'w cynnwys .fw-semiboldar gyfer ffontiau lled-feiddgar.
border-radiusCyfleustodau estynedig i gynnwys dau faint newydd, .rounded-4a .rounded-5, ar gyfer mwy o opsiynau.

Newidiadau ychwanegol

Wedi cyflwyno $enable-container-classesopsiwn newydd. — Nawr wrth optio i mewn i gynllun Grid CSS arbrofol, .container-*bydd dosbarthiadau'n dal i gael eu llunio, oni bai bod yr opsiwn hwn wedi'i osod i false. Mae cynwysyddion hefyd bellach yn cadw eu gwerthoedd gwter.
Bellach mae gan y gydran Offcanvas amrywiadau ymatebol . Nid yw'r dosbarth gwreiddiol wedi .offcanvasnewid - mae'n cuddio cynnwys ar draws pob porth gwylio. I'w wneud yn ymatebol, newidiwch y .offcanvasdosbarth hwnnw i unrhyw .offcanvas-{sm|md|lg|xl|xxl}ddosbarth.
Mae rhanwyr tabl mwy trwchus bellach yn optio i mewn. — Rydym wedi cael gwared ar y ffin fwy trwchus ac anos ei diystyru rhwng grwpiau bwrdd a'i symud i ddosbarth dewisol y gallwch wneud cais amdano, .table-group-divider. Gweler y dogfennau tabl am enghraifft.
Mae Scrollspy wedi'i ailysgrifennu i ddefnyddio'r Intersection Observer API , sy'n golygu nad oes angen deunydd lapio rhiant cymharol arnoch mwyach, yn anghymeradwyooffsetconfig, a mwy. Chwiliwch am eich gweithrediadau Scrollspy i fod yn fwy cywir a chyson yn eu hamlygu nav.
Mae popovers a chynghorion offer bellach yn defnyddio newidynnau CSS. Mae rhai newidynnau CSS wedi'u diweddaru gan eu cymheiriaid Sass i leihau nifer y newidynnau. O ganlyniad, mae tri newidyn wedi'u dibrisio yn y datganiad hwn: $popover-arrow-color, $popover-arrow-outer-color, a $tooltip-arrow-color.
Ychwanegwyd .text-bg-{color}cynorthwywyr newydd. Yn lle gosod offer unigol .text-*a .bg-*chyfleustodau, gallwch nawr ddefnyddio'r cynorthwywyr i.text-bg-* osod background-colorblaendir cyferbyniol color.
Ychwanegwyd .form-check-reverseaddasydd i fflipio trefn y labeli a'r blychau ticio/radios cysylltiedig.
Ychwanegwyd cefnogaeth colofnau streipiog at dablau trwy'r .table-striped-columnsdosbarth newydd.

Am restr gyflawn o newidiadau, gweler y prosiect v5.2.0 ar GitHub .

v5.1.0

Ychwanegwyd cefnogaeth arbrofol ar gyfer gosodiad Grid CSS . - Mae hwn yn waith ar y gweill, ac nid yw eto'n barod i'w ddefnyddio wrth gynhyrchu, ond gallwch chi optio i mewn i'r nodwedd newydd trwy Sass. Er mwyn ei alluogi, analluoga'r grid rhagosodedig, trwy osod $enable-grid-classes: falsea galluogi'r Grid CSS trwy osod $enable-cssgrid: true.
Bariau llywio wedi'u diweddaru i gefnogi offcanvas. — Ychwanegu droriau cynfas mewn unrhyw far llywio gyda'r .navbar-expand-*dosbarthiadau ymatebol a rhywfaint o farcio oddi ar y cynfas.
Ychwanegwyd cydran dalfan newydd . — Ein cydran fwyaf newydd, ffordd o ddarparu blociau dros dro yn lle cynnwys go iawn i helpu i nodi bod rhywbeth yn dal i lwytho yn eich gwefan neu ap.
Mae ategyn Collapse bellach yn cefnogi cwympo llorweddol . — Ychwanegu .collapse-horizontalat eich .collapsei gwympo'r yn widthlle'r height. Osgowch ail-baentio porwr trwy osod min-heightneu height.
Ychwanegwyd stac newydd a chynorthwywyr rheol fertigol. — Cymhwyswch eiddo flexbox lluosog yn gyflym i greu cynlluniau arfer gyda phentyrrau yn gyflym . Dewiswch o staciau llorweddol ( .hstack) a fertigol ( .vstack). Ychwanegu rhanwyr fertigol tebyg i <hr>elfennau gyda'r cynorthwywyr newydd.vr .
Ychwanegwyd :rootnewidynnau CSS byd-eang newydd. — Ychwanegwyd sawl newidyn CSS newydd at y :rootlefel ar gyfer rheoli <body>arddulliau. Mae mwy ar y gweill, gan gynnwys ar draws ein cyfleustodau a'n cydrannau, ond am y tro darllenwch newidynnau CSS yn yr adran Addasu .
Ailwampio cyfleustodau lliw a chefndir i ddefnyddio newidynnau CSS, ac ychwanegu cyfleustodau didreiddedd testun a chefndir newydd . - .text-* ac .bg-*mae cyfleustodau bellach wedi'u hadeiladu gyda newidynnau CSS a rgba()gwerthoedd lliw, sy'n eich galluogi i addasu unrhyw gyfleustodau yn hawdd gyda chyfleustodau didreiddedd newydd.
Ychwanegwyd enghreifftiau pyt newydd yn seiliedig i ddangos sut i addasu ein cydrannau. — Tynnwch gydrannau wedi'u haddasu a phatrymau dylunio cyffredin eraill yn barod i'w defnyddio gyda'n henghreifftiau newydd o Snippets . Yn cynnwys troedynnau , cwymplenni , grwpiau rhestr , a moddau .
Tynnu arddulliau lleoli nas defnyddiwyd o popovers a chynghorion offer gan mai Popper yn unig sy'n ymdrin â'r rhain. $tooltip-marginwedi'i anghymeradwyo a'i osod nullyn y broses.

Eisiau mwy o wybodaeth? Darllenwch y post blog v5.1.0.

Hei yno! Mae newidiadau i'n datganiad mawr cyntaf o Bootstrap 5, v5.0.0, wedi'u dogfennu isod. Nid ydynt yn adlewyrchu'r newidiadau ychwanegol a ddangosir uchod.

Dibyniaethau

Wedi gollwng jQuery.
Wedi'i uwchraddio o Popper v1.x i Popper v2.x.
Wedi disodli Libsass â Dart Sass fel ein casglwr Sass o ystyried bod Libsass yn anghymeradwy.
Wedi mudo o Jekyll i Hugo ar gyfer adeiladu ein dogfennaeth

Cefnogaeth porwr

Wedi gollwng Internet Explorer 10 ac 11
Gollwng Microsoft Edge < 16 (Legacy Edge)
Wedi gollwng Firefox < 60
Safari wedi'i ollwng < 12
Gollyngwyd iOS Safari < 12
Chrome wedi'i ollwng <60

Dogfennaeth yn newid

Tudalen hafan wedi'i hailgynllunio, cynllun dogfennau, a throedyn.
Ychwanegwyd canllaw parsel newydd .
Ychwanegwyd adran Customize newydd , gan ddisodli tudalen Theming v4 , gyda manylion newydd ar Sass, opsiynau cyfluniad byd-eang, cynlluniau lliw, newidynnau CSS, a mwy.
Ad-drefnu'r holl ddogfennaeth ffurflen yn adran Ffurflenni newydd , gan rannu'r cynnwys yn dudalennau mwy penodol.
Yn yr un modd, diweddarwyd yr adran Gosodiad , i roi mwy o fanylion am gynnwys y grid.
Wedi'i hailenwi'n dudalen gydran “Navs” i “Navs & Tabs”.
Wedi'i hailenwi'n dudalen “Gwiriadau” i “Gwiriadau a radios”.
Ailgynllunio'r bar llywio ac ychwanegu subnav newydd i'w gwneud hi'n haws mynd o gwmpas ein fersiynau gwefannau a dogfennau.
Ychwanegwyd llwybr byr bysellfwrdd newydd ar gyfer y maes chwilio: Ctrl + /.

Sass

Rydym wedi rhoi'r gorau i gyfuniadau rhagosodedig y map Sass i'w gwneud hi'n haws dileu gwerthoedd diangen. Cofiwch fod yn rhaid i chi nawr ddiffinio'r holl werthoedd yn y mapiau Sass fel $theme-colors. Darganfyddwch sut i ddelio â mapiau Sass .
TorriSwyddogaeth wedi'i hailenwi color-yiq()a newidynnau cysylltiedig i color-contrast()gan nad yw bellach yn gysylltiedig â gofod lliw YIQ. Gweler #30168.
- $yiq-contrasted-thresholdyn cael ei ailenwi i $min-contrast-ratio.
- $yiq-text-darkac $yiq-text-lightyn cael eu hail-enwi i $color-contrast-darka $color-contrast-light.
TorriMae paramedrau cymysgeddau ymholiad cyfryngau wedi newid ar gyfer dull mwy rhesymegol.
- media-breakpoint-down()yn defnyddio'r torbwynt ei hun yn lle'r torbwynt nesaf (ee, media-breakpoint-down(lg)yn hytrach na media-breakpoint-down(md)phorthladdoedd targed sy'n llai na lg).
- Yn yr un modd, mae'r ail baramedr i mewn media-breakpoint-between()hefyd yn defnyddio'r torbwynt ei hun yn lle'r torbwynt nesaf (ee, media-between(sm, lg)yn hytrach na media-breakpoint-between(sm, md)gwylfannau targed rhwng sma lg).
TorriArddulliau print wedi'u tynnu a $enable-print-stylesnewidyn. Mae dosbarthiadau arddangos print yn dal i fod o gwmpas. Gweler #28339 .
TorriGollwng color(), theme-color(), a gray()swyddogaethau o blaid newidynnau. Gweler #29083 .
Torritheme-color-level()Swyddogaeth wedi'i ailenwi i ac color-level()yn awr yn derbyn unrhyw liw rydych chi ei eisiau yn lle $theme-colorlliwiau yn unig. Gweler #29083 Gwyliwch allan: color-level() fe'i gollyngwyd i mewn yn ddiweddarach v5.0.0-alpha3.
TorriWedi'i ail-enwi $enable-prefers-reduced-motion-media-queryac $enable-pointer-cursor-for-buttonsi $enable-reduced-motionac $enable-button-pointersam grynodeb.
TorriWedi tynnu'r bg-gradient-variant()mixin. Defnyddiwch y .bg-gradientdosbarth i ychwanegu graddiannau at elfennau yn lle'r .bg-gradient-*dosbarthiadau a gynhyrchir.
Torri Tynnwyd cymysgeddau anghymeradwy o'r blaen:
- hover, hover-focus, plain-hover-focus, ahover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(hefyd wedi gollwng y dosbarth cyfleustodau cysylltiedig, .text-hide)
- visibility()
- form-control-focus()
Torriscale-color()Swyddogaeth wedi'i hail-enwi shift-color()er mwyn osgoi gwrthdaro â swyddogaeth graddio lliw Sass ei hun.
box-shadowmae mixins bellach yn caniatáu nullgwerthoedd a gollwng noneo ddadleuon lluosog. Gweler #30394 .
Bellach border-radius()mae gan y mixin werth diofyn.

System lliw

Mae'r system lliw a oedd yn gweithio gyda color-level()ac $theme-color-intervalyn cael ei ddileu o blaid system lliw newydd. Mae'r holl swyddogaethau lighten()yn darken()ein codebase yn cael eu disodli gan tint-color()a shade-color(). Bydd y swyddogaethau hyn yn cymysgu'r lliw gyda naill ai gwyn neu ddu yn lle newid ei ysgafnder gan swm penodol. Bydd y shift-color()naill ai'n lliwio neu'n cysgodi lliw yn dibynnu a yw ei baramedr pwysau yn bositif neu'n negyddol. Gweler #30622 am ragor o fanylion.
Ychwanegwyd arlliwiau ac arlliwiau newydd ar gyfer pob lliw, gan ddarparu naw lliw ar wahân ar gyfer pob lliw sylfaenol, fel newidynnau Sass newydd.
Gwell cyferbyniad lliw. Cymhareb cyferbyniad lliw bump o 3:1 i 4.5:1 a lliwiau glas, gwyrdd, gwyrddlas a phinc wedi'u diweddaru i sicrhau cyferbyniad WCAG 2.1 AA. Hefyd wedi newid ein lliw cyferbyniad lliw o $gray-900i $black.
I gefnogi ein system lliw, rydym wedi ychwanegu arferiad tint-color()a shade-color()swyddogaethau newydd i gymysgu ein lliwiau'n briodol.

Diweddariadau grid

Torbwynt newydd! Ychwanegwyd torbwynt newydd xxlar gyfer 1400pxac i fyny. Dim newidiadau i'r holl dorbwyntiau eraill.
Gwteri gwell. Mae cwteri bellach wedi'u gosod mewn rems, ac maent yn gulach na v4 ( 1.5rem, neu o gwmpas 24px, i lawr o 30px). Mae hyn yn alinio cwteri ein system grid gyda'n cyfleustodau bylchu.
- Ychwanegwyd dosbarth gwteri newydd ( .g-*, .gx-*, a .gy-*) i reoli cwteri llorweddol / fertigol, cwteri llorweddol, a chwteri fertigol.
- TorriWedi'i ailenwi .no-guttersi .g-0i gyd-fynd â chyfleustodau gwter newydd.
Nid yw colofnau bellach wedi position: relativecymhwyso, felly efallai y bydd yn rhaid i chi ychwanegu .position-relativeat rai elfennau i adfer yr ymddygiad hwnnw.
TorriGollwng nifer o .order-*ddosbarthiadau nad oeddent yn cael eu defnyddio'n aml. Rydym yn awr yn darparu dim ond .order-1i .order-5allan o'r bocs.
TorriGollwng y .mediagydran gan y gellir ei ailadrodd yn hawdd gyda chyfleustodau. Gweler #28265 a'r dudalen flex utilities am enghraifft .
Torri bootstrap-grid.cssnawr dim ond yn berthnasol box-sizing: border-boxi'r golofn yn lle ailosod y maint bocs byd-eang. Fel hyn, gellir defnyddio ein steiliau grid mewn mwy o leoedd heb ymyrraeth.
$enable-grid-classesnid yw bellach yn analluogi cynhyrchu dosbarthiadau cynhwysydd mwyach. Gweler #29146.
Wedi diweddaru'r mixin make-colyn ddiofyn i golofnau cyfartal heb faint penodol.

Cynnwys, Ailgychwyn, ac ati

Mae RFS bellach wedi'i alluogi yn ddiofyn. Bydd penawdau sy'n defnyddio'rfont-size()mixin yn addasu eufont-sizemaint yn awtomatig gyda'r porth gwylio. Roedd y nodwedd hon yn optio i mewn yn flaenorol gyda v4.
TorriAilwampio ein teipograffeg arddangos i ddisodli ein $display-*newidynnau a gyda $display-font-sizesmap Sass. Hefyd wedi dileu'r $display-*-weightnewidynnau unigol ar gyfer un $display-font-weights font-size.
Ychwanegwyd dau .display-*faint pennawd newydd, .display-5a .display-6.
Mae dolenni'n cael eu tanlinellu yn ddiofyn (nid dim ond ar hofran), oni bai eu bod yn rhan o gydrannau penodol.
Tablau wedi'u hailgynllunio i adnewyddu eu harddulliau a'u hailadeiladu gyda newidynnau CSS i gael mwy o reolaeth dros steilio.
TorriNid yw byrddau nythu yn etifeddu arddulliau mwyach.
Torri .thead-lightac .thead-darkyn cael eu gollwng o blaid y .table-*dosbarthiadau amrywiadol y gellir eu defnyddio ar gyfer holl elfennau tabl ( thead, tbody, tfoot, , tr, tha td).
TorriMae'r table-row-variant()mixin yn cael ei ailenwi i table-variant()ac yn derbyn dim ond 2 baramedr: $color(enw lliw) a $value(cod lliw). Mae lliw'r ffin a'r lliwiau acen yn cael eu cyfrifo'n awtomatig yn seiliedig ar y newidynnau ffactor tabl.
Rhannwch newidynnau padin cell bwrdd yn -ya -x.
Torri.pre-scrollableDosbarth wedi'i ollwng . Gweler #29135
Torri .text-*nid yw cyfleustodau'n ychwanegu cyflwr hofran a ffocws at ddolenni mwyach. .link-*gellir defnyddio dosbarthiadau cynorthwywyr yn lle hynny. Gweler #29267
Torri.text-justifyDosbarth wedi'i ollwng . Gweler #29793
Torri <hr>mae elfennau bellach yn defnyddio heightyn lle borderi gefnogi'r sizepriodoledd yn well. Mae hyn hefyd yn galluogi defnyddio cyfleustodau padin i greu rhanwyr mwy trwchus (ee, <hr class="py-1">).
Ailosod llorweddol diofyn padding-leftymlaen <ul>ac <ol>elfennau o ddiofyn porwr 40pxi 2rem.
Ychwanegwyd $enable-smooth-scroll, sy'n berthnasol yn scroll-behavior: smoothfyd-eang - ac eithrio defnyddwyr sy'n gofyn am lai o symudiad trwy prefers-reduced-motionymholiad cyfryngau. Gweler #31877

RTL

Mae newidynnau cyfeiriad llorweddol penodol, cyfleustodau, a chymysgeddau i gyd wedi'u hailenwi i ddefnyddio priodweddau rhesymegol fel y rhai a geir mewn cynlluniau flexbox - ee, startac endyn lle lefta right.

Ffurflenni

Ychwanegwyd ffurflenni arnofiol newydd! Rydym wedi hyrwyddo'r enghraifft o labeli arnofio i gydrannau ffurf sydd wedi'u cefnogi'n llawn. Gweler y dudalen labeli arnofio newydd.
Torri Elfennau ffurf brodorol ac arferiad cyfunol. Mae blychau ticio, radios, detholiadau, a mewnbynnau eraill a oedd â dosbarthiadau brodorol ac arfer yn v4 wedi'u cydgrynhoi. Nawr mae bron pob un o'n helfennau ffurflen yn gwbl arferiad, y rhan fwyaf heb yr angen am HTML wedi'i deilwra.
- .custom-control.custom-checkboxyn awr .form-check.
- .custom-control.custom-custom-radioyn awr .form-check.
- .custom-control.custom-switchyn awr .form-check.form-switch.
- .custom-selectyn awr .form-select.
- .custom-fileac .form-filewedi cael eu disodli gan arddulliau arfer ar ben .form-control.
- .custom-rangeyn awr .form-range.
- Wedi gollwng brodorol .form-control-filea .form-control-range.
TorriGollwng .input-group-appenda .input-group-prepend. Nawr gallwch chi ychwanegu botymau ac .input-group-textfel plant uniongyrchol y grwpiau mewnbwn.
Mae'r radiws ffin Coll hirsefydlog ar grŵp mewnbwn gyda byg adborth dilysu yn cael ei osod o'r diwedd trwy ychwanegu .has-validationdosbarth ychwanegol at grwpiau mewnbwn gyda dilysiad.
Torri Gollyngwyd dosbarthiadau cynllun ffurf-benodol ar gyfer ein system grid. Defnyddiwch ein grid a chyfleustodau yn lle .form-group, .form-row, neu .form-inline.
TorriMae angen labeli ffurflen nawr .form-label.
Torri .form-textNid yw bellach yn gosod display, sy'n eich galluogi i greu testun cymorth mewnol neu flocio fel y dymunwch dim ond trwy newid yr elfen HTML.
Ni ddefnyddir rheolyddion ffurf bellach yn sefydlog heightpan fo'n bosibl, yn hytrach yn gohirio min-heighti wella addasu a chydnawsedd â chydrannau eraill.
Nid yw eiconau dilysu bellach yn cael eu cymhwyso i <select>s gyda multiple.
Ffeiliau Sass ffynhonnell wedi'u haildrefnu o dan scss/forms/, gan gynnwys arddulliau grwpiau mewnbwn.

Cydrannau

Gwerthoedd unedig paddingar gyfer rhybuddion, briwsion bara, cardiau, cwymplenni, grwpiau rhestr, moddau, popovers, ac awgrymiadau offer i fod yn seiliedig ar ein $spacernewidyn. Gweler #30564 .

Acordion

Ychwanegwyd cydran acordion newydd .

Rhybuddion

Erbyn hyn mae gan rybuddion enghreifftiau gydag eiconau .
Wedi dileu arddulliau personol ar gyfer <hr>s ym mhob rhybudd gan eu bod eisoes yn defnyddio currentColor.

Bathodynnau

TorriGollwng pob .badge-*dosbarth lliw ar gyfer cyfleustodau cefndir (ee, defnyddio .bg-primaryyn lle .badge-primary).
TorriWedi'i ollwng - defnyddiwch .badge-pilly .rounded-pillcyfleustodau yn lle hynny.
TorriDulliau hofran a ffocws wedi'u tynnu ar gyfer <a>ac <button>elfennau.
Mwy o badin rhagosodedig ar gyfer bathodynnau o .25em/ .5emi .35em/ .65em.

Briwsion bara

Symleiddio ymddangosiad diofyn briwsion bara trwy dynnu padding, background-color, a border-radius.
Ychwanegwyd eiddo arfer CSS newydd --bs-breadcrumb-divideri'w addasu'n hawdd heb fod angen ail-grynhoi CSS.

Botymau

Torri Nid oes angen JavaScript ar fotymau toglo , gyda blychau ticio neu radios, ac mae ganddynt farcio newydd. Nid oes angen elfen lapio arnom bellach, ychwanegwch.btn-checkat y<input>, a'i baru ag unrhyw.btnddosbarthiadau ar y<label>. Gweler #30650 . Mae'r dogfennau ar gyfer hyn wedi symud o'n tudalen Botymau i'r adran Ffurflenni newydd.
Torri Gollwng .btn-blockar gyfer cyfleustodau. Yn hytrach na defnyddio .btn-blockar y .btn, lapiwch eich botymau gyda .d-grida .gap-*chyfleustodau i'w gosod yn ôl yr angen. Newidiwch i ddosbarthiadau ymatebol i gael hyd yn oed mwy o reolaeth drostynt. Darllenwch y dogfennau am rai enghreifftiau.
Wedi diweddaru ein button-variant()a button-outline-variant()mixins i gefnogi paramedrau ychwanegol.
Botymau wedi'u diweddaru i sicrhau mwy o gyferbyniad ar hofran a chyflyrau gweithredol.
Bellach mae gan fotymau anabl pointer-events: none;.

Cerdyn

TorriGollwng .card-decko blaid ein grid. Lapiwch eich cardiau mewn dosbarthiadau colofn ac ychwanegwch .row-cols-*gynhwysydd rhiant i ail-greu deciau cardiau (ond gyda mwy o reolaeth dros aliniad ymatebol).
TorriGollwng .card-columnso blaid Gwaith Maen. Gweler #28922 .
TorriWedi disodli'r .cardacordion sylfaen gyda chydran Acordion newydd .

Carwsél

Ychwanegwyd .carousel-darkamrywiad newydd ar gyfer testun tywyll, rheolyddion, a dangosyddion (gwych ar gyfer cefndiroedd ysgafnach).
Eiconau chevron wedi'u disodli ar gyfer rheolyddion carwsél gyda SVGs newydd o Bootstrap Icons .

Cau botwm

TorriWedi'i ailenwi .closei .btn-closeam enw llai generig.
Mae botymau cau nawr yn defnyddio background-imageSVG (wedi'i fewnosod) yn lle un ×yn yr HTML, gan ganiatáu ar gyfer addasu haws heb fod angen cyffwrdd â'ch marcio.
Ychwanegwyd .btn-close-whiteamrywiad newydd sy'n defnyddio filter: invert(1)i alluogi cyferbyniad uwch i ddiystyru eiconau yn erbyn cefndiroedd tywyllach.

Cwymp

Wedi tynnu angori sgrolio ar gyfer acordionau.

Cwympiadau

Ychwanegwyd .dropdown-menu-darkamrywiad newydd a newidynnau cysylltiedig ar gyfer cwymplenni tywyll ar-alw.
Ychwanegwyd newidyn newydd ar gyfer $dropdown-padding-x.
Tywyllodd y rhannwr cwymplen ar gyfer gwell cyferbyniad.
TorriMae'r holl ddigwyddiadau ar gyfer y gwymplen bellach yn cael eu sbarduno ar y botwm togl cwymplen ac yna'n cael eu swigenu i fyny i'r rhiant elfen.
Bellach mae gan gwymplenni data-bs-popper="static"briodoledd wedi'i osod pan fydd lleoliad y gwymplen yn statig, neu pan fo'r gwymplen yn y bar llywio. Ychwanegir hyn gan ein JavaScript ac mae'n ein helpu i ddefnyddio arddulliau lleoli arferol heb ymyrryd â lleoliad Popper.
TorriOpsiwn wedi'i ollwng flipar gyfer ategyn cwymplen o blaid cyfluniad Popper brodorol. Gallwch nawr analluogi'r ymddygiad fflipio trwy basio arae wag ar gyfer fallbackPlacementsopsiwn mewn addasydd fflip .
Bellach gellir clicio ar gwymplenni gydag autoCloseopsiwn newydd i drin yr ymddygiad cau ceir . Gallwch ddefnyddio'r opsiwn hwn i dderbyn y clic y tu mewn neu'r tu allan i'r gwymplen i'w wneud yn rhyngweithiol.
Mae dropdowns bellach yn cefnogi .dropdown-items lapio mewn <li>s.

Jumbotron

TorriGollwng y gydran jumbotron gan y gellir ei ailadrodd gyda chyfleustodau. Gweler ein hesiampl Jumbotron newydd ar gyfer demo.

Rhestr grŵp

Ychwanegwyd .list-group-numberedaddasydd newydd i restru grwpiau.

Navs a thabiau

Ychwanegwyd nullnewidynnau newydd ar gyfer font-size, font-weight, color, ac :hover colori'r .nav-linkdosbarth.

Navbars

TorriBellach mae angen cynhwysydd o fewn Navbars (i symleiddio gofynion bylchu'n sylweddol a CSS yn ofynnol).
TorriNi .activeellir cymhwyso'r dosbarth i s mwyach .nav-item, rhaid ei gymhwyso'n uniongyrchol ar .nav-links.

Offcanvas

Ychwanegwyd y gydran offcanvas newydd .

Tudaleniad

Mae gan ddolenni tudaleniad bellach y gellir eu haddasu margin-leftsy'n cael eu talgrynnu'n ddeinamig ar bob cornel o'u gwahanu oddi wrth ei gilydd.
Ychwanegwyd transitions at ddolenni tudalen.

Popovers

TorriWedi'i ailenwi .arrowi .popover-arrowyn ein templed popover diofyn.
whiteListOpsiwn wedi'i ailenwi i allowList.

Troellwyr

Mae troellwyr nawr yn anrhydeddu prefers-reduced-motion: reducetrwy arafu animeiddiadau. Gweler #31882 .
Gwell aliniad fertigol troellwr.

Tosts

Bellach gellir gosod tost mewn a .toast-containergyda chymorth lleoli cyfleustodau .
Newid hyd tost rhagosodedig i 5 eiliad.
Wedi'i dynnu overflow: hiddenoddi ar dostau a'i ddisodli gan iawn border-radiuss gyda calc()swyddogaethau.

Cynghorion offer

TorriWedi'i ailenwi .arrowi .tooltip-arrowyn ein templed cyngor cymorth diofyn.
TorriMae'r gwerth diofyn ar gyfer y fallbackPlacementsyn cael ei newid i ['top', 'right', 'bottom', 'left']ar gyfer gosod elfennau popper yn well.
TorriwhiteListOpsiwn wedi'i ailenwi i allowList.

Cyfleustodau

TorriWedi ail-enwi nifer o gyfleustodau i ddefnyddio enwau eiddo rhesymegol yn lle enwau cyfeiriadol gan ychwanegu cefnogaeth RTL:
- Wedi'i ailenwi .left-*ac .right-*i .start-*a .end-*.
- Wedi'i ailenwi .float-leftac .float-righti .float-starta .float-end.
- Wedi'i ailenwi .border-leftac .border-righti .border-starta .border-end.
- Wedi'i ailenwi .rounded-leftac .rounded-righti .rounded-starta .rounded-end.
- Wedi'i ailenwi .ml-*ac .mr-*i .ms-*a .me-*.
- Wedi'i ailenwi .pl-*ac .pr-*i .ps-*a .pe-*.
- Wedi'i ailenwi .text-leftac .text-righti .text-starta .text-end.
TorriYmylon negyddol wedi'u hanalluogi yn ddiofyn.
Ychwanegwyd .bg-bodydosbarth newydd ar gyfer gosod <body>cefndir yr elfennau ychwanegol yn gyflym.
Ychwanegwyd cyfleustodau safle newydd ar gyfer top, right, bottom, a left. Mae gwerthoedd yn cynnwys 0, 50%, ac 100%ar gyfer pob eiddo.
Ychwanegwyd newydd .translate-middle-xa .translate-middle-ychyfleustodau i'r canol yn llorweddol neu'n fertigol elfennau wedi'u lleoli absoliwt/sefydlog.
Ychwanegwyd border-widthcyfleustodau newydd .
TorriWedi'i ail-enwi .text-monospacei .font-monospace.
TorriWedi'i ddileu .text-hidegan ei fod yn ddull hynafol o guddio testun na ddylid ei ddefnyddio mwyach.
Cyfleustodau ychwanegol .fs-*ar gyfer font-sizecyfleustodau (gyda RFS wedi'i alluogi). Mae'r rhain yn defnyddio'r un raddfa â phenawdau rhagosodedig HTML (1-6, mawr i fach), a gellir eu haddasu trwy fap Sass.
TorriCyfleustodau wedi'u hail-enwi .font-weight-*fel .fw-*ar gyfer crynoder a chysondeb.
TorriCyfleustodau wedi'u hail-enwi .font-style-*fel .fst-*ar gyfer crynoder a chysondeb.
Ychwanegwyd .d-gridi arddangos cyfleustodau a gapchyfleustodau newydd ( .gap) ar gyfer Grid CSS a chynlluniau flexbox.
TorriWedi'i ddileu .rounded-sma rounded-lg, a chyflwyno graddfa newydd o ddosbarthiadau, .rounded-0i .rounded-3. Gweler #31687 .
Ychwanegwyd line-heightcyfleustodau newydd: .lh-1, .lh-sm, .lh-basea .lh-lg. Gweler yma .
Wedi symud y .d-nonecyfleustodau yn ein CSS i roi mwy o bwysau iddo dros gyfleustodau arddangos eraill.
Estynnwyd y .visually-hidden-focusablecynorthwyydd i weithio ar gynwysyddion hefyd, gan ddefnyddio :focus-within.

Cynorthwywyr

Torri Mae cynorthwywyr mewnosod ymatebol wedi'u hail-enwi yn gynorthwywyr cymarebau gydag enwau dosbarth newydd a gwell ymddygiad, yn ogystal â newidyn CSS defnyddiol.
- Mae dosbarthiadau wedi'u hailenwi i newid byi'r xgymhareb agwedd. Er enghraifft, .ratio-16by9yn awr .ratio-16x9.
- Rydym wedi rhoi'r gorau i'r .embed-responsive-itemdewisydd a'r grŵp elfen o blaid .ratio > *dewisydd symlach. Nid oes angen mwy o ddosbarth, ac mae'r cynorthwyydd cymhareb bellach yn gweithio gydag unrhyw elfen HTML.
- Mae'r $embed-responsive-aspect-ratiosmap Sass wedi'i ailenwi i $aspect-ratiosac mae ei werthoedd wedi'u symleiddio i gynnwys enw'r dosbarth a'r ganran fel y key: valuepâr.
- Mae newidynnau CSS bellach yn cael eu cynhyrchu a'u cynnwys ar gyfer pob gwerth yn y map Sass. Addasu'r --bs-aspect-rationewidyn ar y .ratioi greu unrhyw gymhareb agwedd arferiad .
Torri Mae dosbarthiadau “darllenwr sgrin” bellach yn ddosbarthiadau “cudd yn weledol” .
- Wedi newid y ffeil Sass o scss/helpers/_screenreaders.scssiscss/helpers/_visually-hidden.scss
- Ailenwyd .sr-onlyac .sr-only-focusablei .visually-hiddena.visually-hidden-focusable
- Wedi'i ailenwi sr-only()a'i sr-only-focusable()gymysgu i visually-hidden()a visually-hidden-focusable().
bootstrap-utilities.cssyn awr hefyd yn cynnwys ein cynorthwywyr. Nid oes angen i gynorthwywyr gael eu mewnforio mewn adeiladau pwrpasol mwyach.

JavaScript

Gollwng dibyniaeth jQuery ac ailysgrifennu ategion i fod mewn JavaScript rheolaidd.
TorriMae priodoleddau data ar gyfer yr holl ategion JavaScript bellach wedi'u gosod mewn gofod enwau i helpu i wahaniaethu rhwng ymarferoldeb Bootstrap a thrydydd partïon a'ch cod eich hun. Er enghraifft, rydym yn defnyddio data-bs-toggleyn lle data-toggle.
Gall pob ategyn nawr dderbyn dewisydd CSS fel y ddadl gyntaf. Gallwch naill ai basio elfen DOM neu unrhyw ddewiswr CSS dilys i greu enghraifft newydd o'r ategyn:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfiggellir ei basio fel swyddogaeth sy'n derbyn ffurfweddiad Popper rhagosodedig Bootstrap fel dadl, fel y gallwch uno'r cyfluniad rhagosodedig hwn yn eich ffordd chi. Yn berthnasol i gwympiadau, popovers, ac awgrymiadau offer.
Mae'r gwerth diofyn ar gyfer y fallbackPlacementsyn cael ei newid i ['top', 'right', 'bottom', 'left']ar gyfer lleoli elfennau Popper yn well. Yn berthnasol i gwympiadau, popovers, ac awgrymiadau offer.
Wedi tynnu tanlinelliad o ddulliau statig cyhoeddus megis _getInstance()→ getInstance().