Migrado al v5

Spuri kaj revizii ŝanĝojn al la fontdosieroj, dokumentaro kaj komponantoj de Bootstrap por helpi vin migri de v4 al v5.

Sur ĉi tiu paĝo

v5.2.0

Refreŝigita dezajno

Bootstrap v5.2.0 prezentas subtilan desegnan ĝisdatigon por kelkaj komponantoj kaj propraĵoj tra la projekto, precipe per rafinitaj border-radiusvaloroj sur butonoj kaj formularaj kontroloj . Nia dokumentaro ankaŭ estis ĝisdatigita kun nova hejmpaĝo, pli simpla enpaĝigo de dokumentoj, kiu ne plu kolapsas sekciojn de la flanka kolumno, kaj pli elstaraj ekzemploj de Bootstrap Ikonoj .

Pli da CSS-variabloj

Ni ĝisdatigis ĉiujn niajn komponantojn por uzi CSS-variablojn. Dum Sass ankoraŭ subtenas ĉion, ĉiu komponanto estis ĝisdatigita por inkluzivi CSS-variablojn sur la komponentaj bazklasoj (ekz, .btn), ebligante pli realtempan personigon de Bootstrap. En postaj eldonoj, ni daŭre vastigos nian uzon de CSS-variabloj en niajn aranĝon, formojn, helpantojn kaj ilojn. Legu pli pri CSS-variabloj en ĉiu komponanto sur iliaj respektivaj dokumentaj paĝoj.

Nia CSS-varia uzado estos iom nekompleta ĝis Bootstrap 6. Kvankam ni ŝatus plene efektivigi ĉi tiujn ĉie, ili ja riskas kaŭzi rompitajn ŝanĝojn. Ekzemple, agordi $alert-border-width: var(--bs-border-width)en nia fontkodo rompas potencialan Sass en via propra kodo se vi faris $alert-border-width * 2ial.

Kiel tia, kie ajn ebla, ni daŭre antaŭenpuŝos pli da CSS-variabloj, sed bonvolu rekoni, ke nia efektivigo povas esti iomete limigita en v5.

Nova`_maps.scss`

Bootstrap v5.2.0 enkondukis novan Sass-dosieron kun _maps.scss. Ĝi eltiras plurajn Sass-mapojn de _variables.scsspor solvi problemon, kie ĝisdatigoj al originala mapo ne estis aplikitaj al malĉefaj mapoj kiuj etendas ilin. Ekzemple, ĝisdatigoj de $theme-colorsne estis aplikataj al aliaj temmapoj kiuj dependis de $theme-colors, rompante ŝlosilajn personigajn laborfluojn. Resume, Sass havas limigon, kie post kiam defaŭlta variablo aŭ mapo estis uzata , ĝi ne povas esti ĝisdatigita. Estas simila manko kun CSS-variabloj kiam ili estas uzataj por formi aliajn CSS-variablojn.

Jen kial ŝanĝiĝemaj personigoj en Bootstrap devas veni post @import "functions", sed antaŭ @import "variables"kaj la resto de nia importa stako. La sama validas por Sass-mapoj—vi devas superregi la defaŭltojn antaŭ ol ili estas uzataj. La sekvaj mapoj estis movitaj al la nova _maps.scss:

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

Viaj kutimaj Bootstrap CSS-konstruaĵoj nun devus aspekti kiel ĉi tio kun aparta importado de mapoj.

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

Novaj utilecoj

Vastigitaj font-weightiloj por inkluzivi .fw-semiboldpor duongradaj tiparoj.
Vastigitaj border-radiusiloj por inkluzivi du novajn grandecojn, .rounded-4kaj .rounded-5, por pli da ebloj.

Pliaj ŝanĝoj

