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