Migración a v5

Realice un seguimiento y revise los cambios en los archivos de origen, la documentación y los componentes de Bootstrap para ayudarlo a migrar de v4 a v5.

En esta página

v5.2.0

diseño renovado

Bootstrap v5.2.0 presenta una sutil actualización de diseño para un puñado de componentes y propiedades en todo el proyecto, más notablemente a través border-radiusde valores refinados en botones y controles de formulario . Nuestra documentación también se ha actualizado con una nueva página de inicio, un diseño de documentos más simple que ya no colapsa secciones de la barra lateral y ejemplos más destacados de iconos de Bootstrap .

Más variables CSS

Hemos actualizado todos nuestros componentes para usar variables CSS. Si bien Sass sigue sustentando todo, cada componente se ha actualizado para incluir variables CSS en las clases base del componente (por ejemplo, .btn), lo que permite una mayor personalización en tiempo real de Bootstrap. En versiones posteriores, continuaremos ampliando nuestro uso de variables CSS en nuestro diseño, formularios, asistentes y utilidades. Lea más sobre las variables CSS en cada componente en sus respectivas páginas de documentación.

Nuestro uso de variables CSS estará algo incompleto hasta Bootstrap 6. Si bien nos encantaría implementarlas por completo en todos los ámbitos, corren el riesgo de causar cambios importantes. Por ejemplo, la configuración $alert-border-width: var(--bs-border-width)en nuestro código fuente rompe Sass potencial en su propio código si lo estuviera haciendo $alert-border-width * 2por alguna razón.

Como tal, siempre que sea posible, continuaremos impulsando más variables CSS, pero reconozca que nuestra implementación puede estar ligeramente limitada en v5.

Nuevo`_maps.scss`

Bootstrap v5.2.0 introdujo un nuevo archivo Sass con _maps.scss. Extrae varios mapas de Sass _variables.scsspara solucionar un problema por el que las actualizaciones de un mapa original no se aplicaban a los mapas secundarios que los amplían. Por ejemplo, las actualizaciones de $theme-colorsno se estaban aplicando a otros mapas temáticos que dependían de $theme-colors, lo que interrumpía los flujos de trabajo de personalización clave. En resumen, Sass tiene una limitación en la que una vez que se ha utilizado una variable o mapa predeterminado , no se puede actualizar. Hay una deficiencia similar con las variables CSS cuando se usan para componer otras variables CSS.

Esta es la razón por la que las personalizaciones de variables en Bootstrap tienen que venir después @import "functions", pero antes, @import "variables"y el resto de nuestra pila de importación. Lo mismo se aplica a los mapas de Sass: debe anular los valores predeterminados antes de que se utilicen. Los siguientes mapas se han movido al nuevo _maps.scss:

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

Sus compilaciones personalizadas de Bootstrap CSS ahora deberían verse así con una importación de mapas separada.

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

Nuevas utilidades

font-weightUtilidades ampliadas para incluir .fw-semiboldfuentes seminegritas.
border-radiusUtilidades ampliadas para incluir dos nuevos tamaños .rounded-4y .rounded-5, para más opciones.

Cambios adicionales

