Migrando para v4

Bootstrap 4 é uma grande reescrita de todo o projeto. As mudanças mais notáveis ​​estão resumidas abaixo, seguidas por mudanças mais específicas nos componentes relevantes.

Mudanças estáveis

Passando do Beta 3 para nossa versão estável v4.0, não há mudanças importantes, mas há algumas mudanças notáveis.

Impressão

• Corrigidos utilitários de impressão quebrados. Anteriormente, o uso de uma .d-print-*classe anularia inesperadamente qualquer outra .d-*classe. Agora, eles correspondem aos nossos outros utilitários de exibição e se aplicam apenas a essa mídia ( @media print).

• Utilitários de exibição de impressão disponíveis expandidos para corresponder a outros utilitários. Beta 3 e mais antigos tinham apenas block, inline-block, inline, e none. Stable v4 adicionado flex, inline-flex, table, table-row, e table-cell.

• Corrigida a renderização da visualização de impressão nos navegadores com novos estilos de impressão que especificam @page size.

Alterações do Beta 3

Embora o Beta 2 tenha visto a maior parte de nossas mudanças importantes durante a fase beta, ainda temos algumas que precisam ser corrigidas na versão Beta 3. Essas alterações se aplicam se você estiver atualizando para o Beta 3 do Beta 2 ou qualquer versão mais antiga do Bootstrap.

Diversos

• Removida a $thumbnail-transitionvariável não utilizada. Não estávamos fazendo a transição de nada, então era apenas código extra.
• O pacote npm não inclui mais nenhum arquivo além de nossos arquivos source e dist; se você confiava neles e estava executando nossos scripts por meio da node_modulespasta, você deve adaptar seu fluxo de trabalho.

Formulários

• Reescreveu caixas de seleção e rádios personalizados e padrão. Agora, ambos têm estrutura HTML correspondente (externa <div>com irmão <input>e <label>) e os mesmos estilos de layout (padrão empilhado, inline com classe modificadora). Isso nos permite estilizar o rótulo com base no estado da entrada, simplificando o suporte para o disabledatributo (anteriormente exigindo uma classe pai) e suportando melhor nossa validação de formulário.

  Como parte disso, alteramos o CSS para gerenciar vários background-images em caixas de seleção e rádios de formulário personalizado. Anteriormente, o elemento agora removido .custom-control-indicatortinha a cor de fundo, gradiente e ícone SVG. Personalizar o gradiente do plano de fundo significava substituir todos eles sempre que você precisasse alterar apenas um. Agora, temos .custom-control-label::beforepara preenchimento e gradiente e .custom-control-label::aftertrata do ícone.

  Para fazer uma verificação personalizada em linha, adicione .custom-control-inline.

• Seletor atualizado para grupos de botões baseados em entrada. Em vez de [data-toggle="buttons"] { }estilo e comportamento, usamos o dataatributo apenas para comportamentos JS e contamos com uma nova .btn-group-toggleclasse para estilo.

• Removido .col-form-legendem favor de um .col-form-label. Desta forma .col-form-label-sme .col-form-label-lgpode ser usado em <legend>elementos com facilidade.

• As entradas de arquivo personalizado receberam uma alteração em sua $custom-file-textvariável Sass. Não é mais um mapa Sass aninhado e agora alimenta apenas uma string - o Browsebotão como esse agora é o único pseudoelemento gerado a partir do nosso Sass. O Choose filetexto agora vem do .custom-file-label.

Grupos de entrada

• Os complementos do grupo de entrada agora são específicos para seu posicionamento em relação a uma entrada. Desistimos .input-group-addone .input-group-btnpara duas novas classes, .input-group-prepende .input-group-append. Você deve usar explicitamente um anexo ou um prefixo agora, simplificando muito do nosso CSS. Dentro de um anexo ou prefixo, coloque seus botões como eles existiriam em qualquer outro lugar, mas envolva o texto em .input-group-text.

• Estilos de validação agora são suportados, assim como várias entradas (embora você só possa validar uma entrada por grupo).