Enkondukis novan $enable-container-classesopcion. — Nun kiam elektas en la eksperimenta CSS-Kred-aranĝo, .container-*klasoj ankoraŭ estos kompilitaj, krom se ĉi tiu opcio estas agordita al false. Ujoj ankaŭ nun konservas siajn defluajn valorojn.
Offcanvas-komponento nun havas respondemajn variaĵojn . La origina .offcanvasklaso restas senŝanĝa—ĝi kaŝas enhavon tra ĉiuj vidfenestroj. Por ke ĝi respondu, ŝanĝu tiun .offcanvasklason al iu ajn .offcanvas-{sm|md|lg|xl|xxl}klaso.
Pli dikaj tabuldividiloj nun estas aligeblaj. — Ni forigis la pli dikan kaj malfacile superregeblan limon inter tabelgrupoj kaj movis ĝin al laŭvola klaso, kiun vi povas apliki, .table-group-divider. Vidu la tabeldokumentojn por ekzemplo.
Scrollspy estis reverkita por uzi la Intersection Observer API , kio signifas, ke vi ne plu bezonas relativajn gepatrajn envolvaĵojn, malrekomendasoffsetagordon kaj pli. Serĉu, ke viaj Scrollspy-efektivigoj estu pli precizaj kaj konsekvencaj en sia navigacia reliefigo.
Popovers kaj konsiletoj nun uzas CSS-variablojn. Kelkaj CSS-variabloj estis ĝisdatigitaj de siaj Sass-ekvivalentoj por redukti la nombron da variabloj. Kiel rezulto, tri variabloj estis malrekomenditaj en ĉi tiu eldono: $popover-arrow-color, $popover-arrow-outer-color, kaj $tooltip-arrow-color.
Aldonitaj novaj .text-bg-{color}helpantoj. Anstataŭ agordi individuajn .text-*kaj .bg-*utilecojn, vi nun povas uzi la .text-bg-*helpantojn por agordi background-colorkun kontrasta malfono color.
Aldonita .form-check-reversemodifilo por renversi la ordon de etikedoj kaj rilataj markobutonoj/radioj.
Aldonita subteno de striitaj kolumnoj al tabeloj per la nova .table-striped-columnsklaso.

Por kompleta listo de ŝanĝoj, vidu la projekton v5.2.0 sur GitHub .

v5.1.0

Aldonita eksperimenta subteno por CSS Grid-aranĝo . — Ĉi tio estas laboro en progreso, kaj ankoraŭ ne estas preta por produktada uzo, sed vi povas elekti la novan funkcion per Sass. Por ebligi ĝin, malŝaltu la defaŭltan kradon, agordante $enable-grid-classes: falsekaj ebligante la CSS Kradon per agordo $enable-cssgrid: true.
Ĝisdatigitaj navbaroj por subteni offcanvas. — Aldonu eksterkanvasajn tirkestojn en ajna navbaro kun la respondemaj .navbar-expand-*klasoj kaj iom da eksterkanvasa markado.
Aldonita nova lokokupilo komponanto . — Nia plej nova komponanto, maniero provizi provizorajn blokojn anstataŭ vera enhavo por helpi indiki, ke io ankoraŭ ŝarĝas en via retejo aŭ programo.
Kolapsa kromaĵo nun subtenas horizontalan kolapson . — Aldonu .collapse-horizontalal via .collapsepor kolapsigi la widthanstataŭ la height. Evitu repentri de retumilo per agordo min-heightaŭ height.
Aldonitaj novaj stakoj kaj vertikalaj regulhelpantoj. — Rapide apliku plurajn flekskestaĵojn por rapide krei kutimajn aranĝojn kun stakoj . Elektu el horizontalaj ( .hstack) kaj vertikalaj ( .vstack) stakoj. Aldonu vertikalajn dividaĵojn similajn al <hr>elementoj kun la novaj .vrhelpantoj .
Aldonitaj novaj tutmondaj :rootCSS-variabloj. — Aldonis plurajn novajn CSS-variablojn al la :rootnivelo por kontroli <body>stilojn. Pli estas en la laboroj, inkluzive de niaj iloj kaj komponantoj, sed nuntempe legu CSS-variablojn en la sekcio Agordu .
Reviziis kolorajn kaj fonajn ilojn por uzi CSS-variablojn, kaj aldonis novajn tekstajn opakecon kaj fonan opakecon . — .text-* kaj .bg-*iloj nun estas konstruitaj kun CSS-variabloj kaj rgba()kolorvaloroj, permesante al vi facile agordi ajnan ilon per novaj opakcaj iloj.
Aldonitaj novaj fragmentaj ekzemploj bazitaj por montri kiel personecigi niajn komponantojn. — Tiru preta por uzi personecigitajn komponantojn kaj aliajn komunajn desegnajn ŝablonojn kun niaj novaj Ekzemploj de Fragmentoj . Inkluzivas piedliniojn , falmenuojn , listgrupojn kaj modalojn .
Forigis neuzatajn poziciajn stilojn de popovers kaj konsiletoj ĉar ĉi tiuj estas pritraktitaj nur de Popper. $tooltip-marginestis malrekomendita kaj agordita nullen la procezo.

