Saltar al contenido principal Saltar a la navegación de la documentación
Ver en GitHub

Migrando a v5

Realiza un seguimiento y revisa los cambios en los archivos fuente, la documentación y los componentes de Bootstrap para ayudarte a migrar de v4 a v5.

En esta página

v5.3.0

Si estás migrando desde nuestras versiones alfa anteriores de v5.3.0, revisa sus cambios además de esta sección.

Ayudantes

  • Los enlaces de colores una vez más tienen !important para que funcionen mejor con nuestras utilidades de enlaces recién agregadas.

Utilidades

v5.3.0-alpha2

Si estás migrando desde nuestra versión alfa anterior de v5.3.0, revisa los cambios que se enumeran a continuación.

Variables CSS

  • Se eliminaron varias variables CSS raíz duplicadas y no utilizadas.

Modos de color

  • Los colores del modo oscuro ahora se derivan de los colores de nuestro tema (p. ej., $primary) en Sass, en lugar de tintes o sombras específicas del color (p. ej., $blue-300). Esto permite un modo oscuro más automatizado al personalizar los colores predeterminados del tema.

  • Se agregaron mapas Sass para generar colores de tema para texto en modo oscuro, fondo sutil y borde sutil.

  • Los ejemplos de fragmentos ahora están listos para el modo oscuro con marcado actualizado y estilos personalizados reducidos.

  • Se agregó color-scheme: dark al CSS del modo oscuro para cambiar los controles de nivel del sistema operativo, como las barras de desplazamiento

  • Los estados de validación de formulario border-color y de texto color ahora responden al modo oscuro, gracias a las nuevas variables Sass y CSS.

  • Se eliminaron las variables CSS de fondo de control de formulario agregadas recientemente y se reasignaron las variables Sass para usar variables CSS en su lugar. Esto simplifica el estilo en los modos de color y evita un problema por el cual los controles de formulario en modo oscuro no se actualizan correctamente.

  • Nuestras box-shadows volverán a permanecer siempre oscuras en lugar de invertirse a blanco cuando estémos en modo oscuro.

  • HTML y JavaScript mejorados para nuestro script de alternancia de modo de color. Se mejoró el selector para cambiar el SVG activo y el marcado se hizo más accesible con atributos ARIA.

  • Colores de sintaxis de código de documentación mejorados y más en los modos claro y oscuro.

Tipografía

  • Ya no configuramos un color para $headings-color-dark o --bs-heading-color para el modo oscuro. Para evitar varios problemas de encabezados dentro de los componentes que aparecen en el color incorrecto, configuramos la variable Sass en null y agregamos una verificación null como la que usamos en el modo de luz predeterminado.

Componentes

  • Las tarjetas ahora tienen un color establecido para mejorar la representación en todos los modos de color.

  • Se agregó una nueva variante .nav-underline para nuestra navegación con un borde inferior más simple debajo del enlace de navegación activo. Consulta la documentación para ver un ejemplo.

  • Los navegadores ahora tienen nuevos estilos :focus-visible que coinciden mejor con nuestros estilos de enfoque de botones personalizados.

Ayudantes

  • Se agregó un nuevo asistente .icon-link para colocar y alinear rápidamente íconos Bootstrap junto a un enlace textual. Los enlaces de íconos también son compatibles con nuestras nuevas utilidades de enlaces.

  • Se agregó un nuevo asistente de anillo de enfoque para eliminar el outline predeterminado y configurar un anillo de enfoque personalizado box-shadow .

Utilidades

  • Se cambiaron el nombre de las variables Sass y CSS ${color}-text a ${color}-text-emphasis para que coincidan con sus utilidades asociadas.

  • Se agregó un nuevo asistente .link-body-emphasis junto con nuestros enlaces de colores. Esto crea un enlace coloreado usando nuestro modo de color color de énfasis responsive.

  • Se agregaron nuevas utilidades de enlace para la opacidad del color del enlace, el desplazamiento del subrayado, el color del subrayado y la opacidad del subrayado. Explora las nuevas utilidades de enlaces.

  • Las utilidades border-width basadas en variables CSS se han revertido para establecer sus propiedades directamente (como se hacía antes de v5.2.0). Esto evita problemas de herencia entre elementos anidados, incluidas las tablas.

  • Se agregó una nueva utilidad .border-black para que coincida con nuestras utilidades .text-black y .bg-black .

  • En desuso Dejó en desuso la utilidad .text-muted y $text-muted variable Sass. Ha sido reemplazado por .text-body-secondary y $body-secondary-color.

Docs

  • Los ejemplos ahora se muestran con el modo de color claro u oscuro apropiado según lo dicta la configuración en nuestros documentación. Cada ejemplo tiene un selector de modo de color individual.

  • JavaScript incluido mejorado para la demostración en vivo de Toast.

  • Se agregó el contenido del repositorio twbs/examples en la parte superior de la página de ejemplos.

