Ir para o conteúdo principal Pular para a navegação de documentos
in English

Migrando para v5

Acompanhe e revise as alterações nos arquivos de origem, documentação e componentes do Bootstrap para ajudá-lo a migrar da v4 para a v5.

Nesta página

Dependências

  • jQuery descartado.
  • Atualizado de Popper v1.x para Popper v2.x.
  • Substituído Libsass por Dart Sass, pois nosso compilador Sass, dado que o Libsass estava obsoleto.
  • Migrado de Jekyll para Hugo para construir nossa documentação

Suporte ao navegador

  • Descartou o Internet Explorer 10 e 11
  • Microsoft Edge < 16 (borda herdada) descartado
  • Firefox descartado < 60
  • Safári abandonado < 12
  • Safari iOS descartado < 12
  • Chrome descartado < 60

Alterações na documentação

  • Página inicial, layout de documentos e rodapé redesenhados.
  • Adicionado novo guia de encomendas .
  • Adicionada nova seção Personalizar , substituindo a página Theming da v4 , com novos detalhes sobre Sass, opções de configuração global, esquemas de cores, variáveis ​​CSS e muito mais.
  • Reorganizou toda a documentação do formulário em uma nova seção de formulários , dividindo o conteúdo em páginas mais focadas.
  • Da mesma forma, atualizou a seção Layout , para detalhar o conteúdo da grade com mais clareza.
  • Renomeação da página do componente “Navs” para “Navs & Tabs”.
  • Página “Cheques” renomeada para “Cheques e rádios”.
  • Redesenhamos a barra de navegação e adicionamos uma nova subnavegação para facilitar a navegação em nossos sites e versões de documentos.
  • Adicionado novo atalho de teclado para o campo de pesquisa: Ctrl + /.

Sass

  • Abandonamos as mesclagens de mapas Sass padrão para facilitar a remoção de valores redundantes. Tenha em mente que agora você precisa definir todos os valores nos mapas Sass como $theme-colors. Confira como lidar com mapas Sass .

  • QuebraFunção renomeada color-yiq()e variáveis ​​relacionadas color-contrast(), pois não estão mais relacionadas ao espaço de cores YIQ. Consulte #30168.

    • $yiq-contrasted-thresholdé renomeado para $min-contrast-ratio.
    • $yiq-text-darke $yiq-text-lightsão renomeados respectivamente para $color-contrast-darke $color-contrast-light.

  • QuebraOs parâmetros de mixins de consulta de mídia foram alterados para uma abordagem mais lógica.

    • media-breakpoint-down()usa o próprio ponto de interrupção em vez do próximo ponto de interrupção (por exemplo, media-breakpoint-down(lg)em vez de media-breakpoint-down(md)segmentar viewports menores que lg).
    • Da mesma forma, o segundo parâmetro em media-breakpoint-between()também usa o próprio ponto de interrupção em vez do próximo ponto de interrupção (por exemplo, media-between(sm, lg)em vez das portas de media-breakpoint-between(sm, md)visualização de destino entre sme lg).

  • QuebraEstilos de impressão e $enable-print-stylesvariáveis ​​removidos. As aulas de exibição de impressão ainda estão por aí. Consulte #28339 .

  • QuebraDescartou funções color(), theme-color(), e gray()em favor de variáveis. Veja #29083 .

  • QuebraFunção renomeada theme-color-level()para color-level()e agora aceita qualquer cor desejada em vez de apenas $theme-colorcores. Veja #29083 Cuidado: color-level() mais tarde foi colocado em v5.0.0-alpha3.

  • QuebraRenomeado $enable-prefers-reduced-motion-media-querye $enable-pointer-cursor-for-buttonspara $enable-reduced-motione $enable-button-pointerspor brevidade.

  • QuebraRemovido o bg-gradient-variant()mixin. Use a .bg-gradientclasse para adicionar gradientes aos elementos em vez das .bg-gradient-*classes geradas.

  • Quebra Removidos mixins anteriormente obsoletos:

    • hover, hover-focus, plain-hover-focusehover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(também eliminou a classe de utilitário associada, .text-hide)
    • visibility()
    • form-control-focus()

  • Quebrascale-color()Função renomeada shift-color()para evitar colisão com a própria função de escala de cores do Sass.

  • box-shadowmixins agora permitem nullvalores e descartam nonevários argumentos. Consulte #30394 .

  • O border-radius()mixin agora tem um valor padrão.

