S'està migrant a la v5

Feu un seguiment i reviseu els canvis als fitxers font, la documentació i els components d'Bootstrap per ajudar-vos a migrar de la v4 a la v5.

En aquesta pàgina

v5.2.0

Disseny renovat

Bootstrap v5.2.0 inclou una actualització de disseny subtil per a un grapat de components i propietats del projecte, sobretot a través border-radiusde valors refinats en botons i controls de formulari . La nostra documentació també s'ha actualitzat amb una nova pàgina d'inici, un disseny de documents més senzill que ja no col·lapsa les seccions de la barra lateral i exemples més destacats d' icones d'arrencada .

Més variables CSS

Hem actualitzat tots els nostres components per utilitzar variables CSS. Tot i que Sass encara ho sustenta tot, cada component s'ha actualitzat per incloure variables CSS a les classes base de components (per exemple, .btn), permetent una personalització més en temps real de Bootstrap. En versions posteriors, continuarem ampliant el nostre ús de variables CSS al nostre disseny, formularis, ajudants i utilitats. Obteniu més informació sobre les variables CSS de cada component a les seves respectives pàgines de documentació.

El nostre ús de variables CSS estarà una mica incomplet fins a Bootstrap 6. Tot i que ens agradaria implementar-les completament a tots els nivells, corren el risc de provocar canvis trencadors. Per exemple, la configuració $alert-border-width: var(--bs-border-width)del nostre codi font trenca el potencial Sass del vostre propi codi si ho feu $alert-border-width * 2per algun motiu.

Com a tal, sempre que sigui possible, continuarem impulsant més variables CSS, però reconeixeu que la nostra implementació pot estar lleugerament limitada a la v5.

Nou`_maps.scss`

Bootstrap v5.2.0 va introduir un nou fitxer Sass amb _maps.scss. Treu diversos mapes de Sass _variables.scssper solucionar un problema en què les actualitzacions d'un mapa original no s'aplicaven als mapes secundaris que els estenen. Per exemple, les actualitzacions de $theme-colorsno s'estaven aplicant a altres mapes temàtics que es basaven en $theme-colors, trencant els fluxos de treball de personalització clau. En resum, Sass té una limitació en la qual un cop s'ha utilitzat una variable o un mapa per defecte , no es pot actualitzar. Hi ha una deficiència similar amb les variables CSS quan s'utilitzen per compondre altres variables CSS.

És per això que les personalitzacions variables a Bootstrap han de venir després @import "functions", però abans @import "variables"i la resta de la nostra pila d'importació. El mateix s'aplica als mapes Sass: heu de substituir els valors predeterminats abans que s'utilitzin. Els mapes següents s'han mogut al nou _maps.scss:

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

Les vostres compilacions personalitzades de Bootstrap CSS ara haurien de semblar així amb una importació de mapes independent.

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

Noves utilitats

font-weightUtilitats ampliades per incloure .fw-semibold-hi els tipus de lletra en seminegreta.
border-radiusUtilitats ampliades per incloure dues mides noves .rounded-4i .rounded-5, per a més opcions.

Canvis addicionals