Herramientas

  • Se agregaron pruebas SCSS a través de True para ayudar a probar nuestra API de utilidades y otras personalizaciones.

  • Se reemplazaron instancias de nuestro proyecto bootstrap-npm-starter con el repositorio twbs/examplesmás nuevo y completo.

Para obtener una lista completa de cambios, consulta el proyecto v5.3.0-alpha2 en GitHub.

v5.3.0-alpha1

¡Modos de color!

Obtén más información leyendo la nueva documentación sobre modos de color.

  • Soporte global para modos de color claro (predeterminado) y oscuro. Establece el modo de color globalmente en el elemento :root , en grupos. de elementos y componentes con una clase contenedora, o directamente en componentes, con data-bs-theme="light|dark". También se incluye un nuevo mixin color-mode() que puede generar un conjunto de reglas con el selector data-bs-theme o una media query, según sus preferencias.

    Obsoleto Los modos de color reemplazan las variantes oscuras de los componentes, por lo que .btn-close-white, .carousel-dark, .dropdown-menu-darky .navbar-dark están en desuso.

  • Nuevo sistema de colores extendido. Hemos agregado nuevos colores de tema (pero no en $theme-colors) para obtener una paleta de colores más matizada para todo el sistema con nuevas colores secundarios, terciarios y de énfasis para color y background-color. Estos nuevos colores están disponibles como variables Sass, variables CSS y utilidades.

  • También hemos ampliado las variables Sass de color de tema, las variables CSS y las utilidades para incluir énfasis en el texto, colores de fondo sutiles y colores de borde sutiles. Están disponibles como variables Sass, variables CSS y utilidades.

  • Se agrega una nueva hoja de estilo _variables-dark.scss para albergar sobrescrituras específicas del modo oscuro. Esta hoja de estilo debe importarse inmediatamente después del archivo _variables.scss existente en su pila de importación. 

    diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 8f8296def..449d70487 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -6,6 +6,7 @@
 // Configuration
 @import "functions";
 @import "variables";
+@import "variables-dark";
 @import "maps";
 @import "mixins";
 @import "utilities";

Variables CSS

  • Restaura variables CSS para puntos de interrupción, aunque no las usamos en nuestras media queries porque no son compatibles. Sin embargo, estos pueden resultar útiles en contextos específicos de JS.

  • Según la actualización de los modos de color, hemos agregado nuevas utilidades para las nuevas variables CSS de Sass secondary y tertiary texto y colores de fondo, además de {color}-bg-subtle, {color}-border-subtley {color}-text-emphasis para los colores de nuestro tema. Estos nuevos colores están disponibles a través de variables Sass y CSS (pero no nuestros mapas de colores) con el objetivo expreso de facilitar la personalización en múltiples modos de colores, como claro y oscuro.

  • Agrega variables adicionales para alertas, .btn-closey .offcanvas.

  • La variable --bs-heading-color está de vuelta con una actualización y compatibilidad con el modo oscuro. Primero, ahora verificamos si hay un valor null en la variable Sass asociada, $headings-color, antes de intentar generar la variable CSS, por lo que de forma predeterminada no está presente en nuestra CSS compilado. En segundo lugar, utilizamos la variable CSS con un valor alternativo, inherit, lo que permite que el comportamiento original persista, pero también permite sobrescrituras.

  • Convierte enlaces para usar variables CSS para diseñar color, pero no text-decoration. Los colores ahora se configuran con --bs-link-color-rgb y --bs-link-opacity como color rgba(), lo que permite Puedes personalizar la translucidez con facilidad. La pseudoclase a:hover ahora sobrescribe --bs-link-color-rgb en lugar de establecer explícitamente la propiedad color .

  • --bs-border-width ahora se utiliza en más componentes para tener un mayor control sobre el estilo global predeterminado.

  • Agrega nuevas variables CSS raíz para nuestros box-shadow, incluidos --bs-box-shadow, --bs-box-shadow-sm, --bs-box-shadow-lgy --bs-box-shadow-inset.

Componentes

Alerta

  • Las variantes de alerta ahora tienen estilo mediante variables CSS.

  • Obsoleto El mixin .alert-variant() ahora está obsoleto. Ahora usamos un bucle Sass directamente para modificar las variables CSS predeterminadas del componente para cada variante.

Grupo de lista

  • Las variantes de elementos del grupo de listas ahora tienen estilo mediante variables CSS.

  • Obsoleto El mixin .list-group-variant() ahora está obsoleto. Ahora usamos un bucle Sass directamente para modificar las variables CSS predeterminadas del componente para cada variante.

Botón cerrar

Barras de progreso

El marcado para las barras de progreso se actualizó en la versión 5.3.0. Debido a la ubicación de role y varios atributos aria- en el elemento interno .progress-bar , algunos lectores de pantalla no anunciaban barras de progreso de valor cero. Ahora, role="progressbar" y los atributos aria-* relevantes están en el elemento .progress externo, dejando .progress-bar únicamente para la presentación visual de la barra y la etiqueta opcional.