Ĉu vi volas pliajn informojn? Legu la blogaĵon v5.1.0.

Saluton! Ŝanĝoj al nia unua grava eldono de Bootstrap 5, v5.0.0, estas dokumentitaj sube. Ili ne reflektas la pliajn ŝanĝojn montritajn supre.

Dependecoj

Forigita jQuery.
Ĝisdatigita de Popper v1.x al Popper v2.x.
Anstataŭigis Libsass per Dart Sass ĉar nia Sass-kompililo donita Libsass estis malrekomendita.
Migris de Jekyll al Hugo por konstrui nian dokumentaron

Subteno de retumilo

Forigis Internet Explorer 10 kaj 11
Faligita Microsoft Edge < 16 (Legacy Edge)
Forigita Firefox < 60
Faligita Safaro < 12
Forigita iOS Safaro < 12
Forigita Chrome < 60

Dokumentaj ŝanĝoj

Restrukturitaj hejmpaĝo, enpaĝigo de dokumentoj kaj piedlinio.
Aldonita nova Pak-gvidilo .
Aldonis novan Agordu sekcion , anstataŭigante la Temon-paĝon de v4 , kun novaj detaloj pri Sass, tutmondaj agordaj opcioj, kolorskemoj, CSS-variabloj kaj pli.
Reorganizis la tutan formulardokumentaron en novan sekcion de Formoj , disigante la enhavon en pli fokusitajn paĝojn.
Simile, ĝisdatigis la sekcion Aranĝo , por pli klare pligrandigi kradenhavon.
Renomite "Navs" komponentpaĝo al "Navs & Tabs".
Renomis paĝon "Ĉekoj" al "Ĉekoj kaj radioj".
Redisegnis la navigadbreton kaj aldonis novan subnav por faciligi trairi niajn retejojn kaj dokumentojn.
Aldonita nova klavarkomo por la serĉkampo: Ctrl + /.

Sass

Ni forĵetis la defaŭltajn Sass-mapkuniĝojn por faciligi forigi redundajn valorojn. Memoru, ke vi nun devas difini ĉiujn valorojn en la Sass-mapoj kiel $theme-colors. Rigardu kiel trakti Sass-mapojn .
RompanteRenomita color-yiq()funkcio kaj rilataj variabloj al color-contrast()ĉar ĝi ne plu rilatas al YIQ-kolorspaco. Vidu #30168.
- $yiq-contrasted-thresholdestas renomita al $min-contrast-ratio.
- $yiq-text-darkkaj $yiq-text-lightestas respektive renomitaj al $color-contrast-darkkaj $color-contrast-light.
RompanteAmaskomunikilaraj demandaj miksinparametroj ŝanĝiĝis por pli logika aliro.
- media-breakpoint-down()uzas la rompopunkton mem anstataŭ la sekva rompopunkto (ekz., media-breakpoint-down(lg)anstataŭ media-breakpoint-down(md)celaj vidfenestroj pli malgrandaj ol lg).
- Simile, la dua parametro en media-breakpoint-between()ankaŭ uzas la rompopunkton mem anstataŭ la sekva rompopunkto (ekz., media-between(sm, lg)anstataŭ media-breakpoint-between(sm, md)celaj vidpunktoj inter smkaj lg).
RompanteForigitaj presaj stiloj kaj $enable-print-stylesvariablo. Presaj ekranklasoj ankoraŭ estas ĉirkaŭe. Vidu #28339 .
RompanteFaligita color(), theme-color(), kaj gray()funkcioj en favoro de variabloj. Vidu #29083 .
RompanteRenomita theme-color-level()funkcio al color-level()kaj nun akceptas ajnan koloron, kiun vi volas anstataŭ nur $theme-colorkoloroj. Vidu #29083 Atentu: color-level() estis poste faligita en v5.0.0-alpha3.
RompanteAlinomite $enable-prefers-reduced-motion-media-querykaj $enable-pointer-cursor-for-buttonsal $enable-reduced-motionkaj $enable-button-pointerspor koncizeco.
RompanteForigis la bg-gradient-variant()miksaĵon. Uzu la .bg-gradientklason por aldoni gradientojn al elementoj anstataŭ la generitaj .bg-gradient-*klasoj.
Rompante Forigis antaŭe malrekomenditajn miksaĵojn:
- hover, hover-focus, plain-hover-focus, kajhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(ankaŭ forigis la rilatan utilklason, .text-hide)
- visibility()
- form-control-focus()
RompanteRenomita scale-color()funkcio al shift-color()por eviti kolizion kun la propra kolorskala funkcio de Sass.
box-shadowmixins nun permesas nullvalorojn kaj faligi noneel pluraj argumentoj. Vidu #30394 .
La border-radius()miksaĵo nun havas defaŭltan valoron.