S'ha introduït una nova $enable-container-classesopció. — Ara, quan opteu per la disposició experimental de la quadrícula CSS, .container-*les classes encara es compilaran, tret que aquesta opció estigui establerta a false. Els contenidors també mantenen ara els seus valors de canal.
El component Offcanvas ara té variacions sensibles . La .offcanvasclasse original es manté sense canvis: amaga el contingut a totes les finestres. Perquè respongui, canvieu aquesta .offcanvasclasse a qualsevol .offcanvas-{sm|md|lg|xl|xxl}classe.
Els divisors de taules més gruixuts ara s'han activat. — Hem eliminat la vora més gruixuda i més difícil d'anul·lar entre els grups de taules i l'hem mogut a una classe opcional que podeu aplicar, .table-group-divider. Vegeu els documents de la taula per obtenir un exemple.
Scrollspy s'ha reescrit per utilitzar l'API Intersection Observer , la qual cosa significa que ja no necessiteu embolcalls primaris relatius, laoffsetconfiguració obsoleta i molt més. Busqueu que les vostres implementacions de Scrollspy siguin més precises i coherents en el ressaltat de navegació.
Les finestres emergents i els consells sobre eines ara utilitzen variables CSS. Algunes variables CSS s'han actualitzat a partir dels seus homòlegs de Sass per reduir el nombre de variables. Com a resultat, tres variables han quedat obsoletes en aquesta versió: $popover-arrow-color, $popover-arrow-outer-color, i $tooltip-arrow-color.
S'han afegit nous .text-bg-{color}ajudants. En lloc d'establir individuals .text-*i .bg-*utilitats, ara podeu utilitzar els .text-bg-*ajudants per establir un background-colorprimer pla contrastant color.
S'ha afegit .form-check-reverseun modificador per canviar l'ordre de les etiquetes i les caselles de selecció/ràdios associades.
S'ha afegit suport de columnes amb ratlles a les taules mitjançant la nova .table-striped-columnsclasse.

Per obtenir una llista completa de canvis, consulteu el projecte v5.2.0 a GitHub .

v5.1.0

S'ha afegit suport experimental per al disseny de la quadrícula CSS . — Aquest és un treball en curs i encara no està llest per a l'ús de producció, però podeu optar per la nova funció mitjançant Sass. Per activar-lo, desactiveu la quadrícula predeterminada, configurant $enable-grid-classes: falsei habilitant la quadrícula CSS configurant $enable-cssgrid: true.
Barres de navegació actualitzades per admetre offcanvas. — Afegiu calaixos fora del llenç a qualsevol barra de navegació amb les .navbar-expand-*classes responsives i algunes marques fora del llenç.
S'ha afegit un nou component de marcador de posició . — El nostre component més recent, una manera de proporcionar bloquejos temporals en lloc de contingut real per ajudar a indicar que alguna cosa encara s'està carregant al vostre lloc o aplicació.
El connector de col·lapse ara admet el replegament horitzontal . — Afegiu .collapse-horizontal-lo a la vostra .collapseper replegar el widthen comptes del height. Eviteu tornar a pintar el navegador configurant un min-heighto height.
S'han afegit nous ajudants de pila i regles verticals. — Apliqueu ràpidament múltiples propietats de flexbox per crear ràpidament dissenys personalitzats amb piles . Trieu entre les piles horitzontals ( .hstack) i verticals ( .vstack). Afegiu divisors verticals similars als <hr>elements amb els nous .vrajudants .
S'han afegit noves :rootvariables CSS globals. — S'han afegit diverses variables CSS noves al :rootnivell per controlar els <body>estils. S'està treballant més, incloses les nostres utilitats i components, però de moment llegiu les variables CSS a la secció Personalitza .
S'han revisat les utilitats de color i fons per utilitzar variables CSS i s'han afegit noves utilitats d'opacitat de text i d'opacitat de fons . — .text-* i .bg-*les utilitats ara es creen amb variables CSS i rgba()valors de color, cosa que us permet personalitzar fàcilment qualsevol utilitat amb noves utilitats d'opacitat.
S'han afegit nous exemples de fragments basats en mostrar com personalitzar els nostres components. — Estireu preparat per utilitzar components personalitzats i altres patrons de disseny habituals amb els nostres nous exemples de fragments . Inclou peus de pàgina , menús desplegables , grups de llista i modalitats .
S'han eliminat els estils de posicionament no utilitzats de les finestres emergents i els consells d'eines , ja que només els gestiona Popper. $tooltip-marginha estat obsolet i s'ha configurat nullen el procés.

Vols més informació? Llegiu la publicació del bloc v5.1.0.

Hola! Els canvis a la nostra primera versió important de Bootstrap 5, v5.0.0, es documenten a continuació. No reflecteixen els canvis addicionals mostrats anteriorment.

