Bootstrap 3 vs Bootstrap 4 – Uma visão geral

O Bootstrap tem sido o framework front-end de código aberto mais confiável para desenvolver sites responsivos e mobile-first. Bootstrap é um framework famoso, por quê??? Porque basta o conhecimento básico de HTML e CSS e podemos construir um site atraente e funcional usando classes pré-definidas de bootstrap que cuidam da capacidade de resposta em diferentes dispositivos.

O Bootstrap 3 foi lançado no ano de 2013 e a última versão estável do Bootstrap 3.3.7 foi lançada em julho de 2016. Em outubro de 2014, o Twitter anunciou que o Bootstrap 4 estava em desenvolvimento. A primeira versão alfa do Bootstrap 4 foi lançada em agosto de 2015. E agora, em agosto de 2017, foi lançada a versão beta do Bootstrap 4.0.0. Você pode conferir este tutorial detalhado do Bootstrap se quiser começar a aprender com 0 .

O centro das atenções deste post serão as principais diferenças, adições e subtrações da versão 3 para a versão recém-lançada 4.0.0-beta.

O que é diferente na versão 4:

Agora podemos começar a falar sobre os novos recursos do Bootstrap 4. À medida que a tecnologia evolui rapidamente, linguagens mais novas e mais inteligentes são desenvolvidas para tornar a construção de sites rápidos e limpos muito mais simples. Esse é o caso da versão mais recente do Bootstrap. A equipe diz que esta “versão 4 é uma grande reescrita de quase todo o projeto”. Vamos resumir algumas mudanças importantes desta melhoria.

Mudanças globais:

• Alterado de Less para Sass para arquivos CSS de origem.
• Alterado de px rem como unidade CSS primária do Bootstrap, embora os pixels ainda sejam usados ​​para consultas de mídia e comportamento de grade, pois as viewports do dispositivo não são afetadas pelo tamanho do tipo.
• O tamanho da fonte global aumentou de 14px para 16px .
• Adicionado um novo nível de grade para ~480px e abaixo.

Sistema de rede:

O principal passo do Bootstrap 4 em direção à melhoria é seu movimento em direção à adoção do Flexbox. Como parte do flexbox, inclui suporte para classes de alinhamento vertical e horizontal. O Bootstrap 4 dá muita ênfase à personalização. Seu novo sistema de camada de grade permite que o Bootstrap 4 aproveite a presença de até 5 camadas de grade (exemplo de 5 camadas: .col-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4). Pode-se dizer facilmente que o Bootstrap 4 fornece acesso a um sistema de grade aprimorado.

• Adicionado um novo nível de grade sm abaixo de 768px para controle mais granular. Agora existem xs, sm, md, lg e xl. Isso também significa que cada camada foi aumentada um nível (portanto, .col-md-6 na v3 agora é .col-lg-6 na v4).
• 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 12 em sua largura máxima.
• Pontos de interrupção de grade e larguras de contêiner agora são tratados por meio de mapas Sass ($ grid-breakpoints e $ container-max-widths) em vez de um punhado de variáveis ​​separadas. Elas substituem inteiramente as variáveis ​​@screen-* e permitem que você personalize totalmente as camadas de grade.
• As consultas de mídia também mudaram. Em vez de repetir declarações de consulta de mídia com o mesmo valor todas as vezes, agora há @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) { … }.

Suporte ao navegador:

• Caiu o suporte para IE8 e iOS 6. v4 agora é apenas IE9+ e iOS 7+. Para sites que precisam de qualquer um desses, use v3.

Classes de utilidade:

No Bootstrap 4, novas classes de utilitários foram incluídas sem prejudicar nenhuma funcionalidade existente. Essas adições importantes são como as classes de alinhamento de texto responsivo, floats responsivos e incorporação responsiva. Além de oferecer muitos atalhos, eles permitem, respectivamente, alterar o alinhamento do texto, flutuar os elementos e dimensionar a proporção de qualquer mídia incorporada. (exemplo: .hidden-md-up oculta um elemento em viewports médias, grandes e extragrandes. Agora, em vez de .hidden-md-up , use .d-md-none ).

Imagens:

• Renomeado .img-responsive para .img-fluid .
• Renomeado .img-rounded para .rounded
• Renomeado .img-circle para .rounded-circle

Tabelas:

• As tabelas responsivas não exigem mais um elemento de encapsulamento. Em palavras simples, no Bootstrap 3, a classe .table-responsive deve ser adicionada ao <div> pai. Mas no Bootstrap 4 , classe .table-responsive a ser adicionada ao elemento <table> .
• Adicionada uma nova opção .table-inverse .
• Adicionados modificadores de cabeçalho de tabela: .thead-default and. .thead-inverse
• Classes contextuais renomeadas para ter um .table- . Portanto, .active .success , .warning , .danger e .table-info para .table-active , .table-success , .table-warning , .table-danger e .table-info.

Navegação:

No Bootstrap 4, o componente Navigation foi bastante simplificado. É necessário criar uma nova lista de elementos empregando a classe base de navegação mais recente. Existem algumas adições recentes, como classe de link de navegação, classe de item de navegação e estilos de barra de navegação também.

• Reescreveu o componente com flexbox.
• .navbar-default agora é .navbar-light , embora .navbar-dark permaneça o mesmo. No entanto, essas classes não definem mais background-color s; em vez disso, eles afetam essencialmente apenas a color .
• .navbar-toggle agora é .navbar-toggler e tem estilos diferentes e marcação interna (não mais três <span> s).
• Eliminou completamente a classe .navbar-form . Não é mais necessário; em vez disso, apenas use .form-inline e aplique os utilitários de margem conforme necessário.
• As barras de navegação não incluem mais margin-bottom ou border-radius por padrão.

Uma Tabela Comparativa do Bootstrap Versão 3 e Versão 4

Como já dissemos, a equipe do Bootstrap reescreveu o framework. Portanto, as alterações acima são apenas as principais alterações que escrevemos aqui. Para ler em profundidade, siga o link Bootstrap 4.

Devemos migrar para o Bootstrap 4 ou permanecer no Bootstrap 3

Já falamos sobre os recursos que o Bootstrap 4 oferece. Podemos ver que muito trabalho foi feito na otimização e limpeza de elementos e classes desnecessários em todo o framework. O Bootstrap 4 promete ser muito mais rápido e simplificado para uma flexibilidade e facilidade ainda maiores na criação de um incrível site compatível com dispositivos móveis.

Bootstrap 4, movido para flexbox. Isso pode ser considerado como uma das maiores e significativas conquistas. Isso proporcionará os seguintes benefícios:

• Grade baseada em Flexbox
• Nova camada de grade XLl
• Última grade de layout automático
• Opções de personalização da barra de navegação
• Novos utilitários de espaçamento
• Configuração Sans Glyphicons (zona livre de inchaço)
• Dimensionamento responsivo
• Flutuadores responsivos
• Margens automáticas
• Centralização Vertical

Conclusão

Bootstrap sempre facilitou a vida dos desenvolvedores e pela atualização na versão, agora o bootstrap tem muito mais recursos e opções para facilitar ainda mais as coisas para os desenvolvedores e é por isso que as pessoas estão migrando do Bootstrap 3 para o Bootstrap 4, pois é mais conveniente e acessível que sua contraparte anterior.