Sistema de cores

  • O sistema de cores que funcionava color-level()e $theme-color-intervalfoi removido em favor de um novo sistema de cores. Todas as funções lighten()e darken()em nossa base de código são substituídas por tint-color()e shade-color(). Essas funções misturarão a cor com branco ou preto em vez de alterar sua luminosidade por um valor fixo. O shift-color()irá tingir ou sombrear uma cor dependendo se seu parâmetro de peso é positivo ou negativo. Veja #30622 para mais detalhes.

  • Adicionados novos tons e tonalidades para cada cor, fornecendo nove cores separadas para cada cor base, como novas variáveis ​​Sass.

  • Melhor contraste de cores. Relação de contraste de cores aumentada de 3:1 para 4,5:1 e cores azul, verde, ciano e rosa atualizadas para garantir o contraste WCAG 2.1 AA. Também mudou nossa cor de contraste de cores de $gray-900para $black.

  • Para dar suporte ao nosso sistema de cores, adicionamos novos personalizados tint-color()e shade-color()funções para misturar nossas cores adequadamente.

Atualizações de grade

  • Novo ponto de interrupção! Adicionado novo xxlponto de interrupção para 1400pxe para cima. Nenhuma alteração em todos os outros pontos de interrupção.

  • Calhas melhoradas. As calhas agora são definidas em rems e são mais estreitas que v4 ( 1.5rem, ou aproximadamente 24px, abaixo de 30px). Isso alinha as calhas do nosso sistema de grade com nossos utilitários de espaçamento.

    • Adicionada nova classe de medianiz ( .g-*, .gx-*, e .gy-*) para controlar medianizes horizontais/verticais, medianizes horizontais e medianizes verticais.
    • QuebraRenomeado .no-gutterspara .g-0para corresponder aos novos utilitários de calha.

  • As colunas não são mais position: relativeaplicadas, portanto, talvez seja necessário adicionar .position-relativealguns elementos para restaurar esse comportamento.

  • QuebraDescartou várias .order-*aulas que muitas vezes não eram utilizadas. Agora fornecemos apenas .order-1para .order-5fora da caixa.

  • QuebraDescartou o .mediacomponente, pois pode ser facilmente replicado com utilitários. Consulte #28265 e a página de utilitários flexíveis para obter um exemplo .

  • Quebra bootstrap-grid.cssagora só se aplica box-sizing: border-boxà coluna em vez de redefinir o dimensionamento de caixa global. Dessa forma, nossos estilos de grade podem ser usados ​​em mais lugares sem interferência.

  • $enable-grid-classesnão desabilita mais a geração de classes de contêiner. Veja #29146.

  • Atualizado o make-colmixin para o padrão de colunas iguais sem um tamanho especificado.

Conteúdo, Reinicialização, etc

  • O RFS agora está habilitado por padrão. Os títulos usando ofont-size()mixin ajustarão automaticamente suafont-sizeescala com a viewport. Esse recurso foi anteriormente ativado com a v4.

  • QuebraReformulamos nossa tipografia de exibição para substituir nossas $display-*variáveis ​​e com um $display-font-sizesmapa Sass. Também removeu as $display-*-weightvariáveis ​​individuais para um único $display-font-weighte ajustado font-sizes.

  • Adicionados dois novos .display-*tamanhos de título .display-5e .display-6.

  • Os links são sublinhados por padrão (não apenas ao passar o mouse), a menos que façam parte de componentes específicos.

  • Tabelas redesenhadas para atualizar seus estilos e reconstruí-las com variáveis ​​CSS para mais controle sobre o estilo.

  • QuebraAs tabelas aninhadas não herdam mais estilos.

  • Quebra .thead-lighte .thead-darksão descartados em favor das .table-*classes variantes que podem ser usadas para todos os elementos da tabela ( thead, tbody, tfoot, tre ) th.td

  • QuebraO table-row-variant()mixin é renomeado table-variant()e aceita apenas 2 parâmetros: $color(nome da cor) e $value(código da cor). A cor da borda e as cores de destaque são calculadas automaticamente com base nas variáveis ​​do fator da tabela.

  • Dividir variáveis ​​de preenchimento de célula de tabela em -ye -x.

  • QuebraAula abandonada .pre-scrollable. Consulte #29135

  • Quebra .text-*utilitários não adicionam mais estados de foco e foco aos links. .link-*classes auxiliares podem ser usadas em vez disso. Consulte #29267

  • QuebraAula abandonada .text-justify. Consulte #29793

  • Redefina o padrão horizontal e padding-leftos elementos do padrão do navegador para .<ul><ol>40px2rem

  • Adicionado $enable-smooth-scroll, que se aplica scroll-behavior: smoothglobalmente, exceto para usuários que solicitam movimento reduzido por prefers-reduced-motionmeio de consulta de mídia. Consulte #31877