Kolora sistemo

La kolorsistemo kiu funkciis kun color-level()kaj $theme-color-intervalestis forigita en favoro de nova kolorsistemo. Ĉiuj lighten()kaj darken()funkcioj en nia kodbazo estas anstataŭigitaj per tint-color()kaj shade-color(). Ĉi tiuj funkcioj miksos la koloron kun blanka aŭ nigra anstataŭ ŝanĝi ĝian malpezecon je fiksa kvanto. La shift-color()aŭ nuancos aŭ ombros koloron depende de ĉu ĝia pezparametro estas pozitiva aŭ negativa. Vidu #30622 por pliaj detaloj.
Aldonitaj novaj nuancoj kaj nuancoj por ĉiu koloro, provizante naŭ apartajn kolorojn por ĉiu baza koloro, kiel novaj Sass-variabloj.
Plibonigita kolorkontrasto. Pliigita kolorkontrastoproporcio de 3:1 ĝis 4.5:1 kaj ĝisdatigitaj bluaj, verdaj, cejanaj kaj rozkoloraj koloroj por certigi WCAG 2.1 AA-kontraston. Ankaŭ ŝanĝis nian kolorkontrastan koloron de $gray-900al $black.
Por subteni nian kolorsistemon, ni aldonis novajn kutimojn tint-color()kaj shade-color()funkciojn por miksi niajn kolorojn taŭge.

Kradaj ĝisdatigoj

Nova rompopunkto! Aldonita nova xxlrompopunkto por 1400pxkaj supren. Neniuj ŝanĝoj al ĉiuj aliaj rompopunktoj.
Plibonigitaj defluiloj. Defluiloj nun estas metitaj en remoj, kaj estas pli mallarĝaj ol v4 ( 1.5rem, aŭ proksimume 24px, malsupren de 30px). Ĉi tio vicigas la kanalojn de nia kradsistemo kun niaj interspacaj utilecoj.
- Aldonita nova klaso de defluiloj ( .g-*, .gx-*, kaj .gy-*) por kontroli horizontalajn/vertikalajn defluojn, horizontalajn defluojn kaj vertikalajn defluojn.
- RompanteAlinomite .no-guttersal .g-0por kongrui kun novaj defluiloj.
Kolumnoj ne plu position: relativeaplikiĝis, do vi eble devos aldoni .position-relativeal iuj elementoj por restarigi tiun konduton.
RompanteForigis plurajn .order-*klasojn, kiuj ofte restis neuzataj. Ni nun provizas nur .order-1el .order-5la skatolo.
RompanteFaligis la .mediakomponenton ĉar ĝi povas esti facile reproduktita per utilecoj. Vidu #28265 kaj la paĝon de flex utilecoj por ekzemplo .
Rompante bootstrap-grid.cssnun validas nur box-sizing: border-boxpor la kolumno anstataŭ restarigi la tutmondan skatolon-grandecon. Tiel, niaj kradaj stiloj povas esti uzataj en pli da lokoj sen interfero.
$enable-grid-classesne plu malŝaltas la generacion de ujklasoj. Vidu #29146.
Ĝisdatigis la make-colmiksaĵon defaŭlte al egalaj kolumnoj sen specifita grandeco.

Enhavo, Reboot, ktp