$enable-container-classesNueva opción introducida . — Ahora, al optar por el diseño de cuadrícula CSS experimental, las .container-*clases aún se compilarán, a menos que esta opción esté configurada en false. Los contenedores ahora también mantienen sus valores de medianil.
El componente Offcanvas ahora tiene variaciones receptivas . La .offcanvasclase original permanece sin cambios: oculta el contenido en todas las ventanas gráficas. Para que responda, cambie esa .offcanvasclase a cualquier .offcanvas-{sm|md|lg|xl|xxl}clase.
Los divisores de mesa más gruesos ahora son opcionales. — Hemos eliminado el borde más grueso y más difícil de anular entre los grupos de tablas y lo hemos movido a una clase opcional que puede aplicar, .table-group-divider. Consulte los documentos de la tabla para ver un ejemplo.
Scrollspy se ha reescrito para usar la API de Intersection Observer , lo que significa que ya no necesita envoltorios de padres relativos,offsetconfiguración obsoleta y más. Busque que sus implementaciones de Scrollspy sean más precisas y consistentes en su resaltado de navegación.
Los popovers y la información sobre herramientas ahora usan variables CSS. Algunas variables de CSS se han actualizado desde sus contrapartes de Sass para reducir la cantidad de variables. Como resultado, tres variables han quedado obsoletas en esta versión: $popover-arrow-color, $popover-arrow-outer-colory $tooltip-arrow-color.
Se agregaron nuevos .text-bg-{color}ayudantes. En lugar de configurar utilidades individuales .text-*, .bg-*ahora puede usar los .text-bg-*ayudantes para configurar un background-colorprimer plano contrastante color.
Se agregó .form-check-reverseun modificador para cambiar el orden de las etiquetas y las casillas de verificación/radios asociadas.
Se agregó soporte de columnas rayadas a las tablas a través de la nueva .table-striped-columnsclase.

Para obtener una lista completa de cambios, consulte el proyecto v5.2.0 en GitHub .

v5.1.0

Se agregó soporte experimental para el diseño de cuadrícula CSS . — Este es un trabajo en progreso y aún no está listo para su uso en producción, pero puede optar por la nueva función a través de Sass. Para habilitarlo, deshabilite la cuadrícula predeterminada configurando $enable-grid-classes: falsey habilite CSS Grid configurando $enable-cssgrid: true.
Barras de navegación actualizadas para admitir offcanvas. — Agregue cajones offcanvas en cualquier barra de navegación con las .navbar-expand-*clases receptivas y algunas marcas fuera del lienzo.
Se agregó un nuevo componente de marcador de posición . — Nuestro componente más nuevo, una forma de proporcionar bloques temporales en lugar de contenido real para ayudar a indicar que algo aún se está cargando en su sitio o aplicación.
El complemento Collapse ahora admite el colapso horizontal . — Agregue .collapse-horizontala su .collapsepara colapsar el widthen lugar del height. Evite volver a pintar el navegador configurando a min-heighto height.
Se agregaron nuevos asistentes de reglas verticales y de pila. — Aplique rápidamente múltiples propiedades de flexbox para crear rápidamente diseños personalizados con pilas . Elija entre pilas horizontales ( .hstack) y verticales ( ). .vstackAgregue divisores verticales similares a <hr>los elementos con los nuevos .vrayudantes .
:rootSe agregaron nuevas variables CSS globales . — Se agregaron varias variables CSS nuevas al :rootnivel para controlar <body>estilos. Se están trabajando más, incluso en nuestras utilidades y componentes, pero por ahora lea las variables CSS en la sección Personalizar .
Se revisaron las utilidades de color y fondo para usar variables CSS y se agregaron nuevas utilidades de opacidad de texto y opacidad de fondo . — .text-* y .bg-*las utilidades ahora se crean con variables CSS y rgba()valores de color, lo que le permite personalizar fácilmente cualquier utilidad con nuevas utilidades de opacidad.
Se agregaron nuevos ejemplos de fragmentos basados en mostrar cómo personalizar nuestros componentes. — Obtenga componentes personalizados listos para usar y otros patrones de diseño comunes con nuestros nuevos ejemplos de Snippets . Incluye pies de página , menús desplegables , grupos de listas y modales .
Se eliminaron los estilos de posicionamiento no utilizados de las ventanas emergentes y la información sobre herramientas , ya que estos son manejados únicamente por Popper. $tooltip-marginha quedado en desuso y se ha establecido nullen el proceso.

¿Quieres más información? Lea la publicación de blog v5.1.0.