RTL

  • Variáveis, utilitários e mixins específicos de direção horizontal foram renomeados para usar propriedades lógicas como aquelas encontradas em layouts de flexbox - por exemplo, starte endem vez de lefte right.

Formulários

  • Adicionadas novas formas flutuantes! Promovemos o exemplo de rótulos flutuantes para componentes de formulário totalmente compatíveis. Consulte a nova página de rótulos flutuantes.

  • Quebra Elementos de formulário nativos e personalizados consolidados. Caixas de seleção, rádios, selects e outras entradas que tinham classes nativas e personalizadas na v4 foram consolidadas. Agora, quase todos os nossos elementos de formulário são totalmente personalizados, a maioria sem a necessidade 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-fileforam substituídos por estilos personalizados em cima de .form-control.
    • .custom-rangeé agora .form-range.
    • Nativo .form-control-filee .form-control-range.

  • QuebraCaiu .input-group-appende .input-group-prepend. Agora você pode apenas adicionar botões e .input-group-textcomo filhos diretos dos grupos de entrada.

  • O erro de longa data da borda ausente no grupo de entrada com feedback de validação foi finalmente corrigido adicionando uma .has-validationclasse adicional aos grupos de entrada com validação.

  • Quebra Eliminamos as classes de layout específicas de formulário para nosso sistema de grade. Use nossa grade e utilitários em vez de .form-group, .form-row, ou .form-inline.

  • QuebraOs rótulos de formulário agora exigem .form-label.

  • Quebra .form-textjá não define display, permitindo que você crie texto de ajuda embutido ou bloco como desejar apenas alterando o elemento HTML.

  • Os ícones de validação não são mais aplicados a <select>s com multiple.

  • Arquivos Sass de origem reorganizados em scss/forms/, incluindo estilos de grupo de entrada.

Componentes

  • Valores unificados paddingpara alertas, migalhas de pão, cartões, menus suspensos, grupos de listas, modais, popovers e dicas de ferramentas com base em nossa $spacervariável. Consulte #30564 .

Acordeão

Alertas

  • Os alertas agora têm exemplos com ícones .

  • Estilos personalizados removidos para <hr>s em cada alerta, pois eles já usam currentColor.

Distintivos

  • QuebraDescartou todas as .badge-*classes de cores para utilitários de segundo plano (por exemplo, use .bg-primaryem vez de .badge-primary).

  • QuebraDescartado .badge-pill— use o .rounded-pillutilitário em vez disso.

  • QuebraRemovido os estilos de foco e foco para <a>e <button>elementos.

  • Aumento do preenchimento padrão para emblemas de .25em/ .5empara .35em/ .65em.

  • Simplificou a aparência padrão de breadcrumbs removendo padding, background-color, e border-radius.

  • Adicionada nova propriedade customizada CSS --bs-breadcrumb-dividerpara fácil customização sem a necessidade de recompilar CSS.

Botões

  • Quebra Botões de alternância , com caixas de seleção ou rádios, não exigem mais JavaScript e têm nova marcação. Não precisamos mais de um elemento de encapsulamento, adicionamos.btn-checkao<input>, e o emparelhamos com qualquer.btnclasse no<label>. Consulte #30650 . Os documentos para isso foram movidos da nossa página de botões para a nova seção de formulários.

  • Quebra Descartado .btn-blockpara utilitários. Em vez de usar .btn-blockno .btn, envolva seus botões com .d-gridum .gap-*utilitário para espaçá-los conforme necessário. Mude para classes responsivas para ter ainda mais controle sobre elas. Leia os documentos para alguns exemplos.

  • Atualizado nosso button-variant()e button-outline-variant()mixins para suportar parâmetros adicionais.

  • Botões atualizados para garantir maior contraste nos estados de foco e ativo.

  • Os botões desativados agora têm pointer-events: none;.

