Diferenças entre Bootstrap 3 e 4

Descrição

Bootstrap é uma estrutura de front-end móvel poderosa e popular para a construção de primeiros sites móveis responsivos na web usando estrutura HTML, CSS e JS.

A tabela a seguir mostra as diferenças no Bootstrap 3 e Bootstrap 4 -

S.No. Componente Bootstrap 3 Bootstrap 4
1 Arquivos de origem CSS MENOS SCSS
2 Sistema de rede Sistema de grade de 4 camadas (xs, sm, md, lg) Sistema de grade de 5 camadas (xs, sm, md, lg, xl)
3 Unidade CSS px rem
4 Tamanho da fonte 14px 16px
5 Estrutura suspensa Criado com <ul> e <li> Criado com <ul> ou <div>
6 Colunas de compensação col-md-offset-4 offset-md-4
7 Imagens classe responsiva .img classe .img-fluid
8 Mesas Adicionar classe .table-responsive ao elemento pai <div> Adicione a classe .table-responsive ao elemento <table>
9 Glifos Suportado Não suportado
10 Objetos de mídia Usa classes para objetos de mídia, como .media , .media-body , .media-object , .media- header , .media-right , .media-left , .media-list e .media-body Usa apenas a classe .media para objetos de mídia.
11 Tabelas escuras / inversas Não suportado Usa a classe .table-dark para fazer tabelas dark / inverse
12 Caixas de seleção e botões de rádio Exibe as caixas de seleção e botões de rádio usando .radio , .radio-inline , .checkbox , ou .checkbox-inline aulas Exibe as caixas de seleção e botões de rádio usando .form-check , .form-check-label , .form-check-entrada , ou -.form-check in-line aulas
13 Tamanho de controle de formulário Aumentar ou diminuir o tamanho de um controle de entrada usando .input-lg e .input-sm aulas Aumentar ou diminuir o tamanho de um controle de entrada usando .form-controlo-lg e .form-controlo-sm aulas
14 Texto de ajuda Exiba o texto de ajuda usando a classe .help-block Exibir o texto de ajuda usando a classe .form-text
15 Estilos Usa as classes .btn-default e .btn-info nos botões Usa as classes .btn-secondary , .btn-light e .btn-dark nos botões e removeu a classe .btn-default .
16 Botões de contorno Não suportado Defina o estilo dos botões com a cor do contorno usando a classe .btn-outline- *
17 Tamanhos de botão A classe .btn-xs está disponível Disponível apenas para as classes .btn-sm e .btn-lg e eliminou a classe .btn-xs
18 Cabeçalhos de menu Use a classe .dropdown-header para a tag li Use a classe .dropdown-header para tags h1 - h2
19 Divisores Use a classe .divider no elemento li Use a classe .dropdown-divider no elemento div
20 Navbars fixas Fixar a barra de navegação para cima ou para baixo usando fixo-.navbar-topo e de fundo .navbar-fixo aulas Fixar a barra de navegação para cima ou para baixo usando .fixed-topo e de fundo .fixed aulas
21 Pagers Alinhe as páginas usando .previous e .next aulas Não suportado
22 Jumbotron Full Width Ele não usa a classe de fluido .jumbotron em jumbotrons de largura total Ele usa a classe de fluido .jumbotron para jumbotrons de largura total
23 Item de carrossel Usa a classe .item para itens de carrossel. Usa a classe de item de carrossel para itens de carrossel.
24 Wells, Panels and Thumbnails Suportado Não suportado. Em vez disso, use cartões
25 Inline Navs Não inclui a classe .nav inline Exiba os navs inline usando a classe .nav-inline