RFS nun estas ebligita defaŭlte. Titoloj uzantaj lafont-size()miksaĵon aŭtomate ĝustigos sianfont-sizeal skalo kun la vidfenestro. Ĉi tiu funkcio antaŭe estis enskribita kun v4.
RompanteReviziis nian ekrantipografion por anstataŭigi niajn $display-*variablojn kaj per $display-font-sizesSass-mapo. Ankaŭ forigis la individuajn $display-*-weightvariablojn por ununura $display-font-weightkaj ĝustigita font-sizes.
Aldonitaj du novaj .display-*titoloj grandecoj, .display-5kaj .display-6.
Ligiloj estas substrekitaj defaŭlte (ne nur ŝvebate), krom se ili estas parto de specifaj komponantoj.
Redisegnitaj tabeloj por refreŝigi iliajn stilojn kaj rekonstrui ilin per CSS-variabloj por pli da kontrolo pri stilado.
RompanteNestitaj tabeloj ne plu heredas stilojn.
Rompante .thead-lightkaj .thead-darkestas forigitaj en favoro de la .table-*variantaj klasoj kiuj povas esti uzataj por ĉiuj tabelelementoj ( thead, tbody, tfoot, tr, thkaj td).
RompanteLa table-row-variant()miksaĵo estas renomita al table-variant()kaj akceptas nur 2 parametrojn: $color(kolornomo) kaj $value(kolorkodo). La randkoloro kaj akcentkoloroj estas aŭtomate kalkulitaj surbaze de la tabelfaktorvariabloj.
Dividu variablojn de tabelĉela kompletigo en -ykaj -x.
RompanteFaligita .pre-scrollableklaso. Vidu #29135
Rompante .text-*iloj ne plu aldonas statojn de ŝvebado kaj fokuso al ligiloj. .link-*helpklasoj povas esti uzataj anstataŭe. Vidu #29267
RompanteFaligita .text-justifyklaso. Vidu #29793
Rompante ~~<hr>elementoj nun uzas heightanstataŭ borderpor pli bone subteni la sizeatributon. Ĉi tio ankaŭ ebligas uzon de kompletigaj utilecoj por krei pli dikaj disigiloj (ekz, <hr class="py-1">).~~
Restarigu defaŭltan horizontalon kaj elementojn padding-leftde retumilo defaŭlte al .<ul><ol>40px2rem
Aldonita $enable-smooth-scroll, kiu validas scroll-behavior: smoothtutmonde—krom uzantoj kiuj petas reduktitan moviĝon per prefers-reduced-motionamaskomunikila demando. Vidu #31877

RTL

Horizontala direkto specifaj variabloj, utilecoj, kaj miksinoj ĉiuj estis renomitaj por uzi logikajn trajtojn kiel tiuj trovitaj en flekskesto-aranĝoj—ekz, startkaj endanstataŭe de leftkaj right.

Formoj

Aldonitaj novaj ŝvebaj formoj! Ni reklamis la ekzemplon de Ŝvebaj etikedoj al plene subtenataj formkomponentoj. Vidu la novan paĝon Ŝvebaj etikedoj.
Rompante Plifirmigitaj denaskaj kaj kutimaj formalementoj. Markobutonoj, radioj, elektoj kaj aliaj enigaĵoj, kiuj havis indiĝenajn kaj kutimajn klasojn en v4, estis firmigitaj. Nun preskaŭ ĉiuj niaj formelementoj estas tute kutimaj, plej multe sen bezono de kutima HTML.
- .custom-control.custom-checkboxestas nun .form-check.
- .custom-control.custom-custom-radioestas nun .form-check.
- .custom-control.custom-switchestas nun .form-check.form-switch.
- .custom-selectestas nun .form-select.
- .custom-filekaj .form-fileestis anstataŭigitaj per kutimaj stiloj aldone al .form-control.
- .custom-rangeestas nun .form-range.
- Faligita denaska .form-control-filekaj .form-control-range.
RompanteFaligis .input-group-appendkaj .input-group-prepend. Vi nun povas nur aldoni butonojn kaj .input-group-textkiel rektajn filojn de la enigogrupoj.
La longdaŭra Mankanta limradiuso sur eniggrupo kun validuma reago-cimo estas finfine riparita aldonante plian .has-validationklason al eniggrupoj kun validumado.
Rompante Faligis formospecifajn aranĝajn klasojn por nia kradsistemo. Uzu nian kradon kaj ilojn anstataŭ .form-group, .form-row, aŭ .form-inline.
RompanteFormetikedoj nun postulas .form-label.
Rompante .form-textne plu aroj display, permesante al vi krei enlinian aŭ bloki helptekston kiel vi deziras nur ŝanĝante la HTML-elementon.
Formkontroloj ne plu uzataj fiksitaj heightkiam eblas, anstataŭe prokrastante min-heightpor plibonigi personigon kaj kongruon kun aliaj komponantoj.
Konfirmikonoj ne plu estas aplikataj al <select>s kun multiple.
Rearanĝitaj fontaj Sass-dosieroj sub scss/forms/, inkluzive de eniggrupo-stiloj.

