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 acolor-contrast()
que xa non está relacionada co espazo de cor YIQ. Ver #30168.$yiq-contrasted-threshold
é renomeado como$min-contrast-ratio
.$yiq-text-dark
e$yiq-text-light
son renomeados respectivamente a$color-contrast-dark
e$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 demedia-breakpoint-down(md)
apuntar ventanas gráficas máis pequenas quelg
).- 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 demedia-breakpoint-between(sm, md)
orientar as vistas entresm
elg
).
-
RomperElimináronse os estilos de impresión e
$enable-print-styles
as variables. As clases de exhibición impresa aínda están por aquí. Ver #28339 . -
RomperDeixáronse caer
color()
,theme-color()
, egray()
funcións a favor de variables. Ver #29083 . -
Romper
theme-color-level()
A función renomeada acolor-level()
e agora acepta calquera cor que desexe en lugar de só$theme-color
cores. Ver #29083 Coidado:color-level()
máis tarde deixouse caer env5.0.0-alpha3
. -
RomperRenomeado
$enable-prefers-reduced-motion-media-query
e$enable-pointer-cursor-for-buttons
para$enable-reduced-motion
e$enable-button-pointers
por brevidade. -
RomperEliminouse a
bg-gradient-variant()
mestura. Use a.bg-gradient
clase para engadir degradados aos elementos en lugar das.bg-gradient-*
clases xeradas. -
Romper Elimináronse mixins obsoletos anteriormente:
hover
,hover-focus
,plain-hover-focus
ehover-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()
-
Romper
scale-color()
Función renomeada ashift-color()
para evitar colisións coa función de escala de cores de Sass. -
box-shadow
Os mixins agora permitennull
valores e eliminannone
varios 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-interval
foi eliminado a favor dun novo sistema de cores. Todaslighten()
e asdarken()
funcións da nosa base de código substitúense portint-color()
eshade-color()
. Estas funcións mesturarán a cor con branco ou negro en lugar de cambiar a súa luminosidade nunha cantidade fixa. Oshift-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-900
a$black
. -
Para admitir o noso sistema de cores, engadimos novas funcións
tint-color()
e personalizadosshade-color()
para mesturar as nosas cores de forma adecuada.
Actualizacións da grella
-
Novo punto de interrupción! Engadiuse un novo
xxl
punto de interrupción para1400px
e 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 aproximadamente24px
, a partir de30px
). 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-gutters
para.g-0
que coincida coas novas utilidades de canalón.
- Engadiuse unha nova clase de canalóns (
-
As columnas xa non se
position: relative
aplicaron, polo que é posible que teñas que engadir.position-relative
algúns elementos para restaurar ese comportamento. -
RomperAbandonou varias
.order-*
clases que moitas veces non se usaban. Agora só ofrecemos.order-1
para.order-5
fóra da caixa. -
RomperBaixou o
.media
compoñ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.css
agora só se aplicabox-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-classes
xa non desactiva a xeración de clases de contedores. Ver #29146. -
Actualizouse o
make-col
mixin por defecto para columnas iguais sen un tamaño especificado.
Contido, reinicio, etc
-
RFS agora está activado por defecto. Os títulos que usan o
font-size()
mixin axustaranse automaticamentefont-size
a 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-sizes
mapa Sass. Tamén se eliminaron as$display-*-weight
variables individuais para un s único$display-font-weight
e axustadofont-size
. -
Engadíronse dous novos
.display-*
tamaños de título.display-5
e.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-light
e.thead-dark
quítanse a favor das.table-*
clases variantes que se poden usar para todos os elementos da táboa (thead
,tbody
,tfoot
,tr
e )th
.td
-
RomperO
table-row-variant()
mixin é renomeadotable-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
-y
e-x
. -
Romper
.pre-scrollable
Clase 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-justify
Clase abandonada . Ver #29793 -
padding-left
Restablece a horizontal predeterminada<ul>
e os<ol>
elementos do navegador40px
a2rem
. -
Engadida
$enable-smooth-scroll
, que se aplicascroll-behavior: smooth
a nivel global, excepto para os usuarios que solicitan movemento reducido medianteprefers-reduced-motion
consultas 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,
start
eend
en lugar deleft
eright
.
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-file
e.form-file
foron substituídos por estilos personalizados enriba de.form-control
..custom-range
é agora.form-range
.- Caído nativo
.form-control-file
e.form-control-range
.
-
RomperCaído
.input-group-append
e.input-group-prepend
. Agora só pode engadir botóns e.input-group-text
como 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-validation
clase 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-text
xa non establecedisplay
, 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 conmultiple
. -
Ficheiros de orixe Sass reorganizados en
scss/forms/
, incluídos os estilos de grupos de entrada.
Compoñentes
- Valores unificados
padding
para alertas, rutas de navegación, tarxetas, menús despregables, grupos de listas, modais, popovers e informacións sobre ferramentas que se basean na nosa$spacer
variable. 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 usancurrentColor
.
Insignias
-
RomperEliminaron todas
.badge-*
as clases de cores para as utilidades de fondo (por exemplo, use.bg-primary
en lugar de.badge-primary
). -
RomperDescartado
.badge-pill
: use a.rounded-pill
utilidade 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
/.5em
a.35em
/.65em
.
Migas de pan
-
Simplificouse a aparencia predeterminada das migas de pan eliminando
padding
,background-color
eborder-radius
. -
Engadiuse unha nova propiedade personalizada CSS
--bs-breadcrumb-divider
para 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-check
ao. 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-block
por servizos públicos. En lugar de usar.btn-block
o.btn
, envolve os botóns cunha.d-grid
utilidade.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()
ebutton-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-deck
en 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-columns
a favor da Masonería. Ver #28922 . -
RomperSubstituíuse o
.card
acordeón baseado por un novo compoñente de acordeón .
Carrusel
-
Engadiuse unha nova
.carousel-dark
variante 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
.close
o nome.btn-close
por 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-white
variante que se usafilter: 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-dark
variante 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 edata-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
flip
eliminada para o complemento despregable a favor da configuración nativa de Popper. Agora podes desactivar o comportamento de voltear pasando unha matriz baleira para afallbackPlacements
opción no modificador de voltear . -
Agora pódese facer clic nos menús despregables cunha nova
autoClose
opció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-item
s 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-numbered
modificador aos grupos de listas.
Navs e pestanas
- Engadíronse novas
null
variables parafont-size
,font-weight
,color
e:hover
color
á.nav-link
clase.
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-left
que se redondean dinámicamente en todas as esquinas cando están separadas unhas doutras. -
Engadiuse
transition
s ás ligazóns de paxinación.
Popovers
-
RomperRenombrado
.arrow
no.popover-arrow
noso modelo de popover predeterminado. -
whiteList
Opción renomeada aallowList
.
Spinners
-
Os spinners agora honran
prefers-reduced-motion: reduce
diminuíndo as animacións. Ver #31882 . -
Mellora a aliñación vertical do xiro.
Torradas
-
As tostadas agora pódense colocar nun
.toast-container
coa axuda das utilidades de posicionamento . -
Cambiouse a duración predeterminada do brindis a 5 segundos.
-
Retiradas
overflow: hidden
das torradas e substituídas porborder-radius
s propias concalc()
funcións.
Suxestións sobre ferramentas
-
RomperCambiou o nome
.arrow
a.tooltip-arrow
no noso modelo predeterminado de información sobre ferramentas. -
RomperO valor predeterminado para o
fallbackPlacements
cámbiase a['top', 'right', 'bottom', 'left']
para unha mellor colocación dos elementos popper. -
Romper
whiteList
Opción renomeada aallowList
.
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-left
e.float-right
a.float-start
e.float-end
. - Renomeado
.border-left
e.border-right
a.border-start
e.border-end
. - Renomeado
.rounded-left
e.rounded-right
a.rounded-start
e.rounded-end
. - Renomeado
.ml-*
e.mr-*
a.ms-*
e.me-*
. - Renomeado
.pl-*
e.pr-*
a.ps-*
e.pe-*
. - Renomeado
.text-left
e.text-right
a.text-start
e.text-end
.
- Renomeado
-
RomperDesactiváronse as marxes negativas por defecto.
-
Engadiuse unha nova
.bg-body
clase para configurar rapidamente o<body>
fondo de elementos adicionais. -
Engadíronse novas utilidades de posición para
top
,right
,bottom
eleft
. Os valores inclúen0
,50%
, e100%
para cada propiedade. -
Engadíronse novas
.translate-middle-x
e.translate-middle-y
utilidades para centrar horizontal ou verticalmente os elementos posicionados absolutos/fixos. -
Engadíronse novas
border-width
utilidades . -
RomperRenombrado
.text-monospace
a.font-monospace
. -
RomperEliminado
.text-hide
xa que é un método anticuado para ocultar texto que xa non se debería usar. -
Engadidas
.fs-*
utilidades parafont-size
utilidades (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-grid
para mostrar utilidades e novasgap
utilidades (.gap
) para CSS Grid e deseños de flexbox. -
RomperEliminouse
.rounded-sm
erounded-lg
, e introduciu unha nova escala de clases,.rounded-0
a.rounded-3
. Ver #31687 . -
Engadíronse novas
line-height
utilidades:.lh-1
,.lh-sm
,.lh-base
e.lh-lg
. Vexa aquí . -
Movemos a
.d-none
utilidade no noso CSS para darlle máis peso sobre outras utilidades de visualización. -
Estendeuse o
.visually-hidden-focusable
axudante 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
by
ax
relación de aspecto. Por exemplo,.ratio-16by9
é agora.ratio-16x9
. - Eliminamos o
.embed-responsive-item
selector 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-ratios
mapa Sass cambiou o nome a$aspect-ratios
e os seus valores simplificáronse para incluír o nome da clase e a porcentaxe comokey: value
par. - Agora xéranse e inclúense variables CSS para cada valor do mapa Sass. Modifique a
--bs-aspect-ratio
variable.ratio
para crear calquera relación de aspecto personalizada .
- Cambiouse o nome das clases para cambiar
-
Romper As clases de "lector de pantalla" agora son clases "visualmente ocultas" .
- Cambiouse o ficheiro Sass de
scss/helpers/_screenreaders.scss
ascss/helpers/_visually-hidden.scss
- Renomeado
.sr-only
e.sr-only-focusable
a.visually-hidden
e.visually-hidden-focusable
- Renombrado
sr-only()
esr-only-focusable()
mesturado avisually-hidden()
evisually-hidden-focusable()
.
- Cambiouse o ficheiro Sass de
-
bootstrap-utilities.css
agora 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-toggle
en lugar dedata-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"]')
-
popperConfig
pó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
fallbackPlacements
cá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()
.