Si bien recomendamos adoptar el nuevo marcado para mejorar la compatibilidad con todos los lectores de pantalla, ten en cuenta que la estructura de la barra de progreso heredada seguirá funcionando como antes.

<!-- Previous markup -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- New markup -->
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%"></div>
</div>

También hemos introducido una nueva clase .progress-stacked para envolver múltiples barras de progreso en una sola barra de progreso apilada.

<!-- Previous markup -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- New markup -->
<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
    <div class="progress-bar bg-success"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar bg-info"></div>
  </div>
</div>

Formularios

  • .form-control ahora tiene un estilo con variables CSS para admitir modos de color. Esto incluye la adición de dos nuevas variables CSS raíz para los fondos de control de formulario predeterminados y deshabilitados.

  • .form-check y .form-switch (componentes) ahora están creados con variables CSS para configurar la background-image. El uso aquí difiere de otros componentes en que los distintos estados de enfoque, activo, etc. para cada componente no se establecen en la clase base. En cambio, los estados sobrescriben una variable (por ejemplo, --bs-form-switch-bg).

  • Las etiquetas de formulario flotante ahora tienen un background-color para corregir la compatibilidad con elementos <textarea>. Se han realizado cambios adicionales para admitir también estados discapacitados y más.

  • Se corrigió la visualización de entradas de fecha y hora en navegadores basados en WebKit.

Utilidades

  • Obsoleto .text-muted será reemplazado por .text-body-secondary en v6.

    Con la adición de los colores y variables del tema expandido, las variables y la utilidad .text-muted han quedado obsoletas con v5.3.0. Su valor predeterminado también se ha reasignado a la nueva variable CSS --bs-secondary-color para admitir mejor los modos de color. Se eliminará en v6.0.0.

  • Agrega nuevas utilidades .overflow-x, .overflow-yy varias .object-fit-*. La propiedad object-fit se utiliza para especificar cómo se debe cambiar el tamaño de un <img> o <video> para que se ajuste a su contenedor, lo que nos brinda una alternativa responsive a usar background-image para una imagen de relleno/ajuste de tamaño variable.

  • Agrega una nueva utilidad .fw-medium.

  • Se agregaron nuevas .z-* utilidades para z-index.

  • Utilidades de sombra de Box (y variables Sass) se han actualizado para el modo oscuro. Ahora usan --bs-body-color-rgb para generar los valores de color rgba(), lo que les permite adaptarse fácilmente a los modos de color basados en el color de primer plano especificado.

