Saltar al contenido principal Saltar a la navegación de documentos
in English

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

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-check.form-checkes ahora
    • .custom-check.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 í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

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.

  • 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 .

  • 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 &times;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.

  • 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 y data-bs-popper="none"cuando 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

Grupo de lista

  • Se agregaron nuevas nullvariables para font-size, font-weight, colory :hover colora la .nav-linkclase.
  • RoturaLas barras de navegación ahora requieren un contenedor dentro (para simplificar drásticamente los requisitos de espacio y CSS requerido).

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:

    var modal = new bootstrap.Modal('#myModal')
var 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().