Migrando a v5

Rastrexa e revisa os cambios nos ficheiros fonte, a documentación e os compoñentes de Bootstrap para axudarche a migrar da versión 4 á versión 5.

Nesta páxina

Dependencias

Descartou jQuery.
Actualizouse de Popper v1.x a Popper v2.x.
Substituíuse Libsass por Dart Sass xa que o noso compilador Sass dado Libsass quedou en desuso.
Migramos de Jekyll a Hugo para construír a nosa documentación

Soporte de navegador

Abandonou Internet Explorer 10 e 11
Microsoft Edge caído < 16 (Legacy Edge)
Descartou Firefox < 60
Safari abandonado < 12
Safari de iOS < 12 caído
Chrome abandonado < 60

Cambios na documentación

Páxina de inicio, deseño de documentos e pé de páxina redeseñados.
Engadida unha nova guía de paquetería .
Engadiuse unha nova sección Personalizar , que substitúe a páxina Temática da versión 4 , con novos detalles sobre Sass, opcións de configuración globais, esquemas de cores, variables CSS e moito máis.
Reorganizou toda a documentación do formulario nunha nova sección de Formularios , dividindo o contido en páxinas máis centradas.
Do mesmo xeito, actualizouse a sección Disposición , para concretar o contido da grella con máis claridade.
Cambiou o nome da páxina do compoñente "Navs" a "Navs & Tabs".
Cambiou o nome da páxina "Cheques" a "Cheques e radios".
Redeseñamos a barra de navegación e engadiu un novo subnav para facilitar a navegación polos nosos sitios e versións de documentos.
Engadiuse un novo atallo de teclado para o campo de busca: Ctrl + /.

Sass

Eliminamos as combinacións de mapas Sass predeterminadas para facilitar a eliminación de valores redundantes. Ten en conta que agora tes que definir todos os valores nos mapas de Sass como $theme-colors. Consulte como tratar cos mapas Sass .
RomperCambiouse o nome da color-yiq()función e das variables relacionadas a color-contrast()que xa non está relacionada co espazo de cor YIQ. Ver #30168.
- $yiq-contrasted-thresholdé renomeado como $min-contrast-ratio.
- $yiq-text-darke $yiq-text-lightson renomeados respectivamente a $color-contrast-darke $color-contrast-light.
RomperOs parámetros dos mixins de consulta de medios cambiaron para un enfoque máis lóxico.
- media-breakpoint-down()usa o propio punto de interrupción en lugar do seguinte punto de interrupción (p. ex., media-breakpoint-down(lg)en lugar de media-breakpoint-down(md)apuntar ventanas gráficas máis pequenas que lg).
- Do mesmo xeito, o segundo parámetro en media-breakpoint-between()tamén usa o propio punto de interrupción en lugar do seguinte punto de interrupción (p. ex., media-between(sm, lg)en lugar das media-breakpoint-between(sm, md)vistas de destino entre sme lg).
RomperElimináronse os estilos de impresión e $enable-print-stylesas variables. As clases de exhibición impresa aínda están por aquí. Ver #28339 .
RomperDeixáronse caer color(), theme-color(), e gray()funcións a favor de variables. Ver #29083 .
Rompertheme-color-level()A función renomeada a color-level()e agora acepta calquera cor que desexe en lugar de só $theme-colorcores. Ver #29083 Coidado: color-level() máis tarde deixouse caer en v5.0.0-alpha3.
RomperRenomeado $enable-prefers-reduced-motion-media-querye $enable-pointer-cursor-for-buttonspara $enable-reduced-motione $enable-button-pointerspor brevidade.
RomperQuitouse a bg-gradient-variant()mestura. Use a .bg-gradientclase para engadir degradados aos elementos en lugar das .bg-gradient-*clases xeradas.
Romper Elimináronse mixins obsoletos anteriormente:
- hover, hover-focus, plain-hover-focusehover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(tamén descartou a clase de utilidade asociada, .text-hide)
- visibility()
- form-control-focus()
Romperscale-color()Función renomeada a shift-color()para evitar colisións coa función de escala de cores de Sass.
box-shadowOs mixins agora permiten nullvalores e eliminan nonevarios argumentos. Ver #30394 .
O border-radius()mixin agora ten un valor predeterminado.

Sistema de cor