• As classes de dimensionamento devem estar no pai .input-groupe não nos elementos de formulário individuais.

Alterações do Beta 2

Enquanto estiver na versão beta, nosso objetivo é não ter alterações significativas. No entanto, nem sempre as coisas saem como planejado. Abaixo estão as mudanças importantes a serem lembradas ao passar do Beta 1 para o Beta 2.

Quebra

• $badge-colorVariável removida e seu uso em .badge. Usamos uma função de contraste de cor para escolher um colorcom base no background-color, portanto, a variável é desnecessária.
• grayscale()Função renomeada gray()para evitar conflitos com o grayscalefiltro nativo CSS.
• Renomeado .table-inverse, .thead-inversee .thead-defaultpara .*-darke .*-light, combinando com nossos esquemas de cores usados ​​em outros lugares.
• As tabelas responsivas agora geram classes para cada ponto de interrupção da grade. Isso quebra do Beta 1, pois o .table-responsiveque você está usando é mais parecido com .table-responsive-md. Agora você pode usar .table-responsiveou .table-responsive-{sm,md,lg,xl}conforme necessário.
• O suporte do Bower foi descartado como o gerenciador de pacotes foi preterido para alternativas (por exemplo, Yarn ou npm). Veja bower/bower#2298 para detalhes.
• O Bootstrap ainda requer jQuery 1.9.1 ou superior, mas é aconselhável usar a versão 3.x já que os navegadores suportados pela v3.x são os que o Bootstrap suporta mais a v3.x tem algumas correções de segurança.
• Removida a .form-control-labelclasse não utilizada. Se você fez uso dessa classe, ela era uma duplicata da .col-form-labelclasse que centralizava verticalmente a <label>com sua entrada associada em layouts de formulário horizontal.
• Alterado color-yiqde um mixin que incluía a colorpropriedade para uma função que retorna um valor, permitindo que você o use para qualquer propriedade CSS. Por exemplo, em vez de color-yiq(#000), você escreveria color: color-yiq(#000);.

Destaques

• Introduzido novo pointer-eventsuso em modais. O externo .modal-dialogpassa por eventos com pointer-events: nonemanipulação de cliques personalizada (tornando possível apenas ouvir os .modal-backdropcliques) e, em seguida, neutraliza-os para o real .modal-contentcom pointer-events: auto.

Resumo

Aqui estão os itens importantes dos quais você deve estar ciente ao migrar da v3 para a v4.

Suporte ao navegador

• Suporte para IE8, IE9 e iOS 6 descartado. v4 agora é apenas IE10+ e iOS 7+. Para sites que precisam de qualquer um desses, use v3.
• Adicionado suporte oficial para navegador e WebView do Android v5.0 Lollipop. As versões anteriores do navegador Android e do WebView permanecem apenas com suporte não oficial.

Mudanças globais

• O Flexbox é habilitado por padrão. Em geral, isso significa um afastamento dos floats e mais em nossos componentes.
• Alterado de Less para Sass para nossos arquivos CSS de origem.
• Alterado de pxpara remcomo nossa unidade CSS principal, embora os pixels ainda sejam usados ​​para consultas de mídia e comportamento de grade, pois as janelas de visualização do dispositivo não são afetadas pelo tamanho do tipo.
• O tamanho da fonte global aumentou de 14pxpara 16px.
• Camadas de grade renovadas para adicionar uma quinta opção (endereçando dispositivos menores em 576pxe abaixo) e removeu o -xsinfixo dessas classes. Exemplo: .col-6.col-sm-4.col-md-3.
• Substituído o tema opcional separado por opções configuráveis ​​por meio de variáveis ​​SCSS (por exemplo, $enable-gradients: true).
• Sistema de compilação revisado para usar uma série de scripts npm em vez de Grunt. Veja package.jsontodos os scripts ou nosso leia-me do projeto para necessidades de desenvolvimento local.
• O uso não responsivo do Bootstrap não é mais suportado.
• Descartou o personalizador online em favor de uma documentação de configuração mais extensa e compilações personalizadas.
• Adicionadas dezenas de novas classes de utilitários para pares de valores de propriedade CSS comuns e atalhos de espaçamento de margem/preenchimento.

Sistema de rede

• Movido para flexbox.
  • Adicionado suporte para flexbox nos mixins de grade e classes predefinidas.
  • Como parte do flexbox, inclui suporte para classes de alinhamento vertical e horizontal.
• Nomes de classe de grade atualizados e uma nova camada de grade.
  • Adicionada uma nova smcamada de grade abaixo 768pxpara controle mais granular. Agora temos xs, sm, md, lg, e xl. Isso também significa que cada nível foi aumentado um nível (portanto, .col-md-6na v3 agora está .col-lg-6na v4).
  • xsas classes de grade foram modificadas para não exigir que o infixo represente com mais precisão que eles começam a aplicar estilos em min-width: 0e não em um valor de pixel definido. Em vez de .col-xs-6, é agora .col-6. Todas as outras camadas de grade exigem o infixo (por exemplo, sm).
• Tamanhos de grade, mixins e variáveis ​​atualizados.
  • As medianizes de grade agora têm um mapa Sass para que você possa especificar larguras de medianiz específicas em cada ponto de interrupção.
  • Mixins de grade atualizados para utilizar um make-col-readymixin de preparação e um make-colpara definir o flexe max-widthpara o dimensionamento de coluna individual.
  • Pontos de interrupção de consulta de mídia do sistema de grade alterados e larguras de contêiner para levar em conta a nova camada de grade e garantir que as colunas sejam divisíveis uniformemente por 12sua largura máxima.
  • Pontos de interrupção de grade e larguras de contêiner agora são tratados por meio de mapas Sass ( $grid-breakpointse $container-max-widths) em vez de um punhado de variáveis ​​separadas. Eles substituem @screen-*totalmente as variáveis ​​e permitem que você personalize totalmente as camadas de grade.
  • As consultas de mídia também mudaram. Em vez de repetir nossas declarações de consulta de mídia com o mesmo valor todas as vezes, agora temos @include media-breakpoint-up/down/only. Agora, em vez de escrever @media (min-width: @screen-sm-min) { ... }, você pode escrever @include media-breakpoint-up(sm) { ... }.

Componentes

• Painéis, miniaturas e poços descartados para um novo componente abrangente, cartões .
• Descartou a fonte do ícone Glyphicons. Se você precisar de ícones, algumas opções são:
  • a versão upstream do Glyphicons
  • Octicons
  • Fonte incrível
  • Consulte a página Estender para obter uma lista de alternativas. Tem sugestões adicionais? Por favor, abra um problema ou PR.
• Descartou o plug-in Affix jQuery.
  • Recomendamos usar position: stickyem vez disso. Consulte a entrada HTML5 Please para obter detalhes e recomendações específicas de polyfill. Uma sugestão é usar uma @supportsregra para implementá-la (por exemplo, @supports (position: sticky) { ... })/
  • Se você estivesse usando o Affix para aplicar não- positionestilos adicionais, os polyfills podem não suportar seu caso de uso. Uma opção para tais usos é a biblioteca ScrollPos-Styler de terceiros .
• Descartou o componente do pager , pois era essencialmente botões ligeiramente personalizados.
• Refatorou quase todos os componentes para usar mais seletores de classe não aninhados em vez de seletores filhos muito específicos.

Por componente

Esta lista destaca as principais alterações por componente entre v3.xx e v4.0.0.

Reinício

Uma novidade no Bootstrap 4 é o Reboot , uma nova folha de estilo que se baseia no Normalize com nossos próprios estilos de redefinição um tanto opinativos. Os seletores que aparecem neste arquivo usam apenas elementos—não há classes aqui. Isso isola nossos estilos de redefinição de nossos estilos de componentes para uma abordagem mais modular. Algumas das redefinições mais importantes que isso inclui são a box-sizing: border-boxalteração, passando de empara remunidades em muitos elementos, estilos de link e muitas redefinições de elementos de formulário.

Tipografia

• .text-Todos os utilitários foram movidos para o _utilities.scssarquivo.
• Eliminado .page-header, pois, além da borda, todos os seus estilos podem ser aplicados por meio de utilitários.
• .dl-horizontalfoi descartado. Em vez disso, use .rowon <dl>e use classes de coluna de grade (ou mixins) em its <dt>e <dd>filhos.
• O estilo personalizado <blockquote>foi movido para classes — .blockquotee o .blockquote-reversemodificador.
• .list-inlineagora requer que seus itens de lista filhos tenham a nova .list-inline-itemclasse aplicada a eles.

Imagens

• Renomeado .img-responsivepara .img-fluid.
• Renomeado .img-roundedpara.rounded
• Renomeado .img-circlepara.rounded-circle

Tabelas

• Quase todas as instâncias do >seletor foram removidas, o que significa que as tabelas aninhadas agora herdarão automaticamente os estilos de seus pais. Isso simplifica muito nossos seletores e possíveis personalizações.
• As tabelas responsivas não exigem mais um elemento de encapsulamento. Em vez disso, basta colocar o .table-responsivedireito no <table>.
• Renomeado .table-condensedpara .table-smpor consistência.
• Adicionada uma nova .table-inverseopção.
• Adicionados modificadores de cabeçalho de tabela: .thead-defaulte .thead-inverse.
• Classes contextuais renomeadas para ter um .table-prefixo -. Portanto .active, .success, .warning, .dangere .infopara .table-active, .table-success, .table-warning, .table-dangere .table-info.

Formulários

• O elemento movido é redefinido para o _reboot.scssarquivo.
• Renomeado .control-labelpara .col-form-label.
• Renomeado .input-lge .input-smpara .form-control-lge .form-control-sm, respectivamente.
• Aulas abandonadas .form-group-*por uma questão de simplicidade. Use .form-control-*classes agora.
• Eliminado .help-blocke substituído .form-textpor um texto de ajuda em nível de bloco. Para texto de ajuda embutido e outras opções flexíveis, use classes de utilitário como .text-muted.
• Caiu .radio-inlinee .checkbox-inline.
• Consolidado .checkboxe .radioem .form-checke as várias .form-check-*classes.
• Formas horizontais revisadas:
  • Descartou o .form-horizontalrequisito de classe.
  • .form-groupnão aplica mais estilos da .rowvia mixin, então .rowagora é necessário para layouts de grade horizontal (por exemplo, <div class="form-group row">).
  • Adicionada nova .col-form-labelclasse aos rótulos centralizados verticalmente com .form-controls.
  • Adicionado novo .form-rowpara layouts de formulário compactos com as classes de grade (troque o seu .rowpor um .form-rowe pronto).
• Adicionado suporte a formulários personalizados (para caixas de seleção, rádios, seleções e entradas de arquivo).
• Substituição das classes .has-error, .has-warning, e .has-successpela validação de formulário HTML5 via CSS :invalide :validpseudo-classes.
• Renomeado .form-control-staticpara .form-control-plaintext.

Botões

• Renomeado .btn-defaultpara .btn-secondary.
• Descartou a .btn-xsclasse inteiramente, pois .btn-smé proporcionalmente muito menor que a v3.
• O recurso de botão statefulbutton.js do plugin jQuery foi descartado. Isso inclui os métodos $().button(string)e . $().button('reset')Aconselhamos usar um pouco de JavaScript personalizado, que terá o benefício de se comportar exatamente da maneira que você deseja.
  • Observe que os outros recursos do plug-in (caixas de seleção de botão, rádios de botão, botões de alternância simples) foram mantidos na v4.
• Altere os botões [disabled]para :disabledcomo o IE9+ suporta :disabled. No entanto fieldset[disabled], ainda é necessário porque os conjuntos de campos desabilitados nativos ainda apresentam bugs no IE11 .

Grupo de botões

• Reescreveu o componente com flexbox.
• Removido .btn-group-justified. Como substituto, você pode usar <div class="btn-group d-flex" role="group"></div>como um wrapper em torno de elementos com .w-100.
• Descartou a .btn-group-xsclasse inteiramente dada a remoção de .btn-xs.
• Removido o espaçamento explícito entre grupos de botões nas barras de ferramentas de botões; use utilitários de margem agora.
• Documentação aprimorada para uso com outros componentes.

Listas suspensas

• Alterado de seletores pai para classes singulares para todos os componentes, modificadores, etc.
• Estilos suspensos simplificados para não serem mais fornecidos com setas voltadas para cima ou para baixo anexadas ao menu suspenso.
• Dropdowns podem ser construídos com <div>s ou <ul>s agora.
• Estilos e marcação suspensos reconstruídos para fornecer suporte fácil e integrado para <a>itens <button>suspensos baseados.
• Renomeado .dividerpara .dropdown-divider.
• Itens suspensos agora exigem .dropdown-item.
• As alternâncias suspensas não exigem mais um explícito <span class="caret"></span>; isso agora é fornecido automaticamente via CSS ::afterem .dropdown-toggle.

Sistema de rede

• Adicionado um novo 576pxponto de interrupção de grade como sm, o que significa que agora há cinco níveis totais ( xs, sm, md, lge xl).
• Renomeamos as classes modificadoras de grade responsivas de .col-{breakpoint}-{modifier}-{size}para .{modifier}-{breakpoint}-{size}para classes de grade mais simples.
• Classes modificadoras push e pull eliminadas para as novas classes com flexbox order. Por exemplo, em vez de .col-8.push-4e .col-4.pull-8, você usaria .col-8.order-2e .col-4.order-1.
• Adicionadas classes de utilitário flexbox para sistema de grade e componentes.

Listar grupos

• Reescreveu o componente com flexbox.
• Substituído a.list-group-itempor uma classe explícita, .list-group-item-action, para estilizar versões de link e botão de itens de grupo de lista.
• Classe adicionada .list-group-flushpara uso com cartões.

Modal

• Reescreveu o componente com flexbox.
• Dada a mudança para o flexbox, o alinhamento dos ícones de dispensa no cabeçalho provavelmente está quebrado, pois não estamos mais usando flutuadores. O conteúdo flutuante vem em primeiro lugar, mas com o flexbox isso não é mais o caso. Atualize seus ícones de dispensa para vir após os títulos modais para corrigir.
• A remoteopção (que poderia ser usada para carregar e injetar automaticamente conteúdo externo em um modal) e o loaded.bs.modalevento correspondente foram removidos. Recomendamos usar templates do lado do cliente ou uma estrutura de vinculação de dados, ou chamar jQuery.load você mesmo.

Navegadores

• Reescreveu o componente com flexbox.
• Quase todos os >seletores foram descartados para um estilo mais simples por meio de classes não aninhadas.
• Em vez de seletores específicos de HTML como .nav > li > a, usamos classes separadas para .navs, .nav-items e .nav-links. Isso torna seu HTML mais flexível ao mesmo tempo em que traz maior extensibilidade.

Barra de navegação

A barra de navegação foi totalmente reescrita em flexbox com suporte aprimorado para alinhamento, capacidade de resposta e personalização.

• Comportamentos de barra de navegação responsivos agora são aplicados à .navbarclasse por meio de onde .navbar-expand-{breakpoint} você escolhe onde recolher a barra de navegação. Anteriormente, isso era uma modificação de menos variável e exigia recompilação.
• .navbar-defaulté agora .navbar-light, embora .navbar-darkpermaneça o mesmo. Um deles é necessário em cada barra de navegação. No entanto, essas classes não definem mais background-colors; em vez disso, eles essencialmente afetam apenas color.
• As Navbars agora requerem algum tipo de declaração de background. Escolha um dos nossos utilitários de segundo plano ( .bg-*) ou defina o seu próprio com as classes light/inverse acima para uma personalização louca .
• Dados os estilos do flexbox, as navbars agora podem usar os utilitários do flexbox para facilitar as opções de alinhamento.
• .navbar-toggleé agora .navbar-togglere tem estilos diferentes e marcação interna (não mais três <span>s).
• Abandonou a .navbar-formclasse completamente. Não é mais necessário; em vez disso, apenas use .form-inlinee aplique utilitários de margem conforme necessário.
• Navbars não incluem mais margin-bottomou border-radiuspor padrão. Use utilitários conforme necessário.
• Todos os exemplos com navbars foram atualizados para incluir nova marcação.

Paginação

• Reescreveu o componente com flexbox.
• Classes explícitas ( .page-item, .page-link) agora são necessárias nos descendentes de .paginations
• Descartou o .pagercomponente completamente, pois era pouco mais do que botões de contorno personalizados.

Migalhas de pão

• Uma classe explícita, .breadcrumb-item, agora é necessária nos descendentes de .breadcrumbs

Etiquetas e emblemas

• Renomeado .labelpara .badgepara desambiguar do <label>elemento.
• Deixou cair o .badgecomponente, pois era quase idêntico aos rótulos. Use o .badge-pillmodificador junto com o componente de rótulo para obter uma aparência arredondada.
• Os emblemas não flutuam mais automaticamente em grupos de listas e outros componentes. Classes de utilitários agora são necessárias para isso.
• .badge-defaultfoi descartado e .badge-secondaryadicionado para corresponder às classes modificadoras de componentes usadas em outros lugares.

Painéis, miniaturas e poços

Foi totalmente descartado para o novo componente de cartão.

Painéis

• .panelpara .card, agora construído com flexbox.
• .panel-defaultremovido e sem substituição.
• .panel-groupremovido e sem substituição. .card-groupnão é uma substituição, é diferente.
• .panel-headingpara.card-header
• .panel-titlepara .card-title. Dependendo da aparência desejada, você também pode usar elementos ou classes de título (por exemplo <h3>, , .h3) ou elementos ou classes em negrito (por exemplo <strong>, <b>, , .font-weight-bold). Observe que .card-title, embora com nome semelhante, produz uma aparência diferente de .panel-title.
• .panel-bodypara.card-body
• .panel-footerpara.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, e .panel-dangerforam descartados para .bg-, .text-, e .borderutilitários gerados a partir de nosso $theme-colorsmapa Sass.

Progresso

• .progress-bar-*Classes contextuais substituídas por .bg-*utilitários. Por exemplo, class="progress-bar progress-bar-danger"torna -se class="progress-bar bg-danger".
• Substituído .activepara barras de progresso animadas por .progress-bar-animated.

Carrossel

• Reformulou todo o componente para simplificar o design e o estilo. Temos menos estilos para você substituir, novos indicadores e novos ícones.
• Todo o CSS foi desaninhado e renomeado, garantindo que cada classe seja prefixada com .carousel-.
  • Para itens de carrossel, .next, .prev, .lefte .rightagora são .carousel-item-next, .carousel-item-prev, .carousel-item-lefte .carousel-item-right.
  • .itemtambém é agora .carousel-item.
  • Para controles anteriores/seguintes, .carousel-control.righte .carousel-control.leftsão agora .carousel-control-nexte .carousel-control-prev, o que significa que eles não exigem mais uma classe base específica.
• Removido todos os estilos responsivos, adiando para utilitários (por exemplo, mostrando legendas em determinadas janelas de visualização) e estilos personalizados conforme necessário.
• Removidas sobreposições de imagem para imagens em itens de carrossel, adiando para utilitários.
• Ajustamos o exemplo do carrossel para incluir a nova marcação e estilos.

Tabelas

• Removido o suporte para tabelas aninhadas com estilo. Todos os estilos de tabela agora são herdados na v4 para seletores mais simples.
• Adicionada variante de tabela inversa.

Serviços de utilidade pública

• Exibir, oculto e muito mais:
  • Utilitários de exibição responsivos (por exemplo, .d-nonee d-{sm,md,lg,xl}-none).
  • Descartou a maior parte dos .hidden-*utilitários para novos utilitários de exibição . Por exemplo, em vez de .hidden-sm-up, use .d-sm-none. Os utilitários foram renomeados .hidden-printpara usar o esquema de nomenclatura do utilitário de exibição. Mais informações na seção Utilitários responsivos desta página.
  • Classes adicionadas .float-{sm,md,lg,xl}-{left,right,none}para floats responsivos e removidas .pull-left, .pull-rightjá que são redundantes para .float-lefte .float-right.
• Modelo:
  • Adicionadas variações responsivas às nossas classes de alinhamento de texto .text-{sm,md,lg,xl}-{left,center,right}.
• Alinhamento e espaçamento:
  • Adicionados novos utilitários de margem e preenchimento responsivos para todos os lados, além de atalhos verticais e horizontais.
  • Adicionado carregamento de utilitários flexbox .
  • Desistiu .center-blockpara a nova .mx-autoclasse.
• Clearfix atualizado para descartar o suporte para versões mais antigas do navegador.

Mixins de prefixo de fornecedor

Os mixins de prefixo do fornecedor do Bootstrap 3 , que foram obsoletos na v3.2.0, foram removidos no Bootstrap 4. Como usamos o Autoprefixer , eles não são mais necessários.

Removidos os seguintes mixins: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d,user-select

Documentação

Nossa documentação também recebeu uma atualização geral. Aqui está o baixo:

• Ainda estamos usando Jekyll, mas temos plugins no mix:
  • bugify.rbé usado para listar eficientemente as entradas em nossa página de bugs do navegador .
  • example.rbé uma bifurcação personalizada do plugin padrão highlight.rb, permitindo uma manipulação mais fácil do código de exemplo.
  • callout.rbé um fork personalizado semelhante, mas projetado para nossos textos explicativos de documentos especiais.
  • markdown-block.rbé usado para renderizar trechos de Markdown em elementos HTML como tabelas.
  • jekyll-toc é usado para gerar nosso índice.
• Todo o conteúdo de documentos foi reescrito em Markdown (em vez de HTML) para facilitar a edição.
• As páginas foram reorganizadas para um conteúdo mais simples e uma hierarquia mais acessível.
• Mudamos de CSS regular para SCSS para aproveitar ao máximo as variáveis, mixins e muito mais do Bootstrap.

Utilitários responsivos

Todas as @screen-variáveis ​​foram removidas na v4.0.0. Use os mixins media-breakpoint-up(), media-breakpoint-down(), ou Sass ou o mapa Sass.media-breakpoint-only()$grid-breakpoints

Nossas classes de utilitários responsivos foram amplamente removidas em favor de displayutilitários explícitos.

• As classes .hiddene .showforam removidas porque entravam em conflito com os métodos $(...).hide()e do jQuery. $(...).show()Em vez disso, tente alternar o [hidden]atributo ou use estilos embutidos como style="display: none;"e style="display: block;".
• Todas as .hidden-classes foram removidas, exceto os utilitários de impressão que foram renomeados.
  • Removido da v3:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
  • Removido dos alfas da v4:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Os utilitários de impressão não começam mais com .hidden-ou .visible-, mas com .d-print-.
  • Nomes antigos: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • Novas classes: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Em vez de usar classes explícitas .visible-*, você torna um elemento visível simplesmente não o ocultando nesse tamanho de tela. Você pode combinar uma .d-*-noneclasse com uma .d-*-blockclasse para mostrar um elemento apenas em um determinado intervalo de tamanhos de tela (por exemplo .d-none.d-md-block.d-xl-none, mostra o elemento apenas em dispositivos médios e grandes).

Observe que as alterações nos pontos de interrupção da grade na v4 significam que você precisará aumentar um ponto de interrupção para obter os mesmos resultados. As novas classes de utilitário responsivo não tentam acomodar casos menos comuns em que a visibilidade de um elemento não pode ser expressa como um único intervalo contíguo de tamanhos de janela de visualização; você precisará usar CSS personalizado nesses casos.