Para obtener una lista completa de cambios, consulta el proyecto v5.3.0 en GitHub.

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 de valores refinados de border-radius . 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 documentación más simple que ya no contrae 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 aún sustenta todo, cada componente se ha actualizado para incluir variables CSS en la base del componente. clases (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, ayudas 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 completamente en todos los ámbitos, corren el riesgo de causar cambios importantes. Por ejemplo, configurar $alert-border-width: var(--bs-border-width) en nuestro código fuente rompe el Sass potencial en su propio código si estuviera haciendo $alert-border-width * 2 por alguna razón.

Como tal, siempre que sea posible, continuaremos avanzando hacia más variables CSS, pero reconoce que nuestra implementación puede estar ligeramente limitada en la versión 5.

Nuevo _maps.scss

Bootstrap v5.2.0 introdujo un nuevo archivo Sass con _maps.scss. Extrae varios mapas Sass de _variables.scss para solucionar un problema por el cual las actualizaciones de un mapa original no se aplicaban a los mapas secundarios que los ampliaban. Por ejemplo, las actualizaciones de $theme-colors no se aplicaban 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 según la cual una vez que se ha usadouna variable o mapa predeterminado, no se puede actualizar. Existe una deficiencia similar con las variables CSS cuando se usan para componer otras variables CSS.

Es por eso que las personalizaciones de variables en Bootstrap deben venir después de @import "functions", pero antes de @import "variables" y el resto de nuestra pila de importación. Lo mismo se aplica a los mapas Sass: debes sobrescribir los valores predeterminados antes de utilizarlos. 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

Tus compilaciones CSS Bootstrap personalizadas 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

  • Utilidades font-weight ampliadas para incluir .fw-semibold para fuentes semibold.
  • Utilidades border-radius, ampliadas para incluir dos nuevas tamaños, .rounded-4 y .rounded-5, para más opciones.

Cambios adicionales

  • Se introdujo la nueva opción $enable-container-classes . — Ahora, al optar por el diseño experimental CSS Grid, las clases .container-* seguirán compiladas, a menos que esta opción esté configurada en false. Los contenedores ahora también mantienen sus valores de gutter.

  • El componente Offcanvas ahora tiene variaciones de respuesta. El .offcanvas original La clase permanece sin cambios: oculta el contenido en todas las viewports. Para que responda, cambie esa clase .offcanvas a cualquier clase .offcanvas-{sm|md|lg|xl|xxl}.

  • Ahora se pueden habilitar divisores de tabla más gruesos. — Eliminamos el borde más grueso y difícil de sobrescribir entre los grupos de tablas y lo trasladamos a una clase opcional que puede aplicar, .table-group-divider. Consulte los documentación de la tabla para ver un ejemplo.

  • Scrollspy ha sido reescrito para usar la API Intersection Observer, lo que significa que ya no necesita envoltorios principales relativos, desaprueba la configuración offset y más. Busque que sus implementaciones de Scrollspy sean más precisas y consistentes en el resaltado de navegación.

  • Las ventanas emergentes y la tooltips ahora usan variables CSS. Algunas variables CSS se han actualizado desde sus contrapartes 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 ayudantes .text-bg-{color} . En lugar de configurar .text-* y .bg-* utilidades, ahora puedes usar los .text-bg-* ayudantes para establezca un background-color con un colorde primer plano contrastante.

  • Se agregó el modificador .form-check-reverse para invertir el orden de las etiquetas y las casillas de verificación/radios asociadas.

  • Se agregó soporte para columnas rayadas a las tablas a través de la nueva clase .table-striped-columns .

Para obtener una lista completa de cambios, consulta 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: false y habilite la cuadrícula CSS configurando $enable-cssgrid: true.

  • Barras de navegación actualizadas para admitir offcanvas. — Agregue cajones offcanvas en cualquier barra de navegación con las clases responsive .navbar-expand-* y algunas marcas offcanvas.

  • Se agregó un nuevo componente de marcador de posición. — Nuestro componente más nuevo, una forma de proporcionar bloqueos temporales en lugar de contenido real para ayudar a indicar que todavía se está cargando algo en su sitio o aplicación.

  • El complemento Contraer ahora admite el colapso horizontal. — Añade .collapse-horizontal a tu .collapse para contraer el width en lugar del height. Evite repintar el navegador estableciendo una min-height o una height.

  • Se agregaron nuevos ayudantes 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 (.vstack). Agregue divisores verticales similares a los elementos <hr> con los ayudantes .vr nuevos.

  • Se agregaron nuevas variables CSS globales :root . — Se agregaron varias variables CSS nuevas al nivel :root para controlar los estilos <body> . Hay más en proceso, incluidas nuestras utilidades y componentes, pero por ahora lea variables CSS en la sección Personalizar.

  • Se revisaron las utilidades de color y fondo para usar variables CSS y se agregaron nuevas opacidad del texto y opacidad de fondo utilidades. — .text-* y .bg-* (utilidades) ahora se crean con variables CSS y valores de color rgba(), lo que permite puedes personalizar fácilmente cualquier utilidad con nuevas utilidades de opacidad.

  • Se agregaron nuevos ejemplos de fragmentos basados en mostrar cómo personalizar nuestros componentes. — Utilice componentes personalizados listos para usar y otros patrones de diseño comunes con nuestros nuevos ejemplos de fragmentos. Incluye pies de página, menús desplegables, listar gruposy modales.

  • Se eliminaron los estilos de posicionamiento no utilizados de las ventanas emergentes y la tooltips , ya que Popper los maneja únicamente. $tooltip-margin ha quedado obsoleto y se ha establecido en null en el proceso.

¿Quieres más información? Lee la publicación del blog v5.1.0.

v5.0.0

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

Dependencias

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

Soporte del navegador

  • Se eliminó Internet Explorer 10 y 11
  • Microsoft Edge eliminado <16 (Legacy Edge)
  • Firefox eliminado <60
  • Dropped Safari < 12
  • Se eliminó iOS Safari <12
  • Chrome eliminado <60

Cambios en la documentación.

  • Página de inicio, diseño de documentación y pie de página rediseñados.
  • Se agregó nueva guía de paquetes.
  • Se agregó nueva sección Personalizar, reemplazando Página de temas de v4 ⬀, con nuevos detalles sobre Sass, opciones de configuración global, combinaciones de colores, variables CSS y más.
  • Reorganicé toda la documentación del formulario en una nueva sección Formularios, dividiendo el contenido en páginas más enfocadas.
  • Del mismo modo, actualicé 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 "Navs" a "Navs & Tabs".
  • Se cambió el nombre de la página "Checks" a "Checks y radios".
  • Rediseñamos la barra de navegación y agregamos una nueva subnav para que sea más fácil navegar por nuestras versiones de sitios y documentación.
  • Se agregó un nuevo método abreviado de teclado para el campo de búsqueda: Ctrl + /.

Sass

  • Hemos eliminado las combinaciones de mapas Sass predeterminadas para que sea más fácil eliminar valores redundantes. Tenga en cuenta que ahora debe definir todos los valores en los mapas de Sass como $theme-colors. Vea cómo manejar los mapas Sass.

  • Breaking Se cambió el nombre de la función color-yiq() y las variables relacionadas a color-contrast() ya que ya no está relacionado con el espacio de color YIQ. Ver n.º 30168.

    • $yiq-contrasted-threshold pasa a llamarse $min-contrast-ratio.
    • $yiq-text-dark y $yiq-text-light pasan a llamarse respectivamente $color-contrast-dark y $color-contrast-light.

  • Últimas Los parámetros de los mixins de media query han cambiado para adoptar un enfoque más lógico.

    • media-breakpoint-down() usa el punto de interrupción en sí en lugar del siguiente punto de interrupción (por ejemplo, media-breakpoint-down(lg) en lugar de media-breakpoint-down(md) apunta a viewports más pequeñas que lg).
    • De manera similar, el segundo parámetro en media-breakpoint-between() también usa el punto de interrupción en sí en lugar del siguiente punto de interrupción (por ejemplo, media-between(sm, lg) en lugar de media-breakpoint-between(sm, md) apunta a viewports entre sm y lg) .

  • Rompiendo Se eliminaron los estilos de impresión y la variable $enable-print-styles . Las clases de exhibición de impresiones todavía existen. Ver #28339.

  • Rompiendo Se eliminaron color(), theme-color()y gray() funciona a favor de las variables. Ver #29083.

  • Rompiendo Se cambió el nombre de la función theme-color-level() a color-level() y ahora acepta cualquier color que desee en lugar de solo colores $theme-color . Ver #29083 Cuidado: color-level() se eliminó más tarde en v5.0.0-alpha3.

  • Rompiendo Renombrado $enable-prefers-reduced-motion-media-query y $enable-pointer-cursor-for-buttons a $enable-reduced-motion y $enable-button-pointers por brevedad.

  • Rompiendo Se eliminó el mixin bg-gradient-variant() . Utilice la clase .bg-gradient para agregar degradados a los elementos en lugar de las clases .bg-gradient-* generadas.

  • Último Se eliminaron mixins previamente obsoletos:

    • hover, hover-focus, plain-hover-focusy hover-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()

  • Rotura Se cambió el nombre de la función scale-color() a shift-color() para evitar colisiones con Función de escala de color propia de Sass.

  • box-shadow (mixins) ahora permiten valores null y eliminan none de múltiples argumentos. Ver #30394.

  • El mixin border-radius() ahora tiene un valor predeterminado.

Sistema de color

  • El sistema de color que funcionaba con color-level() y $theme-color-interval se eliminó en 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. shift-color() teñirá o sombreará un color dependiendo de si su parámetro de peso es positivo o negativo. Consulta el n.º 30622 para obtener más detalles.

  • Se agregaron nuevos tintes y sombras para cada color, proporcionando nueve colores separados para cada color base, como nuevas variables 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 $gray-900 a $black.

  • Para respaldar nuestro sistema de color, hemos agregado nuevas funciones personalizadas tint-color() y shade-color() para mezclar nuestros colores apropiadamente.

Actualizaciones de grid

  • ¡Nuevo punto de interrupción! Se agregó un nuevo punto de interrupción xxl para 1400px y superiores. No hay cambios en todos los demás puntos de interrupción.

  • Gutters mejorados. Los gutters ahora están configurados en rems y son más estrechos que la versión 4 (1.5rem, o alrededor de 24px, en lugar de 30px). Esto alinea los gutters de nuestro sistema de red con nuestras utilidades de espaciado.

    • Se agregó una nueva clase de canal (.g-*, .gx-*y .gy-*) para controlar gutters horizontales/verticales, gutters horizontales y gutters verticales.
    • Breaking Renombrado .no-gutters a .g-0 para que coincida con las nuevas utilidades de canal.

  • Las columnas ya no tienen position: relative aplicada, por lo que es posible que tengas que agregar .position-relative a algunos elementos para restaurar ese comportamiento.

  • Rompiendo Se eliminaron varias clases .order-* que a menudo no se utilizaban. Ahora solo proporcionamos .order-1 a .order-5 listos para usar.

  • Rotura Se eliminó el componente .media ya que se puede replicar fácilmente con utilidades. Consulte #28265 y el página de utilidades flexibles para ver un ejemplo.

  • Rompiendo bootstrap-grid.css ahora solo aplica box-sizing: border-box al columna en lugar de restablecer el tamaño del cuadro global. De esta manera, nuestros estilos de cuadrícula se pueden utilizar en más lugares sin interferencias.

  • $enable-grid-classes ya no deshabilita la generación de clases de contenedor. Ver n.º 29146.

  • Se actualizó el mixin make-col para que el valor predeterminado sea columnas iguales sin un tamaño específico.

Contenido, Reboot, etc.

  • RFS ahora está habilitado de forma predeterminada. Encabezados que utilizan font-size() mixin ajustará automáticamente su font-size para escalar con la viewport. Esta característica estaba habilitada anteriormente con la versión 4.

  • Rompiendo Revisamos nuestra tipografía de visualización para reemplazar nuestras variables $display-* y con un $display-font-sizes Mapa descarado. También se eliminaron las variables $display-*-weight individuales para un único $display-font-weight y se ajustaron los font-size.. p>

  • Se agregaron dos nuevos tamaños de encabezado .display-* , .display-5 y .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 tener más control sobre el estilo.

  • Rompiendo Las tablas anidadas ya no heredan estilos.

  • Rotura .thead-light y .thead-dark se eliminan en favor de .table-* clases variantes que se pueden usar para todos los elementos de la tabla (thead, tbody, tfoot, tr, th y td).

  • Rompiendo El mixin table-row-variant() pasa a llamarse 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 acento se calculan automáticamente en función de las variables de factor de la tabla.

  • Dividir las variables de relleno de celdas de la tabla en -y y -x.

  • Rompiendo Clase .pre-scrollable eliminada. Ver #29135

  • Breaking .text-* (utilidades) ya no agregan estados de desplazamiento y enfoque a los enlaces. En su lugar, se pueden utilizar clases auxiliares .link-*. Ver n.º 29267

  • Rompiendo Se eliminó la clase .text-justify . Ver n.º 29793

  • Breaking <hr> (elementos) ahora usan height en lugar de border para admitir mejor el atributo size. Esto también permite el uso de utilidades de relleno para crear divisores más gruesos (por ejemplo, <hr class="py-1">).

  • Restablecer el padding-left horizontal predeterminado en los elementos <ul> y <ol> desde el valor predeterminado del navegador 40px a 2rem.

  • Se agregó $enable-smooth-scroll, que aplica scroll-behavior: smooth globalmente, excepto para los usuarios que solicitan movimiento reducido a través de prefers-reduced-motion media query. Ver #31877

RTL

  • Se ha cambiado el nombre de las variables, utilidades y mixins específicos de dirección horizontal para usar propiedades lógicas como las que se encuentran en los diseños de flexbox, por ejemplo, start y end en lugar de left y right.

Formularios

  • ¡Se agregaron nuevos formularios flotantes! Hemos promovido el ejemplo de Etiquetas flotantes a componentes de formulario totalmente compatibles. Consulta la nueva página de etiquetas flotantes.

  • Últimas Elementos de formulario nativos y personalizados consolidados. Casillas de verificación, radios, selecciones y otros Se han consolidado los insumos que tenían clases nativas y personalizadas en v4. Ahora casi todos nuestros elementos de formulario son completamente personalizados, la mayoría sin necesidad de HTML personalizado.

    • .custom-control.custom-checkbox ahora es .form-check.
    • .custom-control.custom-radio ahora es .form-check.
    • .custom-control.custom-switch ahora es .form-check.form-switch.
    • .custom-select ahora es .form-select.
    • .custom-file y .form-control-file han sido reemplazados por estilos personalizados encima de .form-control.
    • .custom-range ahora es .form-range.
    • Se eliminaron .form-control-file y .form-control-rangenativos.

  • Rompiendo Se eliminaron .input-group-append y .input-group-prepend. Ahora puede simplemente agregar botones y .input-group-text como elementos secundarios directos de los grupos de entrada.

  • El antiguo radio de borde faltante en el grupo de entrada con error de retroalimentación de validación finalmente se solucionó agregando una clase .has-validation adicional para ingresar grupos con validación.

  • Rompiendo Se eliminaron clases de diseño específicas de formulario para nuestro sistema de cuadrícula. Utilice nuestra cuadrícula y utilidades en lugar de .form-group, .form-rowo .form-inline.

  • Rompiendo Las etiquetas de formulario ahora requieren .form-label.

  • Breaking .form-text ya no establece display, lo que le permite crear ayuda en línea o en bloque Texto como desees simplemente cambiando el elemento HTML.

  • Los controles de formulario ya no utilizan una height fija cuando es posible, sino que difieren a la min-height para mejorar la personalización y la compatibilidad con otros componentes.

  • Los íconos de validación ya no se aplican a <select>con multiple.

  • Archivos fuente Sass reorganizados en scss/forms/, incluidos los estilos de grupo de entrada.

Componentes

  • Valores de padding unificados para alertas, rutas de navegación, tarjetas, menús desplegables, grupos de listas, modales, ventanas emergentes e tooltips que se basarán en nuestra variable $spacer . Ver #30564.

Acordeón

Alertas

  • Las alertas ahora tienen ejemplos con iconos.

  • Se eliminaron estilos personalizados para <hr>en cada alerta, ya que ya usan currentColor.

Insignias

  • Rompiendo Se eliminaron todas las clases de color .badge-* para utilidades de fondo (por ejemplo, use .bg-primary en lugar de .badge-primary).

  • Rompiendo Caído .badge-pill; utilice la utilidad .rounded-pill en su lugar.

  • Rompiendo Se eliminaron los estilos de desplazamiento y enfoque para los elementos <a> y <button>.

  • Se aumentó el relleno predeterminado para las insignias de .25em/.5em a .35em/.65em.

  • Se simplificó la apariencia predeterminada de las rutas de navegación eliminando padding, background-colory border-radius.

  • Se agregó una nueva propiedad personalizada de CSS --bs-breadcrumb-divider para una fácil personalización sin necesidad de volver a compilar CSS.

Botones

  • Rompiendo Botones de alternancia, con casillas de verificación o radios, ya no requieren JavaScript y tienen un nuevo marcado. Ya no requerimos un elemento envolvente, agregue .btn-check al <input>y emparéjelo con cualquier clase .btn en <label>. Ver #30650. Los documentación para esto se han movido de nuestra página Botones a la nueva sección Formularios.

  • Rompiendo Se eliminó .btn-block para utilidades. En lugar de usar .btn-block en .btn, envuelva sus botones con .d-grid y una utilidad .gap-* para espaciarlos como necesario. Cambie a clases responsive para tener aún más control sobre ellas. Lea los documentación para ver algunos ejemplos.

  • Actualizamos nuestros mixins button-variant() y button-outline-variant() para admitir parámetros adicionales.

  • Botones actualizados para garantizar un mayor contraste en los estados activo y flotante.

  • Los botones deshabilitados ahora tienen pointer-events: none;.

Tarjeta

  • Rompiendo Se eliminó .card-deck a favor de nuestra cuadrícula. Envuelva sus tarjetas en clases de columnas y agregue un contenedor principal .row-cols-* para recrear mazos de cartas (pero con más control sobre la alineación responsive).

  • Rompiendo Se eliminó .card-columns a favor de la masonería. Ver #28922.

  • Rompiendo Se reemplazó el acordeón basado en .card por un nuevo componente Acordeón.

  • Se agregó una nueva .carousel-dark variante para texto, controles e indicadores oscuros ( ideal para fondos más claros).

  • Se reemplazaron los íconos de chevron para los controles del carrusel con nuevos SVG de Iconos de Bootstrap.

Botón cerrar

  • Rompiendo Se cambió el nombre de .close a .btn-close para obtener un nombre menos genérico.

  • Los botones de cierre ahora usan una background-image (SVG incrustado) en lugar de un &times; en el HTML, lo que permite una personalización más sencilla sin necesidad de tocar el marcado.

  • Se agregó una nueva variante .btn-close-white que usa filter: invert(1) para permitir un mayor contraste para descartar íconos contra fondos más oscuros.

Collapse

  • Se eliminó el anclaje de desplazamiento para acordeones.

  • Se agregó una nueva variante .dropdown-menu-dark y variables asociadas para menús desplegables oscuros bajo demanda.

  • Se agregó una nueva variable para $dropdown-padding-x.

  • Se oscureció el divisor desplegable para mejorar el contraste.

  • Rompiendo Todos los eventos del menú desplegable ahora se activan en el botón de alternancia del menú desplegable y luego se distribuyen en el elemento principal.

  • Los menús desplegables ahora tienen un atributo data-bs-popper="static" establecido cuando la posición del menú desplegable es estática 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.

  • Rompiendo Se eliminó la opción flip para el complemento desplegable en favor de la configuración nativa de Popper. Ahora puede desactivar el comportamiento de volteo pasando una matriz vacía para fallbackPlacements opción en el modificador flip .

  • Ahora se puede hacer clic en los menús desplegables con una nueva opción autoClose para controlar el comportamiento de cierre automático. Puede utilizar esta opción para aceptar el clic dentro o fuera del menú desplegable para hacerlo interactivo.

  • Los menús desplegables ahora admiten .dropdown-itemenvueltos en <li>s.

Jumbotron

Grupo de lista

  • Se agregaron nuevas variables null para font-size, font-weight, colory :hover color hasta la clase .nav-link .
  • Romper Las barras de navegación ahora requieren un contenedor en su interior (para simplificar drásticamente los requisitos de espaciado y el CSS requerido).
  • Rompiendo La clase .active ya no se puede aplicar a .nav-items, debe aplicarse directamente en .nav-links.

Offcanvas

Paginación

  • Los enlaces de paginación ahora tienen un margin-left personalizable que se redondea dinámicamente en todas las esquinas cuando se separan unos de otros.

  • Se agregaron transitiona los enlaces de paginación.

Popovers

  • Rompiendo Se cambió el nombre de .arrow a .popover-arrow en nuestra plantilla de ventana emergente predeterminada.

  • Se cambió el nombre de la opción whiteList a allowList.

Spinners

  • Los controles giratorios ahora respetan prefers-reduced-motion: reduce al ralentizar las animaciones. Ver #31882.

  • Alineación vertical mejorada de la ruleta.

Toasts

  • Las tostadas ahora se pueden posicionar en un .toast-container con la ayuda de utilidades de posicionamiento.

  • Se cambió la duración predeterminada del toast a 5 segundos.

  • Se eliminó el overflow: hidden de los mensajes del sistema y se reemplazó con border-radiusadecuados con funciones calc() .

Tooltips

  • Rompiendo Se cambió el nombre de .arrow a .tooltip-arrow en nuestra plantilla de tooltips predeterminada.

  • Rompiendo El valor predeterminado para fallbackPlacements se cambia a ['top', 'right', 'bottom', 'left'] para una mejor ubicación de los elementos popper.

  • Rompiendo Se cambió el nombre de la opción whiteList a allowList.

Utilidades

  • Última hora Se cambiaron los nombres de varias utilidades para usar nombres de propiedades lógicas en lugar de nombres direccionales con la adición de soporte RTL:

    • Renombrado .float-left y .float-right a .float-start y .float-end.
    • Renombrado .border-left y .border-right a .border-start y .border-end.
    • Renombrado .rounded-left y .rounded-right a .rounded-start y .rounded-end.
    • Renombrado .ml-* y .mr-* a .ms-* y .me-*.
    • Renombrado .pl-* y .pr-* a .ps-* y .pe-*.
    • Renombrado .text-*-left y .text-*-right a .text-*-start y .text-*-end.

  • Últimas Márgenes negativos deshabilitados de forma predeterminada.

  • Se agregó una nueva clase .bg-body para configurar rápidamente el fondo del <body>en 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 agregó el nuevo .translate-middle-x & Utilidades .translate-middle-y para centrar horizontal o verticalmente elementos posicionados absolutos/fijos.

  • Se agregaron nuevas border-width (utilidades).

  • Rompiendo Se cambió el nombre de .text-monospace a .font-monospace.

  • Rompiendo Se eliminó .text-hide porque es un método anticuado para ocultar texto que ya no debería usarse.

  • Se agregaron utilidades .fs-* para las utilidades font-size (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 Sass.

  • Rompiendo Se cambió el nombre de las utilidades .font-weight-* a .fw-* para mayor brevedad y coherencia. .

  • Últimas Se cambió el nombre de la utilidad .font-italic a .fst-italic para mayor brevedad y coherencia con las nuevas Utilidad .fst-normal .

  • Se agregó .d-grid para mostrar utilidades y nuevas utilidades gap (.gap) para diseños CSS Grid y flexbox.

  • Rompiendo Se eliminaron .rounded-sm y rounded-lgy se introdujo una nueva escala de clases. , .rounded-0 a .rounded-3. Ver #31687.

  • Se agregaron nuevas utilidades line-height : .lh-1, .lh-sm, .lh-base y .lh-lg. Consulte aquí.

  • Movimos la utilidad .d-none en nuestro CSS para darle más peso sobre otras utilidades de visualización.

  • Se extendió el asistente .visually-hidden-focusable para que también funcione en contenedores, usando :focus-within.

Ayudantes

  • Último Se ha cambiado el nombre de los ayudantes de inserción responsive a ayudantes de ratio con nuevos nombres de clases y comportamientos mejorados, así como una útil variable CSS.

    • Se ha cambiado el nombre de las clases para cambiar by a x en la relación de aspecto. Por ejemplo, .ratio-16by9 ahora es .ratio-16x9.
    • Hemos eliminado el .embed-responsive-item y el selector de grupo de elementos en favor de un .ratio > * selector. No se necesitan más clases y el asistente de proporción ahora funciona con cualquier elemento HTML.
    • El mapa Sass $embed-responsive-aspect-ratios ha sido renombrado a $aspect-ratios y sus valores han sido simplificado para incluir el nombre de la clase y el porcentaje como el par key: value .
    • Las variables CSS ahora se generan e incluyen para cada valor en el mapa Sass. Modifique la variable --bs-aspect-ratio en .ratio para crear cualquier relación de aspecto personalizada.

  • Última hora Las clases de “lector de pantalla” ahora son clases “visualmente ocultas”.

    • Cambié el archivo Sass de scss/helpers/_screenreaders.scss a scss/helpers/_visually-hidden.scss
    • Renombrado .sr-only y .sr-only-focusable a .visually-hidden y .visually-hidden-focusable
    • Renombrados mixins sr-only() y sr-only-focusable() a visually-hidden() y visually-hidden-focusable().

  • bootstrap-utilities.css ahora también incluye nuestros ayudantes. Ya no es necesario importar los ayudantes en compilaciones personalizadas.

JavaScript

  • Se eliminó la dependencia de jQuery y se reescribieron los complementos para que estén en JavaScript normal.

  • Últimas Los atributos de datos para todos los complementos de JavaScript ahora tienen espacios de nombres para ayudar a distinguir la funcionalidad de Bootstrap de la de terceros y de su propio código. Por ejemplo, usamos data-bs-toggle en lugar de data-toggle.

  • Todos los complementos ahora pueden aceptar un selector de CSS como primer argumento. Puedes pasar un elemento DOM o cualquier selector de CSS válido para crear una nueva instancia de el complemento:

    const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

  • popperConfig se puede pasar como una función que acepta la configuración Popper predeterminada de Bootstrap como argumento, para que puedas fusionar esta configuración predeterminada a tu manera. Se aplica a menús desplegables, ventanas emergentes e tooltips.

  • El valor predeterminado para fallbackPlacements se cambia a ['top', 'right', 'bottom', 'left'] para una mejor ubicación de los elementos Popper. Se aplica a menús desplegables, ventanas emergentes e tooltips.

  • Se eliminó el guión bajo de métodos estáticos públicos como _getInstance() → getInstance().