O sistema de cores que funcionou color-level()e $theme-color-intervalfoi eliminado a favor dun novo sistema de cores. Todas lighten()e as darken()funcións da nosa base de código substitúense por tint-color()e shade-color(). Estas funcións mesturarán a cor con branco ou negro en lugar de cambiar a súa luminosidade nunha cantidade fixa. O shift-color()matizará ou matizará unha cor dependendo de se o seu parámetro de peso é positivo ou negativo. Consulte #30622 para obter máis detalles.
Engadíronse novos tons e matices para cada cor, proporcionando nove cores separadas para cada cor base, como novas variables de Sass.
Contraste de cores mellorado. Relación de contraste de cor aumentada de 3:1 a 4,5:1 e cores azul, verde, cian e rosa actualizadas para garantir o contraste WCAG 2.1 AA. Tamén cambiou a nosa cor de contraste de cor de $gray-900a $black.
Para admitir o noso sistema de cores, engadimos novas funcións tint-color()e personalizados shade-color()para mesturar as nosas cores de forma adecuada.

Actualizacións da grella

Novo punto de interrupción! Engadiuse un novo xxlpunto de interrupción para 1400pxe para arriba. Non hai cambios en todos os demais puntos de interrupción.
Canaletas melloradas. Agora as cunetas están configuradas en rems e son máis estreitas que v4 ( 1.5rem, ou aproximadamente 24px, a partir de 30px). Isto aliña as cunetas do noso sistema de rede coas nosas utilidades de espazamento.
- Engadiuse unha nova clase de canalóns ( .g-*, .gx-*, e .gy-*) para controlar canlóns horizontais/verticais, canalóns horizontais e canlóns verticais.
- RomperCambiou o nome .no-gutterspara .g-0que coincida coas novas utilidades de canalón.
As columnas xa non se position: relativeaplicaron, polo que é posible que teñas que engadir .position-relativealgúns elementos para restaurar ese comportamento.
RomperAbandonou varias .order-*clases que moitas veces non se usaban. Agora só ofrecemos .order-1para .order-5fóra da caixa.
RomperBaixou o .mediacompoñente xa que se pode replicar facilmente con utilidades. Vexa #28265 e a páxina de utilidades flexibles para ver un exemplo .
Romper bootstrap-grid.cssagora só se aplica box-sizing: border-boxá columna en lugar de restablecer o tamaño global da caixa. Deste xeito, os nosos estilos de grade pódense usar en máis lugares sen interferencias.
$enable-grid-classesxa non desactiva a xeración de clases de contedores. Ver #29146.
Actualizouse o make-colmixin por defecto para columnas iguais sen un tamaño especificado.

Contido, reinicio, etc

RFS agora está activado por defecto. Os títulos que usan ofont-size()mixin axustaranse automaticamentefont-sizea escala coa ventana gráfica. Esta función estaba activada anteriormente coa versión 4.
RomperRevisamos a nosa tipografía de visualización para substituír as nosas $display-*variables e cun $display-font-sizesmapa Sass. Tamén se eliminaron as $display-*-weightvariables individuais para un s único $display-font-weighte axustado font-size.
Engadíronse dous novos .display-*tamaños de título .display-5e .display-6.
As ligazóns están subliñadas por defecto (non só ao pasar o cursor), a non ser que formen parte de compoñentes específicos.
As táboas redeseñadas para actualizar os seus estilos e reconstruílas con variables CSS para obter máis control sobre o estilo.
RomperAs táboas aniñadas xa non herdan estilos.
Romper .thead-lighte .thead-darkquítanse a favor das .table-*clases variantes que se poden usar para todos os elementos da táboa ( thead, tbody, tfoot, tre ) th.td
RomperO table-row-variant()mixin é renomeado table-variant()e só acepta 2 parámetros: $color(nome da cor) e $value(código de cor). A cor do bordo e as cores de acento calcúlanse automaticamente en función das variables do factor da táboa.
Divide as variables de recheo de celas da táboa en -ye -x.
Romper.pre-scrollableClase abandonada . Ver #29135
Romper .text-*as utilidades xa non engaden estados de hover e foco ás ligazóns. .link-*no seu lugar pódense usar clases auxiliares. Ver #29267
Romper.text-justifyClase abandonada . Ver #29793
Romper <hr>agora úsanse elementos heighten lugar de borderpara apoiar mellor o sizeatributo. Isto tamén permite o uso de utilidades de recheo para crear divisores máis grosos (por exemplo, <hr class="py-1">).
padding-leftRestablece a horizontal predeterminada <ul>e os <ol>elementos do navegador 40pxa 2rem.
Engadida $enable-smooth-scroll, que se aplica scroll-behavior: smootha nivel global, excepto para os usuarios que solicitan movemento reducido mediante prefers-reduced-motionconsultas multimedia. Ver #31877