Dependències

S'ha deixat caure jQuery.
S'ha actualitzat de Popper v1.x a Popper v2.x.
S'ha substituït Libsass per Dart Sass, ja que el nostre compilador Sass donat a Libsass estava obsolet.
Hem migrat de Jekyll a Hugo per crear la nostra documentació

Suport del navegador

S'ha caigut Internet Explorer 10 i 11
S'ha caigut Microsoft Edge < 16 (Legacy Edge)
S'ha caigut Firefox <60
Safari abandonat < 12
S'ha caigut iOS Safari < 12
S'ha caigut Chrome <60

Canvis de documentació

Pàgina d'inici, disseny de documents i peu de pàgina redissenyats.
S'ha afegit una nova guia de paquets .
S'ha afegit una nova secció Personalitza , substituint la pàgina Theming de la v4 , amb nous detalls sobre Sass, opcions de configuració global, esquemes de colors, variables CSS i molt més.
S'ha reorganitzat tota la documentació del formulari en una nova secció de Formularis , dividint el contingut en pàgines més centrades.
De la mateixa manera, s'ha actualitzat la secció Disseny , per concretar el contingut de la quadrícula amb més claredat.
S'ha canviat el nom de la pàgina del component "Navs" a "Navs & Tabs".
S'ha canviat el nom de la pàgina "Checks" a "Checks i ràdios".
S'ha redissenyat la barra de navegació i s'ha afegit un nou subnav per facilitar la navegació pels nostres llocs i versions de documents.
S'ha afegit una nova drecera de teclat per al camp de cerca: Ctrl + /.

Sass

