Ir ao contido principal Ir á navegación de documentos
in English

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.

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. Consulta 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 vez de media-breakpoint-between(sm, md)orientar as vistas 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.

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

  • 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

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.

  • 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 usar .btn-blocko .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 .

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

Grupo de listas

  • Engadíronse novas nullvariables para font-size, font-weight, colore :hover colorá .nav-linkclase.
  • RomperAgora as barras de navegación requiren un contedor dentro (para simplificar drasticamente os requisitos de espazo e é necesario CSS).

Off lenzo

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 e inclúense variables CSS para cada valor do 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().