¡Hola! Los cambios a nuestra primera versión principal de Bootstrap 5, v5.0.0, se documentan a continuación. No reflejan los cambios adicionales que se muestran arriba.

dependencias

Dejó jQuery.
Actualizado de Popper v1.x a Popper v2.x.
Se reemplazó Libsass con Dart Sass ya que nuestro compilador Sass dado a Libsass estaba obsoleto.
Migrado de Jekyll a Hugo para construir nuestra documentación.

Compatibilidad con navegador

Soltó Internet Explorer 10 y 11
Eliminado Microsoft Edge < 16 (Legacy Edge)
Firefox caído < 60
Safari eliminado < 12
Soltó iOS Safari < 12
Chrome caído < 60

Cambios en la documentación

Página de inicio, diseño de documentos y pie de página rediseñados.
Se agregó una nueva guía de paquetes .
Se agregó una nueva sección Personalizar , reemplazando la página Temas de v4 , con nuevos detalles sobre Sass, opciones de configuración global, esquemas de color, variables CSS y más.
Se reorganizó toda la documentación de los formularios en la nueva sección de Formularios , dividiendo el contenido en páginas más enfocadas.
Del mismo modo, se actualizó la sección Diseño para desarrollar el contenido de la cuadrícula con mayor claridad.
Se cambió el nombre de la página del componente "Navegaciones" a "Navegaciones y pestañas".
Se cambió el nombre de la página "Cheques" a "Cheques y radios".
Se rediseñó la barra de navegación y se agregó una nueva subnavegación para facilitar la navegación por nuestros sitios y versiones de documentos.
Se agregó un nuevo método abreviado de teclado para el campo de búsqueda: Ctrl + /.

Hablar con descaro a

Hemos eliminado las fusiones de mapas de Sass predeterminadas para facilitar la eliminación de valores redundantes. Tenga en cuenta que ahora debe definir todos los valores en los mapas Sass como $theme-colors. Vea cómo lidiar con los mapas de Sass .
RoturaFunción renombrada color-yiq()y variables relacionadas, color-contrast()ya que ya no está relacionada con el espacio de color YIQ. Ver #30168.
- $yiq-contrasted-thresholdse renombra a $min-contrast-ratio.
- $yiq-text-darky $yiq-text-lightse renombran respectivamente como $color-contrast-darky $color-contrast-light.
RoturaLos parámetros de mixins de consulta de medios han cambiado para un enfoque más lógico.
- media-breakpoint-down()utiliza el propio punto de interrupción en lugar del siguiente punto de interrupción (p. ej., media-breakpoint-down(lg)en lugar de ventanas de media-breakpoint-down(md)visualización de destino más pequeñas que lg).
- De manera similar, el segundo parámetro media-breakpoint-between()también usa el propio punto de interrupción en lugar del siguiente punto de interrupción (por ejemplo, media-between(sm, lg)en lugar de las vistas de media-breakpoint-between(sm, md)destino entre smy lg).
RoturaSe eliminaron los estilos de impresión y $enable-print-stylesla variable. Las clases de visualización de impresión todavía existen. Ver #28339 .
RoturaSe eliminaron las funciones color(), theme-color()y gray()en favor de las variables. Ver #29083 .
Roturatheme-color-level()Función renombrada color-level()y ahora acepta cualquier color que desee en lugar de solo $theme-colorcolores. Ver #29083 Cuidado: color-level() se dejó caer más tarde v5.0.0-alpha3.
RoturaRenombrado $enable-prefers-reduced-motion-media-queryy $enable-pointer-cursor-for-buttonspara $enable-reduced-motiony $enable-button-pointerspor brevedad.
RoturaEliminado el bg-gradient-variant()mixin. Use la .bg-gradientclase para agregar degradados a los elementos en lugar de las .bg-gradient-*clases generadas.
Rotura Se eliminaron los mixins previamente obsoletos:
- hover, hover-focus, plain-hover-focusyhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(también eliminó la clase de utilidad asociada, .text-hide)
- visibility()
- form-control-focus()
Roturascale-color()Función renombrada shift-color()para evitar la colisión con la propia función de escalado de color de Sass.
box-shadowLos mixins ahora permiten nullvalores y se eliminan nonede múltiples argumentos. Ver #30394 .
El border-radius()mixin ahora tiene un valor predeterminado.