Hem abandonat les combinacions de mapes Sass predeterminades per facilitar l'eliminació de valors redundants. Tingueu en compte que ara heu de definir tots els valors dels mapes Sass com $theme-colors. Consulteu com tractar amb els mapes Sass .
TrencamentS'ha canviat el nom color-yiq()de la funció i les variables relacionades perquè color-contrast()ja no està relacionada amb l'espai de color YIQ. Veure #30168.
- $yiq-contrasted-thresholdes rebateja per $min-contrast-ratio.
- $yiq-text-darki $yiq-text-lightes canvien de nom respectivament a $color-contrast-darki $color-contrast-light.
TrencamentEls paràmetres de mixins de consulta de mitjans han canviat per a un enfocament més lògic.
- media-breakpoint-down()utilitza el mateix punt d'interrupció en comptes del següent punt d'interrupció (p. ex., media-breakpoint-down(lg)en comptes d' media-breakpoint-down(md)orientar les finestres més petites que lg).
- De la mateixa manera, el segon paràmetre a media-breakpoint-between()també utilitza el punt d'interrupció en comptes del següent punt d'interrupció (p. ex., media-between(sm, lg)en comptes de les media-breakpoint-between(sm, md)finestres físiques entre smi lg).
TrencamentS'han eliminat els estils d'impressió i la $enable-print-stylesvariable. Encara hi ha classes d'impressió. Veure #28339 .
TrencamentS'han deixat caure color(), theme-color(), i gray()funcions a favor de variables. Veure #29083 .
TrencamentS'ha canviat el nom theme-color-level()de la funció color-level()i ara accepta qualsevol color que vulgueu en comptes de només $theme-colorcolors. Vegeu #29083 Compte: color-level() es va deixar més tard a v5.0.0-alpha3.
TrencamentReanomenat $enable-prefers-reduced-motion-media-queryi $enable-pointer-cursor-for-buttonsa $enable-reduced-motioni $enable-button-pointersper a la brevetat.
TrencamentS'ha eliminat el bg-gradient-variant()mixin. Utilitzeu la .bg-gradientclasse per afegir degradats als elements en lloc de les .bg-gradient-*classes generades.
Trencament S'han eliminat mixins anteriorment obsolets:
- hover, hover-focus, plain-hover-focus, ihover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(també va deixar caure la classe d'utilitat associada, .text-hide)
- visibility()
- form-control-focus()
TrencamentS'ha canviat el nom scale-color()de la funció a shift-color()per evitar la col·lisió amb la funció d'escala de color de Sass.
box-shadowEls mixins ara permeten nullvalors i eliminar -los nonede diversos arguments. Veure #30394 .
El border-radius()mixin ara té un valor per defecte.

Sistema de color

El sistema de color que funcionava color-level()i $theme-color-intervales va eliminar a favor d'un nou sistema de color. Totes les funcions lighten()i darken()de la nostra base de codi es substitueixen per tint-color()i shade-color(). Aquestes funcions barrejaran el color amb blanc o negre en lloc de canviar-ne la lluminositat en una quantitat fixa. shift-color()Tindrà o matisarà un color depenent de si el seu paràmetre de pes és positiu o negatiu . Vegeu #30622 per a més detalls.
S'han afegit nous matisos i matisos per a cada color, proporcionant nou colors separats per a cada color base, com a noves variables de Sass.
Contrast de color millorat. Relació de contrast de color augmentada de 3:1 a 4,5:1 i colors blau, verd, cian i rosa actualitzats per garantir el contrast WCAG 2.1 AA. També hem canviat el nostre color de contrast de color de $gray-900a $black.
Per donar suport al nostre sistema de color, hem afegit nous personalitzats tint-color()i shade-color()funcions per barrejar els nostres colors adequadament.

Actualitzacions de la graella

Nou punt d'interrupció! S'ha afegit un nou xxlpunt d'interrupció per 1400pxi amunt. No hi ha canvis a la resta de punts d'interrupció.
Canals millorats. Els canalons ara s'estableixen en rems i són més estrets que v4 ( 1.5rem, o aproximadament 24px, a partir de 30px). Això alinea els canals del nostre sistema de xarxa amb les nostres utilitats d'espaiat.
- S'ha afegit una nova classe de canalons ( .g-*, .gx-*, i .gy-*) per controlar canalons horitzontals/verticals, canalons horitzontals i canalons verticals.
- TrencamentS'ha canviat el nom .no-guttersa .g-0perquè coincideixi amb les noves utilitats de canalons.
Les columnes ja no s'han position: relativeaplicat, de manera que és possible que hàgiu d'afegir .position-relativealguns elements per restaurar aquest comportament.
TrencamentVa deixar diverses .order-*classes que sovint no s'utilitzaven. Ara només proporcionem .order-1a .order-5fora de la caixa.
TrencamentS'ha deixat caure el .mediacomponent, ja que es pot replicar fàcilment amb utilitats. Vegeu #28265 i la pàgina d'utilitats flexibles per obtenir un exemple .
Trencament bootstrap-grid.cssara només s'aplica box-sizing: border-boxa la columna en lloc de restablir la mida global de la caixa. D'aquesta manera, els nostres estils de quadrícula es poden utilitzar en més llocs sense interferències.
$enable-grid-classesja no desactiva la generació de classes de contenidors. Veure #29146.
S'ha actualitzat el make-colmixin per defecte a columnes iguals sense una mida especificada.

Contingut, reinici, etc

RFS ara està habilitat per defecte. Els encapçalaments que utilitzen elfont-size()mixin s'ajustaran automàticamentfont-sizea escala amb la finestra gràfica. Aquesta funció anteriorment estava activada amb la v4.
TrencamentHem revisat la nostra tipografia de visualització per substituir les nostres $display-*variables i amb un $display-font-sizesmapa Sass. També s'han eliminat les $display-*-weightvariables individuals per a un únic $display-font-weighti ajustat font-size.
S'han afegit dues .display-*mides d'encapçalament noves .display-5i .display-6.
Els enllaços es subratllen de manera predeterminada (no només al passar el cursor), tret que formen part de components específics.
S'han redissenyat taules per actualitzar els seus estils i reconstruir-los amb variables CSS per obtenir més control sobre l'estil.
TrencamentLes taules imbricades ja no hereten estils.
Trencament .thead-lighti .thead-darks'eliminen a favor de les .table-*classes variants que es poden utilitzar per a tots els elements de la taula ( thead, tbody, tfoot, tri ) th.td
TrencamentEl table-row-variant()mixin es canvia de nom table-variant()i només accepta 2 paràmetres: $color(nom del color) i $value(codi de color). El color de la vora i els colors d'accent es calculen automàticament a partir de les variables del factor de la taula.
Dividiu les variables de farciment de cel·les de la taula en -yi -x.
TrencamentClasse abandonada .pre-scrollable. Veure #29135
Trencament .text-*Les utilitats ja no afegeixen estats de flotació i focus als enllaços. .link-*En el seu lloc, es poden utilitzar classes auxiliars. Veure #29267
TrencamentClasse abandonada .text-justify. Veure #29793
Trencament <hr>Els elements ara s'utilitzen heighten lloc de borderper donar suport millor a l' sizeatribut. Això també permet l'ús d'utilitats de farciment per crear divisors més gruixuts (p. ex., <hr class="py-1">).
Restableix l'horitzontal predeterminat i padding-leftels elements del navegador a .<ul><ol>40px2rem
S'ha afegit $enable-smooth-scroll, que s'aplica scroll-behavior: smootha nivell mundial, excepte per als usuaris que demanen un moviment reduït mitjançant prefers-reduced-motionla consulta de mitjans. Veure #31877

RTL

Les variables específiques de direcció horitzontal, les utilitats i els mixins s'han canviat de nom per utilitzar propietats lògiques com les que es troben als dissenys de flexbox, per exemple, starti enden lloc de lefti right.

Formes

S'han afegit nous formularis flotants! Hem promocionat l'exemple d'etiquetes flotants a components de formulari totalment compatibles. Consulteu la nova pàgina d'etiquetes flotants.
Trencament Elements de formulari nadius i personalitzats consolidats. S'han consolidat les caselles de selecció, les ràdios, les seleccions i altres entrades que tenien classes natives i personalitzades a la v4. Ara gairebé tots els nostres elements de formulari són totalment personalitzats, la majoria sense necessitat d'HTML personalitzat.
- .custom-control.custom-checkboxés ara .form-check.
- .custom-control.custom-custom-radioés ara .form-check.
- .custom-control.custom-switchés ara .form-check.form-switch.
- .custom-selectés ara .form-select.
- .custom-filei .form-filehan estat substituïts per estils personalitzats a la part superior de .form-control.
- .custom-rangeés ara .form-range.
- Caigut nadiu .form-control-filei .form-control-range.
TrencamentCaigut .input-group-appendi .input-group-prepend. Ara només podeu afegir botons i .input-group-textcom a fills directes dels grups d'entrada.
Finalment, es corregeix el radi de la vora desaparegut al grup d'entrada amb un error de validació afegint una .has-validationclasse addicional als grups d'entrada amb validació.
Trencament S'han eliminat les classes de disseny específiques del formulari per al nostre sistema de quadrícula. Utilitzeu la nostra xarxa i les nostres utilitats en lloc de .form-group, .form-row, o .form-inline.
TrencamentLes etiquetes dels formularis ara requereixen .form-label.
Trencament .form-textja no estableix display, la qual cosa us permet crear text d'ajuda en línia o bloquejar com vulgueu només canviant l'element HTML.
Els controls de formulari ja no s'utilitzen arreglats heightquan és possible, sinó que s'aferren min-heightper millorar la personalització i la compatibilitat amb altres components.
Les icones de validació ja no s'apliquen a <select>s amb multiple.
S'han reordenat els fitxers Sass d'origen a scss/forms/, inclosos els estils de grup d'entrada.

Components

Valors unificats paddingper a alertes, mides de navegació, targetes, desplegables, grups de llistes, modalitats, popovers i informació sobre eines que es basen en la nostra $spacervariable. Veure #30564 .

Acordió

S'ha afegit un nou component d'acordió .

Alertes

Les alertes ara tenen exemples amb icones .
S'han eliminat els estils personalitzats per a <hr>s a cada alerta ja que ja utilitzen currentColor.

Insígnies

TrencamentS'han eliminat totes .badge-*les classes de color per a les utilitats de fons (p. ex., utilitzar .bg-primaryen lloc de .badge-primary).
TrencamentEliminat : .badge-pillutilitzeu la .rounded-pillutilitat.
TrencamentS'han eliminat els estils de desplaçament i focus per als elements <a>i <button>.
S'ha augmentat el farciment predeterminat per a les insígnies de .25em/ .5ema .35em/ .65em.

Pa ratllat

S'ha simplificat l'aspecte predeterminat de les ratlles de pa eliminant padding, background-colori border-radius.
S'ha afegit una nova propietat personalitzada CSS --bs-breadcrumb-dividerper a una personalització fàcil sense necessitat de recompilar CSS.

Botons

Trencament Els botons de commutació , amb caselles de selecció o ràdios, ja no requereixen JavaScript i tenen un marcatge nou. Ja no necessitem un element d'embolcall, afegir.btn-check-lo a<input>, i emparellar-lo amb cap.btnclasse de<label>. Veure #30650 . Els documents per a això s'han mogut de la nostra pàgina de botons a la nova secció de formularis.
Trencament Abandonat .btn-blockper serveis públics. En lloc d'utilitzar .btn-blocka .btn, emboliqui els botons amb .d-griduna .gap-*utilitat per espaiar-los segons sigui necessari. Canvia a classes responsives per controlar-les encara més. Llegiu els documents per obtenir alguns exemples.
Hem actualitzat els nostres button-variant()i button-outline-variant()mixins per admetre paràmetres addicionals.
S'han actualitzat els botons per garantir un contrast més gran en els estats actius i en passar el cursor.
Els botons desactivats ara tenen pointer-events: none;.

Targeta

TrencamentCaigut .card-decka favor de la nostra graella. Emboliqueu les vostres cartes en classes de columnes i afegiu un .row-cols-*contenidor principal per recrear les baralles de cartes (però amb més control sobre l'alineació sensible).
TrencamentAbandonat .card-columnsa favor de la Maçoneria. Veure #28922 .
TrencamentS'ha substituït l' .cardacordió basat per un nou component d'acordió .

Carrusel

S'ha afegit una nova .carousel-darkvariant per a text fosc, controls i indicadors (ideal per a fons més clars).
S'han substituït les icones de chevron per als controls de carrusel amb nous SVG de Bootstrap Icons .

Botó de tancament

TrencamentS'ha canviat de nom .closeper .btn-closea un nom menys genèric.
Els botons de tanca ara utilitzen un background-image(SVG incrustat) en lloc d'un ×a l'HTML, cosa que permet una personalització més fàcil sense necessitat de tocar el vostre marcatge.
S'ha afegit una nova .btn-close-whitevariant que s'utilitza filter: invert(1)per habilitar les icones d'ignorar un contrast més alt sobre fons més foscos.

Col·lapse

S'ha eliminat l'ancoratge de desplaçament per als acordions.

Desplegables

S'ha afegit una nova .dropdown-menu-darkvariant i variables associades per als menús desplegables foscos sota demanda.
S'ha afegit una nova variable per a $dropdown-padding-x.
S'ha enfosquit el divisor desplegable per millorar el contrast.
TrencamentTots els esdeveniments del menú desplegable s'activen ara al botó de commutació del menú desplegable i, a continuació, s'envien a l'element principal.
Els menús desplegables ara tenen un data-bs-popper="static"atribut definit quan el posicionament del desplegable és estàtic o quan el desplegable es troba a la barra de navegació. Això s'afegeix amb el nostre JavaScript i ens ajuda a utilitzar estils de posició personalitzats sense interferir amb el posicionament de Popper.
TrencamentOpció abandonada flipper al complement desplegable a favor de la configuració nativa de Popper. Ara podeu desactivar el comportament d'invertir passant una matriu buida per a fallbackPlacementsl'opció al modificador de volteig .
Ara es pot fer clic als menús desplegables amb una nova autoCloseopció per gestionar el comportament de tancament automàtic . Podeu utilitzar aquesta opció per acceptar el clic dins o fora del menú desplegable per fer-lo interactiu.
Els desplegables ara admeten .dropdown-items embolcallats en <li>s.

Jumbotron

TrencamentS'ha eliminat el component jumbotron ja que es pot replicar amb utilitats. Vegeu el nostre nou exemple de Jumbotron per obtenir una demostració.

Grup de llista

S'ha afegit un .list-group-numberedmodificador nou als grups de llista.

Navegacions i pestanyes

S'han afegit noves nullvariables per a font-size, font-weight, colori :hover colora la .nav-linkclasse.

Barres de navegació

TrencamentLes barres de navegació ara requereixen un contenidor dins (per simplificar dràsticament els requisits d'espaiat i cal CSS).
TrencamentLa .activeclasse ja no es pot aplicar a .nav-itemla s, s'ha d'aplicar directament a .nav-linkla s.

Offcanvas

S'ha afegit el nou component offcanvas .

Paginació

Els enllaços de paginació ara es poden personalitzar margin-lefti s'arrodonien dinàmicament a totes les cantonades quan estan separats entre si.
S'han afegit transitions als enllaços de paginació.

Popovers

TrencamentS'ha canviat el nom .arrowa .popover-arrowla nostra plantilla popover predeterminada.
S'ha canviat el nom whiteListde l'opció a allowList.

Spiners

Els spinners ara honoren prefers-reduced-motion: reducealentint les animacions. Veure #31882 .
Alineació vertical millorada del spinner.

Torrades

Ara les torrades es poden col·locar en un .toast-containeramb l'ajuda de les utilitats de posicionament .
S'ha canviat la durada predeterminada del brindis a 5 segons.
Tret overflow: hiddende les torrades i substituït per s adequats border-radiusamb calc()funcions.

Consells d'eines

TrencamentS'ha canviat el nom .arrowa .tooltip-arrowla nostra plantilla d'informació eines predeterminada.
TrencamentEl valor per defecte fallbackPlacementses canvia a ['top', 'right', 'bottom', 'left']per a una millor col·locació dels elements popper.
TrencamentS'ha canviat el nom whiteListde l'opció a allowList.

Utilitats

TrencamentS'han canviat el nom de diverses utilitats per utilitzar noms de propietats lògiques en lloc de noms direccionals amb l'addició de suport RTL:
- S'ha canviat de nom .left-*i .right-*a .start-*i .end-*.
- S'ha canviat de nom .float-lefti .float-righta .float-starti .float-end.
- S'ha canviat de nom .border-lefti .border-righta .border-starti .border-end.
- S'ha canviat de nom .rounded-lefti .rounded-righta .rounded-starti .rounded-end.
- S'ha canviat de nom .ml-*i .mr-*a .ms-*i .me-*.
- S'ha canviat de nom .pl-*i .pr-*a .ps-*i .pe-*.
- S'ha canviat de nom .text-lefti .text-righta .text-starti .text-end.
TrencamentS'han desactivat els marges negatius de manera predeterminada.
S'ha afegit una nova .bg-bodyclasse per establir ràpidament el <body>fons de '' a elements addicionals.
S'han afegit noves utilitats de posició per a top, right, bottomi left. Els valors inclouen 0, 50%, i 100%per a cada propietat.
S'han afegit nous .translate-middle-xi .translate-middle-yutilitats per centrar horitzontalment o verticalment elements posicionats absoluts/fixos.
S'han afegit noves border-widthutilitats .
TrencamentS'ha canviat de nom .text-monospacea .font-monospace.
TrencamentS'ha eliminat .text-hideperquè és un mètode antiquat per amagar text que ja no s'hauria d'utilitzar.
S'han afegit .fs-*utilitats per a font-sizeutilitats (amb RFS habilitat). Aquests utilitzen la mateixa escala que els encapçalaments predeterminats d'HTML (1-6, de gran a petit) i es poden modificar mitjançant el mapa Sass.
Trencament.font-weight-*Utilitats rebatejades pel que .fw-*fa a la brevetat i la coherència.
Trencament.font-style-*Utilitats rebatejades pel que .fst-*fa a la brevetat i la coherència.
S'ha afegit .d-grida les utilitats de visualització i noves gaputilitats ( .gap) per a dissenys de quadrícula CSS i flexbox.
TrencamentS'ha eliminat .rounded-smi rounded-lg, i es va introduir una nova escala de classes, .rounded-0a .rounded-3. Veure #31687 .
S'han afegit noves line-heightutilitats: .lh-1, .lh-sm, .lh-basei .lh-lg. Veure aquí .
Vam moure la .d-noneutilitat al nostre CSS per donar-li més pes sobre altres utilitats de visualització.
S'ha ampliat l' .visually-hidden-focusableajudant per treballar també en contenidors, utilitzant :focus-within.

Ajudants

Trencament Els ajudants d'inserció responsius s'han canviat de nom a ajudants de proporció amb noms de classe nous i comportaments millorats, així com una variable CSS útil.
- S'ha canviat el nom de les classes per canviar bya xla relació d'aspecte. Per exemple, .ratio-16by9és ara .ratio-16x9.
- Hem deixat caure el .embed-responsive-itemselector de grup d'elements i a favor d'un .ratio > *selector més senzill. No es necessita més classe i l'ajudant de proporció ara funciona amb qualsevol element HTML.
- S'ha $embed-responsive-aspect-ratioscanviat el nom del mapa Sass $aspect-ratiosi els seus valors s'han simplificat per incloure el nom de la classe i el percentatge com a key: valueparell.
- Ara es generen i s'inclouen variables CSS per a cada valor del mapa Sass. Modifiqueu la --bs-aspect-ratiovariable .ratioper crear qualsevol relació d'aspecte personalitzada .
Trencament Les classes de "lector de pantalla" ara són classes "ocultes visualment" .
- S'ha canviat el fitxer Sass de scss/helpers/_screenreaders.scssascss/helpers/_visually-hidden.scss
- Reanomenat .sr-onlyi .sr-only-focusablea .visually-hiddeni.visually-hidden-focusable
- S'ha canviat de nom sr-only()i sr-only-focusable()barreja a visually-hidden()i visually-hidden-focusable().
bootstrap-utilities.cssara també inclou els nostres ajudants. Els ajudants ja no s'han d'importar a les compilacions personalitzades.

JavaScript

S'ha eliminat la dependència de jQuery i s'han reescrit els connectors perquè estiguin en JavaScript normal.
TrencamentEls atributs de dades de tots els connectors de JavaScript ara tenen espais de noms per ajudar a distingir la funcionalitat Bootstrap de tercers i del vostre propi codi. Per exemple, fem servir data-bs-toggleen lloc de data-toggle.
Ara tots els connectors poden acceptar un selector CSS com a primer argument. Podeu passar un element DOM o qualsevol selector CSS vàlid per crear una nova instància del connector:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfiges pot passar com una funció que accepta la configuració de Popper per defecte de Bootstrap com a argument, de manera que pugueu combinar aquesta configuració predeterminada a la vostra manera. S'aplica a menús desplegables, finestres emergents i informació sobre eines.
El valor predeterminat fallbackPlacementses canvia a ['top', 'right', 'bottom', 'left']per a una millor col·locació dels elements Popper. S'aplica a menús desplegables, finestres emergents i informació sobre eines.
S'ha eliminat el guió baix dels mètodes estàtics públics com _getInstance()→ getInstance().