RTL

As variables, as utilidades e as mesturas específicas de dirección horizontal foron renomeadas para usar propiedades lóxicas como as que se atopan nos deseños de caixas flexibles, por exemplo, starte enden lugar de lefte right.

Formularios

Engadíronse novos formularios flotantes! Promovemos o exemplo de etiquetas flotantes para que os compoñentes de formulario sexan totalmente compatibles. Consulta a nova páxina de etiquetas flotantes.
Romper Elementos de formulario nativos e personalizados consolidados. Consolidáronse as caixas de verificación, as radios, as seleccións e outras entradas que tiñan clases nativas e personalizadas na versión 4. Agora case todos os nosos elementos de formulario son totalmente personalizados, a maioría sen necesidade de HTML personalizado.
- .custom-checké agora .form-check.
- .custom-check.custom-switché agora .form-check.form-switch.
- .custom-selecté agora .form-select.
- .custom-filee .form-fileforon substituídos por estilos personalizados enriba de .form-control.
- .custom-rangeé agora .form-range.
- Caído nativo .form-control-filee .form-control-range.
RomperCaído .input-group-appende .input-group-prepend. Agora só pode engadir botóns e .input-group-textcomo fillos directos dos grupos de entrada.
Finalmente solucionouse o raio de borde perdido no grupo de entrada con erro de validación engadindo unha .has-validationclase adicional aos grupos de entrada con validación.
Romper Eliminaron as clases de deseño específicas do formulario para o noso sistema de cuadrícula. Use a nosa rede e utilidades en lugar de .form-group, .form-row, ou .form-inline.
RomperAgora as etiquetas dos formularios requiren .form-label.
Romper .form-textxa non establece display, o que lle permite crear texto de axuda en liña ou bloquear como desexe só cambiando o elemento HTML.
As iconas de validación xa non se aplican a <select>s con multiple.
Ficheiros de orixe Sass reorganizados en scss/forms/, incluídos os estilos de grupos de entrada.

Compoñentes

Valores unificados paddingpara alertas, rutas de navegación, tarxetas, menús despregables, grupos de listas, modais, popovers e informacións sobre ferramentas que se basean na nosa $spacervariable. Ver #30564 .

Acordeón

Engadiuse un novo compoñente de acordeón .

Alertas

Agora as alertas teñen exemplos con iconas .
Elimináronse os estilos personalizados para <hr>s en cada alerta xa que xa usan currentColor.

Insignias

RomperEliminaron todas .badge-*as clases de cores para as utilidades de fondo (por exemplo, use .bg-primaryen lugar de .badge-primary).
RomperDescartado .badge-pill: use a .rounded-pillutilidade no seu lugar.
RomperElimináronse os estilos de desprazamento e foco para <a>e <button>elementos.
Aumentou o recheo predeterminado para as insignias de .25em/ .5ema .35em/ .65em.

Migas de pan

Simplificouse a aparencia predeterminada das migas de pan eliminando padding, background-colore border-radius.
Engadiuse unha nova propiedade personalizada CSS --bs-breadcrumb-dividerpara unha personalización sinxela sen necesidade de recompilar CSS.

Botóns

Romper Os botóns de alternancia , con caixas de verificación ou radios, xa non requiren JavaScript e teñen un novo marcado. Xa non necesitamos un elemento de envoltura,engadimos.btn-checkao. Ver #30650 . Os documentos para isto pasaron da nosa páxina de Botóns á nova sección de Formularios.<input>.btn<label>
Romper Caído .btn-blockpor servizos públicos. En lugar de usalos .btn-blocken .btn, envolve os botóns cunha .d-gridutilidade .gap-*para espacialos segundo sexa necesario. Cambia ás clases receptivas para obter aínda máis control sobre elas. Lea os documentos para ver algúns exemplos.
Actualizouse o noso button-variant()e button-outline-variant()mixins para admitir parámetros adicionais.
Botóns actualizados para garantir un maior contraste nos estados activos e de paso.
Os botóns desactivados agora teñen pointer-events: none;.

Tarxeta

RomperCaído .card-decken favor da nosa grella. Envolve as túas tarxetas en clases de columnas e engade un .row-cols-*contedor principal para recrear mazos de cartas (pero con máis control sobre o aliñamento sensible).
RomperCaído .card-columnsa favor da Masonería. Ver #28922 .
RomperSubstituíuse o .cardacordeón baseado por un novo compoñente de acordeón .