sistema de colores

El sistema de color con el que funcionaba color-level()y $theme-color-intervalse eliminó a favor de un nuevo sistema de color. Todas las funciones lighten()y darken()en nuestro código base se reemplazan por tint-color()y shade-color(). Estas funciones mezclarán el color con blanco o negro en lugar de cambiar su luminosidad en una cantidad fija. El shift-color()matizará o matizará un color dependiendo de si su parámetro de peso es positivo o negativo. Ver #30622 para más detalles.
Se agregaron nuevos tintes y sombras para cada color, proporcionando nueve colores separados para cada color base, como nuevas variables de Sass.
Contraste de color mejorado. Relación de contraste de color mejorada de 3:1 a 4,5:1 y colores azul, verde, cian y rosa actualizados para garantizar el contraste WCAG 2.1 AA. También cambiamos nuestro color de contraste de color de $gray-900a $black.
Para respaldar nuestro sistema de color, hemos agregado nuevas funciones personalizadas tint-color()para shade-color()mezclar nuestros colores de manera adecuada.

Actualizaciones de cuadrícula

¡Nuevo punto de quiebre! Se agregó un nuevo xxlpunto de interrupción para 1400pxy hacia arriba. No hay cambios en todos los demás puntos de interrupción.
Canalones mejorados. Los canalones ahora se establecen en rems y son más angostos que v4 ( 1.5rem, o aproximadamente 24px, hacia abajo desde 30px). Esto alinea las canaletas de nuestro sistema de red con nuestras utilidades de espaciado.
- Se agregó una nueva clase de medianil ( .g-*, .gx-*y .gy-*) para controlar canalones horizontales/verticales, canalones horizontales y canalones verticales.
- RoturaRenombrado .no-guttersa .g-0para que coincida con las nuevas utilidades de canalón.
Las columnas ya no se position: relativeaplican, por lo que es posible que deba agregar .position-relativealgunos elementos para restaurar ese comportamiento.
RoturaEliminó varias .order-*clases que a menudo no se usaban. Ahora solo proporcionamos productos listos .order-1para .order-5usar.
RoturaSe eliminó el .mediacomponente, ya que se puede replicar fácilmente con las utilidades. Consulte el n.º 28265 y la página de utilidades flexibles para ver un ejemplo .
Rotura bootstrap-grid.cssahora solo se aplica box-sizing: border-boxa la columna en lugar de restablecer el tamaño global del cuadro. De esta manera, nuestros estilos de cuadrícula se pueden usar en más lugares sin interferencias.
$enable-grid-classesya no deshabilita la generación de clases contenedoras. Ver #29146.
Se actualizó el make-colmixin por defecto a columnas iguales sin un tamaño específico.

Contenido, reinicio, etc.

