Migrando para v5

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

• Adicionado novo componente de 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.

Migalhas de pão

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

Carrossel

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

Listas suspensas

• 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

• QuebraDescartou o componente jumbotron, pois pode ser replicado com utilitários. Veja nosso novo exemplo Jumbotron para uma demonstração.

Listar grupo

• Adicionado novo .list-group-numberedmodificador para listar grupos.

Navegadores e abas

• Adicionadas novas nullvariáveis ​​para font-size, font-weight, colore :hover colorà .nav-linkclasse.

Barras de navegação

• QuebraNavbars agora exigem um contêiner dentro (para simplificar drasticamente os requisitos de espaçamento e CSS necessário).

Offcanvas

• Adicionado o novo componente 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:

  cópia de

  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().