Carrusel

Engadiuse unha nova .carousel-darkvariante para o texto escuro, os controis e os indicadores (ideal para fondos máis claros).
Substituíronse as iconas de chevron para os controis de carrusel por novos SVG de Bootstrap Icons .

Botón Pechar

RomperCambiou .closeo nome .btn-closepor un nome menos xenérico.
Os botóns de pechar agora usan un background-image(SVG incrustado) en lugar de un ×no HTML, o que permite unha personalización máis sinxela sen necesidade de tocar o seu marcado.
Engadiuse unha nova .btn-close-whitevariante que se usa filter: invert(1)para activar iconas de exclusión de contraste máis alto sobre fondos máis escuros.

Colapsar

Eliminouse a ancoraxe de scroll para acordeóns.

Despregables

Engadiuse unha nova .dropdown-menu-darkvariante e as variables asociadas para os menús despregables escuros baixo demanda.
Engadida unha nova variable para $dropdown-padding-x.
Escureceu o divisor do menú despregable para mellorar o contraste.
RomperTodos os eventos para o menú despregable agora desenvólvense no botón de alternancia do menú despregable e, a continuación, engádense ao elemento principal.
Os menús despregables agora teñen un data-bs-popper="static"atributo definido cando o posicionamento do despregable é estático e data-bs-popper="none"cando o despregable está na barra de navegación. Isto engádese polo noso JavaScript e axúdanos a usar estilos de posición personalizados sen interferir co posicionamento de Popper.
RomperOpción flipeliminada para o complemento despregable a favor da configuración nativa de Popper. Agora podes desactivar o comportamento de voltear pasando unha matriz baleira para a fallbackPlacementsopción no modificador de voltear .
Agora pódese facer clic nos menús despregables cunha nova autoCloseopción para xestionar o comportamento de peche automático . Podes usar esta opción para aceptar o clic dentro ou fóra do menú despregable para facelo interactivo.
Os menús despregables agora admiten .dropdown-items envoltos en <li>s.

Jumbotron

RomperDeixouse caer o compoñente jumbotron xa que se pode replicar con utilidades. Vexa o noso novo exemplo de Jumbotron para ver unha demostración.

Grupo de listas

Engadiuse un novo .list-group-numberedmodificador aos grupos de listas.

Navs e pestanas

Engadíronse novas nullvariables para font-size, font-weight, colore :hover colorá .nav-linkclase.

Barras de navegación

RomperAgora as barras de navegación requiren un contedor dentro (para simplificar drasticamente os requisitos de espazo e é necesario CSS).

Off lenzo

Engadiuse o novo compoñente offcanvas .

Paxinación

Agora as ligazóns de paxinación teñen elementos personalizables margin-leftque se redondean dinámicamente en todas as esquinas cando están separadas unhas doutras.
Engadiuse transitions ás ligazóns de paxinación.

Popovers

RomperRenombrado .arrowno .popover-arrownoso modelo de popover predeterminado.
whiteListOpción renomeada a allowList.

Spinners

Os spinners agora honran prefers-reduced-motion: reducediminuíndo as animacións. Ver #31882 .
Mellora a aliñación vertical do xiro.

Torradas

As tostadas agora pódense colocar nun .toast-containercoa axuda das utilidades de posicionamento .
Cambiouse a duración predeterminada do brindis a 5 segundos.
Retiradas overflow: hiddendas torradas e substituídas por border-radiuss propias con calc()funcións.

Suxestións sobre ferramentas

RomperCambiou o nome .arrowa .tooltip-arrowno noso modelo predeterminado de información sobre ferramentas.
RomperO valor predeterminado para o fallbackPlacementscámbiase a ['top', 'right', 'bottom', 'left']para unha mellor colocación dos elementos popper.
RomperwhiteListOpción renomeada a allowList.

Utilidades