RFS ahora está habilitado de forma predeterminada. Los encabezados que usan elfont-size()mixin se ajustarán automáticamentefont-sizea su escala con la ventana gráfica. Esta característica se incorporó previamente con v4.
RoturaRevisamos nuestra tipografía de visualización para reemplazar nuestras $display-*variables y con un $display-font-sizesmapa Sass. También se eliminaron las $display-*-weightvariables individuales por un solo $display-font-weighty ajustado font-sizes.
Se agregaron dos nuevos .display-*tamaños de encabezado .display-5y .display-6.
Los enlaces están subrayados de forma predeterminada (no solo al pasar el mouse), a menos que formen parte de componentes específicos.
Tablas rediseñadas para actualizar sus estilos y reconstruirlas con variables CSS para un mayor control sobre el estilo.
RoturaLas tablas anidadas ya no heredan estilos.
Rotura .thead-lighty .thead-darkse descartan en favor de las .table-*clases variantes que se pueden usar para todos los elementos de la tabla ( , thead, tbody, tfooty tr) .thtd
RoturaEl table-row-variant()mixin se renombra table-variant()y acepta solo 2 parámetros: $color(nombre del color) y $value(código de color). El color del borde y los colores de énfasis se calculan automáticamente en función de las variables de factor de la tabla.
Divida las variables de relleno de celdas de la tabla en -yy -x.
RoturaClase abandonada .pre-scrollable. Ver #29135
Rotura .text-*Las utilidades ya no agregan estados de enfoque y desplazamiento a los enlaces. .link-*En su lugar, se pueden usar clases auxiliares. Ver #29267
RoturaClase abandonada .text-justify. Ver #29793
Rotura <hr>los elementos ahora se usan heighten lugar de borderpara admitir mejor el sizeatributo. Esto también permite el uso de utilidades de relleno para crear divisores más gruesos (p. ej., <hr class="py-1">).
Restablecer elementos horizontales predeterminados y padding-leftdel valor predeterminado del navegador a .<ul><ol>40px2rem
Se agregó $enable-smooth-scroll, que se aplica scroll-behavior: smoothglobalmente, excepto para los usuarios que solicitan un movimiento reducido a través de prefers-reduced-motionuna consulta de medios. Ver #31877

RTL

Las variables, utilidades y mixins específicos de la dirección horizontal se han renombrado para usar propiedades lógicas como las que se encuentran en los diseños de flexbox, por ejemplo, starty enden lugar de lefty right.

Formularios

¡Se agregaron nuevas formas flotantes! Hemos promovido el ejemplo de etiquetas flotantes a componentes de formulario totalmente compatibles. Vea la nueva página de etiquetas flotantes.
Rotura Elementos de formulario nativos y personalizados consolidados. Se consolidaron casillas de verificación, radios, selecciones y otras entradas que tenían clases nativas y personalizadas en v4. Ahora, casi todos nuestros elementos de formulario son totalmente personalizados, la mayoría sin necesidad de HTML personalizado.
- .custom-control.custom-checkbox.form-checkes ahora
- .custom-control.custom-custom-radio.form-checkes ahora
- .custom-control.custom-switch.form-check.form-switches ahora
- .custom-select.form-selectes ahora
- .custom-filey .form-filehan sido reemplazados por estilos personalizados en la parte superior de .form-control.
- .custom-range.form-rangees ahora
- Eliminado nativo .form-control-filey .form-control-range.
Roturacaído .input-group-appendy .input-group-prepend. Ahora puede simplemente agregar botones y .input-group-textcomo elementos secundarios directos de los grupos de entrada.
El antiguo error Falta el radio del borde en el grupo de entrada con el error de retroalimentación de validación finalmente se corrige al agregar una .has-validationclase adicional a los grupos de entrada con validación.
Rotura Se eliminaron las clases de diseño específicas del formulario para nuestro sistema de cuadrícula. Use nuestra cuadrícula y utilidades en lugar de .form-group, .form-rowo .form-inline.
RoturaLas etiquetas de formulario ahora requieren .form-label.
Rotura .form-textya no se establece display, lo que le permite crear texto de ayuda en línea o en bloque como desee simplemente cambiando el elemento HTML.
Los controles de formulario ya no se usan fijos heightcuando es posible, sino que se difieren min-heightpara mejorar la personalización y la compatibilidad con otros componentes.
Los íconos de validación ya no se aplican a los correos <select>electrónicos con multiple.
Archivos Sass de origen reorganizados en scss/forms/, incluidos los estilos de grupo de entrada.

Componentes