Komponentoj

Unuigitaj paddingvaloroj por atentigoj, panetoj, kartoj, falmenuoj, listgrupoj, modaloj, popovers kaj konsiletoj baziĝos sur nia $spacervariablo. Vidu #30564 .

Akordiono

Aldonita nova akordiona komponanto .

Atentigoj

Atentigoj nun havas ekzemplojn kun ikonoj .
Forigitaj kutimaj stiloj por <hr>s en ĉiu atentigo ĉar ili jam uzas currentColor.

Insignoj

RompanteForigis ĉiujn .badge-*kolorajn klasojn por fonaj utilecoj (ekz., uzu .bg-primaryanstataŭ .badge-primary).
RompanteForigita .badge-pill— uzu la .rounded-pillilon anstataŭe.
RompanteForigis ŝvebajn kaj fokusajn stilojn por <a>kaj <button>elementoj.
Pliigita defaŭlta kompletigo por insignoj de .25em/ .5emal .35em/ .65em.

Panpecetoj

Simpligis la defaŭltan aspekton de panpecetoj per forigo de padding, background-colorkaj border-radius.
Aldonita nova CSS kutima posedaĵo --bs-breadcrumb-dividerpor facila personigo sen neceso rekompili CSS.

Butonoj

Rompante Ŝaltigi butonojn , kun markobutonoj aŭ radioj, ne plu postulas JavaScript kaj havas novan markadon. Ni ne plu postulas envolvan elementon, aldonu.btn-checkal la<input>, kaj parigu ĝin kun iuj.btnklasoj sur la<label>. Vidu #30650 . La dokumentoj por ĉi tio translokiĝis de nia paĝo Butonoj al la nova sekcio Formoj.
Rompante Forigita .btn-blockpro utilecoj. Anstataŭ uzi .btn-blocksur la .btn, envolvu viajn butonojn per .d-gridkaj .gap-*ilo por interspacigi ilin laŭbezone. Ŝanĝu al respondemaj klasoj por eĉ pli da kontrolo super ili. Legu la dokumentojn por kelkaj ekzemploj.
Ĝisdatigis niajn button-variant()kaj button-outline-variant()miksaĵojn por subteni pliajn parametrojn.
Ĝisdatigitaj butonoj por certigi pliigitan kontraston sur ŝvebado kaj aktivaj statoj.
Malebligitaj butonoj nun havas pointer-events: none;.

Karto

RompanteFaligita .card-decken favoro de nia krado. Envolvu viajn kartojn en kolumnklasoj kaj aldonu gepatran .row-cols-*ujon por rekrei kartferdekojn (sed kun pli da kontrolo pri respondema vicigo).
RompanteFaligita .card-columnsen favoro de Masonería. Vidu #28922 .
RompanteAnstataŭigis la .cardbazitan akordionon per nova Akordiono-komponento .

Karuselo

Aldonita nova .carousel-darkvarianto por malhelaj tekstoj, kontroloj kaj indikiloj (bonegaj por pli helaj fonoj).
Anstataŭigis ĉevronajn ikonojn por karuselaj kontroloj per novaj SVG-oj de Bootstrap-Ikonoj .

Fermi butonon

RompanteAlinomite .closeal .btn-closepor malpli ĝenerala nomo.
Fermaj butonoj nun uzas background-image(enigitan SVG) anstataŭ a ×en la HTML, ebligante pli facilan personigon sen neceso tuŝi vian markadon.
Aldonita nova .btn-close-whitevarianto kiu uzas filter: invert(1)por ebligi pli altan kontraston forĵeti ikonojn kontraŭ pli malhelaj fonoj.

Kolapso

Forigita rulankro por akordionoj.

Dropdowns