Cartão

  • QuebraCaiu .card-deckem favor da nossa grade. Enrole seus cartões em classes de coluna e adicione um contêiner pai .row-cols-*para recriar baralhos de cartas (mas com mais controle sobre o alinhamento responsivo).

  • QuebraCaiu .card-columnsem favor da Maçonaria. Veja #28922 .

  • QuebraSubstituído o .cardacordeão baseado por um novo componente de acordeão .

  • Adicionada nova .carousel-darkvariante para texto escuro, controles e indicadores (ótimo para fundos mais claros).

  • Ícones de divisa substituídos para controles de carrossel por novos SVGs de Bootstrap Icons .

Botão Fechar

  • QuebraRenomeado .closepara .btn-closepara um nome menos genérico.

  • Os botões Fechar agora usam um background-image(SVG incorporado) em vez de um &times;no HTML, permitindo uma personalização mais fácil sem a necessidade de tocar na marcação.

  • Adicionada nova .btn-close-whitevariante que usa filter: invert(1)para habilitar ícones de dispensa de contraste mais altos em fundos mais escuros.

Colapso

  • Ancoragem de rolagem removida para acordeões.

  • Adicionada nova .dropdown-menu-darkvariante e variáveis ​​associadas para listas suspensas escuras sob demanda.

  • Adicionada nova variável para $dropdown-padding-x.

  • Escureceu o divisor suspenso para melhorar o contraste.

  • QuebraTodos os eventos para o menu suspenso agora são acionados no botão de alternância do menu suspenso e, em seguida, borbulhados para o elemento pai.

  • Os menus suspensos agora têm um data-bs-popper="static"atributo definido quando o posicionamento do menu suspenso é estático e data-bs-popper="none"quando o menu suspenso está na barra de navegação. Isso é adicionado pelo nosso JavaScript e nos ajuda a usar estilos de posição personalizados sem interferir no posicionamento de Popper.

  • QuebraOpção descartada flippara o plug-in suspenso em favor da configuração nativa do Popper. Agora você pode desabilitar o comportamento de inversão passando uma matriz vazia para a fallbackPlacementsopção no modificador de inversão .

  • Os menus suspensos agora podem ser clicáveis ​​com uma nova autoCloseopção para lidar com o comportamento de fechamento automático . Você pode usar esta opção para aceitar o clique dentro ou fora do menu suspenso para torná-lo interativo.

  • As listas suspensas agora suportam .dropdown-items envolto em <li>s.

Jumbotron

Listar grupo

  • Adicionadas novas nullvariáveis ​​para font-size, font-weight, colore :hover colorà .nav-linkclasse.
  • QuebraNavbars agora exigem um contêiner dentro (para simplificar drasticamente os requisitos de espaçamento e CSS necessário).

Offcanvas

Paginação

  • Os links de paginação agora têm personalizações margin-leftque são dinamicamente arredondados em todos os cantos quando separados um do outro.

  • Adicionado transitions aos links de paginação.

Popovers

  • QuebraRenomeado .arrowpara .popover-arrowem nosso modelo popover padrão.

  • whiteListOpção renomeada para allowList.

Spinners

  • Spinners agora honram prefers-reduced-motion: reduceao desacelerar as animações. Veja #31882 .

  • Alinhamento vertical do spinner aprimorado.

Torradas

  • Os brindes agora podem ser posicionados em um .toast-containercom a ajuda de utilitários de posicionamento .

  • A duração padrão do brinde foi alterada para 5 segundos.

  • Removido overflow: hiddendas torradas e substituído por border-radiuss próprios com calc()funções.

Dicas de ferramentas

  • QuebraRenomeado .arrowpara .tooltip-arrowem nosso modelo de dica de ferramenta padrão.

  • QuebraO valor padrão para o fallbackPlacementsé alterado para ['top', 'right', 'bottom', 'left']um melhor posicionamento dos elementos popper.

  • QuebrawhiteListOpção renomeada para allowList.