Valores unificados paddingpara alertas, migas de pan, tarjetas, menús desplegables, grupos de listas, modales, popovers e información sobre herramientas que se basarán en nuestra $spacervariable. Ver #30564 .

Acordeón

Se agregó un nuevo componente de acordeón .

Alertas

Las alertas ahora tienen ejemplos con íconos .
Se eliminaron los estilos personalizados para correos electrónicos <hr>en cada alerta, ya que ya usan currentColor.

Insignias

RoturaSe eliminaron todas .badge-*las clases de color para las utilidades de fondo (p. ej., usar .bg-primaryen lugar de .badge-primary).
RoturaEliminado : .badge-pilluse la .rounded-pillutilidad en su lugar.
RoturaSe eliminaron los estilos de desplazamiento y enfoque para <a>y <button>elementos.
Se aumentó el relleno predeterminado para las insignias de .25em/ .5ema .35em/ .65em.

Migas de pan

Simplificó la apariencia predeterminada de las migas de pan eliminando padding, background-colory border-radius.
Se agregó una nueva propiedad personalizada de CSS --bs-breadcrumb-dividerpara una fácil personalización sin necesidad de volver a compilar CSS.

Botones

Rotura Los botones de alternar , con casillas de verificación o radios, ya no requieren JavaScript y tienen un nuevo marcado. Ya no necesitamos un elemento envolvente, lo agregamos.btn-checkal<input>, y lo emparejamos con cualquier.btnclase en el<label>. Ver #30650 . Los documentos para esto se han movido de nuestra página de Botones a la nueva sección de Formularios.
Rotura Retirado .btn-blockpor servicios públicos. En lugar de usar .btn-blockon .btn, envuelva sus botones con .d-griduna .gap-*utilidad para espaciarlos según sea necesario. Cambie a clases receptivas para tener aún más control sobre ellas. Lea los documentos para ver algunos ejemplos.
Se actualizaron nuestros button-variant()y button-outline-variant()mixins para admitir parámetros adicionales.
Botones actualizados para garantizar un mayor contraste en los estados activo y de desplazamiento.
Los botones deshabilitados ahora tienen pointer-events: none;.

Tarjeta

RoturaCayó .card-decka favor de nuestra cuadrícula. Envuelve tus cartas en clases de columnas y agrega un .row-cols-*contenedor principal para recrear mazos de cartas (pero con más control sobre la alineación receptiva).
RoturaAbandonado .card-columnsa favor de la Masonería. Ver #28922 .
RoturaSe reemplazó el .cardacordeón basado con un nuevo componente Accordion .

Carrusel

Se agregó una nueva .carousel-darkvariante para texto, controles e indicadores oscuros (ideal para fondos más claros).
Se reemplazaron los íconos de chevron para los controles de carrusel con nuevos SVG de Bootstrap Icons .

botón cerrar

RoturaRenombrado .closea .btn-closepor un nombre menos genérico.
Los botones de cierre ahora usan un background-image(SVG incrustado) en lugar de un ×en el HTML, lo que permite una personalización más sencilla sin necesidad de tocar el marcado.
Se agregó una nueva .btn-close-whitevariante que filter: invert(1)permite habilitar íconos de descarte de mayor contraste contra fondos más oscuros.

Colapsar

Se eliminó el anclaje de desplazamiento para acordeones.

Listas deplegables