Aldonita nova .dropdown-menu-darkvarianto kaj rilataj variabloj por laŭpetaj malhelaj menuroj.
Aldonita nova variablo por $dropdown-padding-x.
Mallumigis la menudividilon por plibonigita kontrasto.
RompanteĈiuj eventoj por la falmenuo nun estas deĉenigitaj sur la menubutono baskulo kaj tiam bobelis supren al la gepatra elemento.
Falmenuoj nun havas data-bs-popper="static"atributon agordita kiam la poziciigado de la falmenuo estas senmova, aŭ falmenuo estas en la navigadbreto. Ĉi tio estas aldonita de nia JavaScript kaj helpas nin uzi kutimajn poziciostilojn sen malhelpi la poziciigon de Popper.
RompanteFaligita flipopcio por falmenuo kromaĵo favore al indiĝena Popper-agordo. Vi nun povas malŝalti la renversigan konduton pasigante malplenan tabelon por fallbackPlacementsopcio en flip modifilo.
Falmenuoj nun povas esti klakeblaj kun nova autoCloseopcio por trakti la aŭtomatan ferman konduton . Vi povas uzi ĉi tiun opcion por akcepti la klakon ene aŭ ekster la falmenuo por fari ĝin interaga.
Dropdowns nun subtenas .dropdown-items envolvitaj en <li>s.

Jumbotron

RompanteFaligis la jumbotron-komponenton ĉar ĝi povas esti reproduktita kun servaĵoj. Vidu nian novan ekzemplon de Jumbotron por pruvo.

Listo grupo

Aldonita nova .list-group-numberedmodifilo al listgrupoj.

Navs kaj langetoj

Aldonitaj novaj nullvariabloj por font-size, font-weight, color, kaj :hover coloral la .nav-linkklaso.

Navbaroj

RompanteNavbaroj nun postulas ujon ene (por draste simpligi interspacipostulojn kaj CSS necesas).
RompanteLa .activeklaso ne plu povas esti aplikata al .nav-items, ĝi devas esti aplikata rekte sur .nav-links.

Eksterkanvaso

Aldonis la novan offcanvas-komponenton .

Paĝigo

Paĝigaj ligiloj nun havas agordeblajn margin-left, kiuj estas dinamike rondigitaj en ĉiuj anguloj kiam ili estas apartigitaj unu de la alia.
Aldonita transitions al paĝigo ligiloj.

Popovers

RompanteAlinomite .arrowal .popover-arrowen nia defaŭlta popover ŝablono.
Renomita whiteListopcio al allowList.

Ŝpiniloj

Ŝpinistoj nun honoras prefers-reduced-motion: reducemalrapidigante kuraĝigojn. Vidu #31882 .
Plibonigita spinner vertikala vicigo.

Tostoj

Tostoj nun povas esti poziciigitaj en a .toast-containerhelpe de poziciiga utilecoj .
Ŝanĝita defaŭlta rostpandaŭro al 5 sekundoj.
Forigita overflow: hiddende tostoj kaj anstataŭigita per propraj border-radiuss kun calc()funkcioj.

Konsiletoj

RompanteAlinomite .arrowal .tooltip-arrowen nia defaŭlta konsileto ŝablono.
RompanteLa defaŭlta valoro por la fallbackPlacementsestas ŝanĝita al ['top', 'right', 'bottom', 'left']por pli bona lokigo de popper-elementoj.
RompanteRenomita whiteListopcio al allowList.

Utilaĵoj