Serviços de utilidade pública

  • QuebraVários utilitários renomeados para usar nomes de propriedades lógicas em vez de nomes direcionais com a adição de suporte RTL:

    • Renomeado .left-*e .right-*para .start-*e .end-*.
    • Renomeado .float-lefte .float-rightpara .float-starte .float-end.
    • Renomeado .border-lefte .border-rightpara .border-starte .border-end.
    • Renomeado .rounded-lefte .rounded-rightpara .rounded-starte .rounded-end.
    • Renomeado .ml-*e .mr-*para .ms-*e .me-*.
    • Renomeado .pl-*e .pr-*para .ps-*e .pe-*.
    • Renomeado .text-lefte .text-rightpara .text-starte .text-end.

  • QuebraMargens negativas desativadas por padrão.

  • Adicionada nova .bg-bodyclasse para definir rapidamente o <body>plano de fundo do 's para elementos adicionais.

  • Adicionados novos utilitários de posição para top, right, bottome left. Os valores incluem 0, 50%e 100%para cada propriedade.

  • Adicionados novos .translate-middle-xe .translate-middle-yutilitários para elementos posicionados absolutos/fixos no centro horizontal ou vertical.

  • Adicionados novos border-widthutilitários .

  • QuebraRenomeado .text-monospacepara .font-monospace.

  • QuebraRemovido .text-hide, pois é um método antiquado para ocultar texto que não deve mais ser usado.

  • Utilitários adicionados .fs-*para font-sizeutilitários (com RFS ativado). Eles usam a mesma escala dos cabeçalhos padrão do HTML (1-6, grande para pequeno) e podem ser modificados via mapa Sass.

  • Quebra.font-weight-*Utilitários renomeados quanto .fw-*à brevidade e consistência.

  • Quebra.font-style-*Utilitários renomeados quanto .fst-*à brevidade e consistência.

  • Adicionado .d-grida utilitários de exibição e novos gaputilitários ( .gap) para layouts CSS Grid e flexbox.

  • QuebraRemovido .rounded-sme rounded-lg, e introduzido uma nova escala de classes, .rounded-0para .rounded-3. Veja #31687 .

  • Adicionados novos line-heightutilitários: .lh-1, .lh-sm, .lh-basee .lh-lg. Veja aqui .

  • Movido o .d-noneutilitário em nosso CSS para dar mais peso sobre outros utilitários de exibição.

  • Estendeu o .visually-hidden-focusableauxiliar para trabalhar também em contêineres, usando :focus-within.

Ajudantes

  • Quebra Os auxiliares de incorporação responsivos foram renomeados para auxiliares de proporção com novos nomes de classe e comportamentos aprimorados, bem como uma variável CSS útil.

    • As classes foram renomeadas para mudar bypara xa proporção. Por exemplo, .ratio-16by9agora é .ratio-16x9.
    • Deixamos de lado o .embed-responsive-itemseletor de grupo de elementos e em favor de um .ratio > *seletor mais simples. Não é necessária mais classe, e o auxiliar de proporção agora funciona com qualquer elemento HTML.
    • O $embed-responsive-aspect-ratiosmapa Sass foi renomeado $aspect-ratiose seus valores foram simplificados para incluir o nome da classe e a porcentagem como o key: valuepar.
    • As variáveis ​​CSS agora são geradas e incluídas para cada valor no mapa Sass. Modifique a --bs-aspect-ratiovariável no .ratiopara criar qualquer proporção personalizada .

  • Quebra As classes de “leitores de tela” agora são classes “ocultas visualmente” .

    • Alterado o arquivo Sass de scss/helpers/_screenreaders.scssparascss/helpers/_visually-hidden.scss
    • Renomeado .sr-onlye .sr-only-focusablepara .visually-hiddene.visually-hidden-focusable
    • Renomeado sr-only()e sr-only-focusable()mixins para visually-hidden()e visually-hidden-focusable().

  • bootstrap-utilities.cssagora também inclui nossos ajudantes. Os auxiliares não precisam mais ser importados em compilações personalizadas.

JavaScript

  • Descartou a dependência do jQuery e reescreveu os plugins para estarem em JavaScript normal.

  • QuebraOs atributos de dados para todos os plug-ins JavaScript agora têm namespaces para ajudar a distinguir a funcionalidade do Bootstrap de terceiros e de seu próprio código. Por exemplo, usamos data-bs-toggleem vez de data-toggle.

  • Todos os plugins agora podem aceitar um seletor CSS como o primeiro argumento. Você pode passar um elemento DOM ou qualquer seletor CSS válido para criar uma nova instância do plugin:

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

  • popperConfigpode ser passado como uma função que aceita a configuração padrão do Popper do Bootstrap como um argumento, para que você possa mesclar essa configuração padrão do seu jeito. Aplica-se a listas suspensas, popovers e dicas de ferramentas.

  • O valor padrão para o fallbackPlacementsé alterado ['top', 'right', 'bottom', 'left']para melhor posicionamento dos elementos Popper. Aplica-se a listas suspensas, popovers e dicas de ferramentas.

  • Removido o sublinhado de métodos estáticos públicos como _getInstance()→ getInstance().