Se agregaron nuevas .dropdown-menu-darkvariantes y variables asociadas para menús desplegables oscuros bajo demanda.
Se agregó una nueva variable para $dropdown-padding-x.
Oscureció el divisor desplegable para mejorar el contraste.
RoturaTodos los eventos para el menú desplegable ahora se activan en el botón de alternancia del menú desplegable y luego se expanden al elemento principal.
Los menús desplegables ahora tienen un data-bs-popper="static"conjunto de atributos cuando el posicionamiento del menú desplegable es estático o el menú desplegable está en la barra de navegación. Esto lo agrega nuestro JavaScript y nos ayuda a usar estilos de posición personalizados sin interferir con el posicionamiento de Popper.
RoturaSe eliminó flipla opción para el complemento desplegable a favor de la configuración nativa de Popper. Ahora puede deshabilitar el comportamiento de voltear pasando una matriz vacía para la fallbackPlacementsopción en el modificador de volteo .
Ahora se puede hacer clic en los menús desplegables con una nueva autoCloseopción para manejar el comportamiento de cierre automático . Puede usar esta opción para aceptar el clic dentro o fuera del menú desplegable para hacerlo interactivo.
Los menús desplegables ahora admiten .dropdown-items envueltos en <li>s.

jumbotron

RoturaSe eliminó el componente jumbotron, ya que se puede replicar con utilidades. Vea nuestro nuevo ejemplo de Jumbotron para una demostración.

Grupo de lista

Se agregó un nuevo .list-group-numberedmodificador a la lista de grupos.

Navegaciones y pestañas

Se agregaron nuevas nullvariables para font-size, font-weight, colory :hover colora la .nav-linkclase.

barras de navegación

RoturaLas barras de navegación ahora requieren un contenedor dentro (para simplificar drásticamente los requisitos de espacio y CSS requerido).
RoturaLa .activeclase ya no se puede aplicar a .nav-items, debe aplicarse directamente a .nav-links.

Offcanvas

Se agregó el nuevo componente offcanvas .

Paginación

Los enlaces de paginación ahora son personalizables margin-lefty se redondean dinámicamente en todas las esquinas cuando se separan entre sí.
Se agregaron transitions a los enlaces de paginación.

Popovers

RoturaRenombrado .arrowen .popover-arrownuestra plantilla de ventana emergente predeterminada.
whiteListOpción renombrada a allowList.

Hilanderos

Los giradores ahora honran prefers-reduced-motion: reduceal ralentizar las animaciones. Ver #31882 .
Mejora de la alineación vertical de la rueda giratoria.

tostadas

Las tostadas ahora se pueden colocar en un .toast-containercon la ayuda de las utilidades de posicionamiento .
Se cambió la duración predeterminada del brindis a 5 segundos.
Eliminado overflow: hiddende las tostadas y reemplazado por border-radiuss adecuados con calc()funciones.

Información sobre herramientas

RoturaRenombrado .arrowa .tooltip-arrowen nuestra plantilla de información sobre herramientas predeterminada.
RoturaEl valor predeterminado para fallbackPlacementsse cambia a ['top', 'right', 'bottom', 'left']para una mejor ubicación de los elementos emergentes.
RoturawhiteListOpción renombrada a allowList.

Utilidades

RoturaSe cambiaron los nombres de varias utilidades para usar nombres de propiedades lógicas en lugar de nombres direccionales con la adición de compatibilidad con RTL:
- Renombrado .left-*y .right-*a .start-*y .end-*.
- Renombrado .float-lefty .float-righta .float-starty .float-end.
- Renombrado .border-lefty .border-righta .border-starty .border-end.
- Renombrado .rounded-lefty .rounded-righta .rounded-starty .rounded-end.
- Renombrado .ml-*y .mr-*a .ms-*y .me-*.
- Renombrado .pl-*y .pr-*a .ps-*y .pe-*.
- Renombrado .text-lefty .text-righta .text-starty .text-end.
RoturaMárgenes negativos deshabilitados por defecto.
Se agregó una nueva .bg-bodyclase para configurar rápidamente el <body>fondo de los elementos adicionales.
Se agregaron nuevas utilidades de posición para top, right, bottomy left. Los valores incluyen 0, 50%y 100%para cada propiedad.
Se agregaron nuevas .translate-middle-xy .translate-middle-yutilidades para centrar horizontal o verticalmente elementos de posición absoluta/fija.
Se agregaron nuevas border-widthutilidades .
RoturaRenombrado .text-monospacea .font-monospace.
RoturaEliminado .text-hideporque es un método anticuado para ocultar texto que ya no debería usarse.
Se agregaron .fs-*utilidades para font-sizeutilidades (con RFS habilitado). Estos usan la misma escala que los encabezados predeterminados de HTML (1-6, de grande a pequeño) y se pueden modificar a través del mapa de Sass.
Rotura.font-weight-*Utilidades renombradas en cuanto .fw-*a brevedad y consistencia.
Rotura.font-style-*Utilidades renombradas en cuanto .fst-*a brevedad y consistencia.
Se agregaron .d-gridpara mostrar utilidades y nuevas gaputilidades ( .gap) para diseños CSS Grid y flexbox.
RoturaEliminado .rounded-smy rounded-lg, e introducido una nueva escala de clases, .rounded-0a .rounded-3. Ver #31687 .
Se agregaron nuevas line-heightutilidades: .lh-1, .lh-smy . Ver aquí _.lh-base.lh-lg
Movió la .d-noneutilidad en nuestro CSS para darle más peso sobre otras utilidades de visualización.
Extendió el .visually-hidden-focusableasistente para trabajar también en contenedores, usando :focus-within.