RomperCambiouse o nome de varias utilidades para usar nomes de propiedade lóxica en lugar de nomes direccionais coa adición de compatibilidade con RTL:
- Renomeado .left-*e .right-*a .start-*e .end-*.
- Renomeado .float-lefte .float-righta .float-starte .float-end.
- Renomeado .border-lefte .border-righta .border-starte .border-end.
- Renomeado .rounded-lefte .rounded-righta .rounded-starte .rounded-end.
- Renomeado .ml-*e .mr-*a .ms-*e .me-*.
- Renomeado .pl-*e .pr-*a .ps-*e .pe-*.
- Renomeado .text-lefte .text-righta .text-starte .text-end.
RomperDesactiváronse as marxes negativas por defecto.
Engadiuse unha nova .bg-bodyclase para configurar rapidamente o <body>fondo de elementos adicionais.
Engadíronse novas utilidades de posición para top, right, bottome left. Os valores inclúen 0, 50%, e 100%para cada propiedade.
Engadíronse novas .translate-middle-xe .translate-middle-yutilidades para centrar horizontal ou verticalmente os elementos posicionados absolutos/fixos.
Engadíronse novas border-widthutilidades .
RomperRenombrado .text-monospacea .font-monospace.
RomperEliminado .text-hidexa que é un método anticuado para ocultar texto que xa non se debería usar.
Engadidas .fs-*utilidades para font-sizeutilidades (con RFS activado). Estes usan a mesma escala que os títulos predeterminados de HTML (1-6, de grande a pequeno) e pódense modificar mediante o mapa Sass.
Romper.font-weight-*Utilidades renomeadas en canto .fw-*á brevidade e coherencia.
Romper.font-style-*Utilidades renomeadas en canto .fst-*á brevidade e coherencia.
Engadido .d-gridpara mostrar utilidades e novas gaputilidades ( .gap) para CSS Grid e deseños de flexbox.
RomperEliminouse .rounded-sme rounded-lg, e introduciu unha nova escala de clases, .rounded-0a .rounded-3. Ver #31687 .
Engadíronse novas line-heightutilidades: .lh-1, .lh-sm, .lh-basee .lh-lg. Vexa aquí .
Movemos a .d-noneutilidade no noso CSS para darlle máis peso sobre outras utilidades de visualización.
Estendeuse o .visually-hidden-focusableaxudante para traballar tamén en contedores, usando :focus-within.

Axudantes

Romper Os axudantes de inserción responsive renombráronse aos axudantes de proporción con novos nomes de clases e comportamentos mellorados, así como unha variable CSS útil.
- Cambiouse o nome das clases para cambiar bya xrelación de aspecto. Por exemplo, .ratio-16by9é agora .ratio-16x9.
- Eliminamos o .embed-responsive-itemselector de grupos de elementos e a favor dun .ratio > *selector máis sinxelo. Non se necesita máis clase e o axudante de ratio agora funciona con calquera elemento HTML.
- O $embed-responsive-aspect-ratiosmapa Sass cambiou o nome a $aspect-ratiose os seus valores simplificáronse para incluír o nome da clase e a porcentaxe como key: valuepar.
- Agora xéranse variables CSS e inclúense para cada valor no mapa Sass. Modifique a --bs-aspect-ratiovariable .ratiopara crear calquera relación de aspecto personalizada .
Romper As clases de "lector de pantalla" agora son clases "visualmente ocultas" .
- Cambiouse o ficheiro Sass de scss/helpers/_screenreaders.scssascss/helpers/_visually-hidden.scss
- Renomeado .sr-onlye .sr-only-focusablea .visually-hiddene.visually-hidden-focusable
- Renombrado sr-only()e sr-only-focusable()mesturado a visually-hidden()e visually-hidden-focusable().
bootstrap-utilities.cssagora tamén inclúe os nosos axudantes. Xa non é necesario importar os axudantes nas compilacións personalizadas.

JavaScript

Eliminaron a dependencia de jQuery e reescribíronse os complementos para que estean en JavaScript normal.
RomperOs atributos de datos de todos os complementos de JavaScript están agora espaciados para axudar a distinguir a funcionalidade de Bootstrap de terceiros e do teu propio código. Por exemplo, usamos data-bs-toggleen lugar de data-toggle.
Todos os complementos agora poden aceptar un selector CSS como primeiro argumento. Podes pasar un elemento DOM ou calquera selector CSS válido para crear unha nova instancia do complemento:
```
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigpódese pasar como unha función que acepta a configuración de Popper predeterminada de Bootstrap como argumento, para que poida combinar esta configuración predeterminada ao seu xeito. Aplícase aos menús despregables, emerxentes e información sobre ferramentas.
O valor predeterminado para o fallbackPlacementscámbiase a ['top', 'right', 'bottom', 'left']para unha mellor colocación dos elementos Popper. Aplícase aos menús despregables, emerxentes e información sobre ferramentas.
Eliminouse o guión baixo dos métodos estáticos públicos como _getInstance()→ getInstance().