RompanteRenomis plurajn ilojn por uzi logikajn posednomojn anstataŭ direktajn nomojn kun la aldono de RTL-subteno:
- Renomita .left-*kaj .right-*al .start-*kaj .end-*.
- Renomita .float-leftkaj .float-rightal .float-startkaj .float-end.
- Renomita .border-leftkaj .border-rightal .border-startkaj .border-end.
- Renomita .rounded-leftkaj .rounded-rightal .rounded-startkaj .rounded-end.
- Renomita .ml-*kaj .mr-*al .ms-*kaj .me-*.
- Renomita .pl-*kaj .pr-*al .ps-*kaj .pe-*.
- Renomita .text-leftkaj .text-rightal .text-startkaj .text-end.
RompanteMalebligitaj negativaj marĝenoj defaŭlte.
Aldonita nova .bg-bodyklaso por rapide agordi la <body>fonon al pliaj elementoj.
Aldonitaj novaj poziciaj utilecoj por top, right, bottom, kaj left. Valoroj inkluzivas 0, 50%, kaj 100%por ĉiu posedaĵo.
Aldonitaj novaj .translate-middle-x& .translate-middle-yutilecoj por horizontale aŭ vertikale centri absolutajn/fiksajn poziciigitajn elementojn.
Aldonitaj novaj border-widthutilecoj .
RompanteRenomite .text-monospaceal .font-monospace.
RompanteForigita .text-hideĉar ĝi estas malnoviĝinta metodo por kaŝi tekston, kiu ne plu uzu.
Aldonitaj .fs-*iloj por font-sizeutilecoj (kun RFS ebligita). Tiuj uzas la saman skalon kiel la defaŭltaj titoloj de HTML (1-6, grandaj ĝis malgrandaj), kaj povas esti modifitaj per Sass-mapo.
RompanteRenomitaj .font-weight-*utilecoj kiel .fw-*por koncizeco kaj konsistenco.
RompanteRenomitaj .font-style-*utilecoj kiel .fst-*por koncizeco kaj konsistenco.
Aldonita .d-gridpor montri ilojn kaj novajn gapilojn ( .gap) por CSS-Krado kaj flekskesto-aranĝoj.
RompanteForigis .rounded-smkaj rounded-lg, kaj enkondukis novan skalon de klasoj, .rounded-0al .rounded-3. Vidu #31687 .
Aldonitaj novaj line-heightiloj: .lh-1, .lh-sm, .lh-basekaj .lh-lg. Vidu ĉi tie .
Movis la .d-noneilon en nia CSS por doni al ĝi pli da pezo super aliaj montraj iloj.
Etendis la .visually-hidden-focusablehelpanton por labori ankaŭ sur ujoj, uzante :focus-within.

Helpantoj

Rompante Respondema enkonstruaj helpantoj estis renomitaj al proporciaj helpantoj kun novaj klasnomoj kaj plibonigitaj kondutoj, same kiel helpema CSS-variablo.
- Klasoj estis renomitaj por ŝanĝi byal xen la bildformato. Ekzemple, .ratio-16by9estas nun .ratio-16x9.
- Ni forigis la .embed-responsive-itemelektilon kaj elemento-grupon favore al pli simpla .ratio > *elektilo. Ne plu necesas klaso, kaj la proporcia helpilo nun funkcias kun iu ajn HTML-elemento.
- La$embed-responsive-aspect-ratios Sass-mapo estis renomita al $aspect-ratioskaj ĝiaj valoroj estis simpligitaj por inkludi la klasnomon kaj la procenton kiel la key: valueparo.
- CSS-variabloj nun estas generitaj kaj inkluditaj por ĉiu valoro en la Sass-mapo. Modifi la --bs-aspect-ratiovariablon sur la .ratiopor krei ajnan propran bildformaton .
Rompante "Ekranlegilo" klasoj nun estas "vide kaŝitaj" klasoj .
- Ŝanĝis la Sass-dosieron de scss/helpers/_screenreaders.scssalscss/helpers/_visually-hidden.scss
- Renomita .sr-onlykaj .sr-only-focusableal .visually-hiddenkaj.visually-hidden-focusable
- Alinomite sr-only()kaj sr-only-focusable()miksas al visually-hidden()kaj visually-hidden-focusable().
bootstrap-utilities.cssnun ankaŭ inkluzivas niajn helpantojn. Helpantoj ne plu bezonas esti importitaj en kutimaj konstruoj.

JavaScript

Forigis jQuery-dependecon kaj reverkis kromaĵojn por esti en regula JavaScript.
RompanteDatumaj atributoj por ĉiuj JavaScript-kromaĵoj nun estas nomspacigitaj por helpi distingi Bootstrap-funkciecon de triaj kaj via propra kodo. Ekzemple, ni uzas data-bs-toggleanstataŭ data-toggle.
Ĉiuj kromprogramoj nun povas akcepti CSS-elektilon kiel la unuan argumenton. Vi povas aŭ preterpasi DOM-elementon aŭ ajnan validan CSS-elektilon por krei novan ekzemplon de la kromaĵo:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigpovas esti pasita kiel funkcio kiu akceptas la defaŭltan Popper-agordon de Bootstrap kiel argumenton, por ke vi povu kunfandi ĉi tiun defaŭltan agordon laŭ via maniero. Validas por falmenuoj, popovers kaj konsiletoj.
La defaŭlta valoro por la fallbackPlacementsestas ŝanĝita al ['top', 'right', 'bottom', 'left']por pli bona lokigo de Popper-elementoj. Validas por falmenuoj, popovers kaj konsiletoj.
Forigita substreko de publikaj senmovaj metodoj kiel _getInstance()→ getInstance().