ayudantes

Rotura Se ha cambiado el nombre de los asistentes de incrustación receptivos a asistentes de proporción con nuevos nombres de clase y comportamientos mejorados, así como una variable CSS útil.
- Se ha cambiado el nombre de las clases para cambiar bya xen la relación de aspecto. Por ejemplo, .ratio-16by9es ahora .ratio-16x9.
- Hemos eliminado el .embed-responsive-itemselector de grupo de elementos y en favor de un .ratio > *selector más simple. No se necesita más clase, y el ayudante de relación ahora funciona con cualquier elemento HTML.
- Se $embed-responsive-aspect-ratiosha cambiado el nombre del mapa de Sass $aspect-ratiosy sus valores se han simplificado para incluir el nombre de la clase y el porcentaje como key: valuepar.
- Las variables CSS ahora se generan e incluyen para cada valor en el mapa Sass. Modifique la --bs-aspect-ratiovariable en .ratiopara crear cualquier relación de aspecto personalizada .
Rotura Las clases de "lector de pantalla" ahora son clases "visualmente ocultas" .
- Cambió el archivo Sass de scss/helpers/_screenreaders.scssascss/helpers/_visually-hidden.scss
- Renombrado .sr-onlyy .sr-only-focusablea .visually-hiddeny.visually-hidden-focusable
- Renombrado sr-only()y sr-only-focusable()mixins a visually-hidden()y visually-hidden-focusable().
bootstrap-utilities.cssahora también incluye a nuestros ayudantes. Ya no es necesario importar ayudantes en compilaciones personalizadas.

JavaScript

Se eliminó la dependencia de jQuery y se reescribieron los complementos para que estén en JavaScript normal.
RoturaLos atributos de datos para todos los complementos de JavaScript ahora tienen espacios de nombres para ayudar a distinguir la funcionalidad de Bootstrap de terceros y de su propio código. Por ejemplo, usamos data-bs-toggleen lugar de data-toggle.
Todos los complementos ahora pueden aceptar un selector CSS como primer argumento. Puede pasar un elemento DOM o cualquier selector de CSS válido para crear una nueva instancia del complemento:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigse puede pasar como una función que acepta la configuración predeterminada de Popper de Bootstrap como argumento, para que pueda fusionar esta configuración predeterminada a su manera. Se aplica a los menús desplegables, popovers e información sobre herramientas.
El valor predeterminado para fallbackPlacementsse cambia a ['top', 'right', 'bottom', 'left']para una mejor ubicación de los elementos Popper. Se aplica a los menús desplegables, popovers e información sobre herramientas.
Se eliminó el guión bajo de los métodos estáticos públicos como _getInstance()→ getInstance().