Differenze tra Bootstrap 3 e 4

Descrizione

Bootstrap è un potente e popolare framework front-end mobile first per la creazione di siti mobile first reattivi sul web utilizzando framework HTML, CSS e JS.

La tabella seguente mostra le differenze in Bootstrap 3 e Bootstrap 4 -

S.No. Componente Bootstrap 3 Bootstrap 4
1 File sorgente CSS DI MENO SCSS
2 Sistema a griglia Sistema a griglia a 4 livelli (xs, sm, md, lg) Sistema a griglia a 5 livelli (xs, sm, md, lg, xl)
3 Unità CSS px rem
4 Dimensione del font 14px 16px
5 Struttura a discesa Creato con <ul> e <li> Creato con <ul> o <div>
6 Colonne di offset col-md-offset-4 offset-md-4
7 immagini .img-responsive class .img-fluid class
8 Tabelle Aggiungi la classe .table-responsive all'elemento genitore <div> Aggiungi la classe .table-responsive all'elemento <table>
9 Glyphicons Supportato Non supportato
10 Oggetti multimediali Utilizza classi per oggetti multimediali, come .media , .media-body , .media-object , .media- header , .media-right , .media-left , .media-list e .media-body Utilizza solo la classe .media per gli oggetti multimediali.
11 Tabelle scure / inverse Non supportato Utilizza la classe .table-dark per creare tabelle scure / inverse
12 Caselle di controllo e pulsanti di opzione Consente di visualizzare le caselle di controllo e pulsanti di opzione utilizzando .radio , .radio-linea , .checkbox o .checkbox-inline classi Visualizza le caselle di controllo e pulsanti di opzione utilizzando .Form-controllo , .Form-check-label , .Form-check-ingresso , o .Form-check-in linea classi
13 Dimensione controllo modulo Aumentare o diminuire dimensione di un controllo di input utilizzando .input-lg e .input-sm classi Aumentare o diminuire dimensioni di un controllo di input utilizzando .Form-control-lg e .Form-control-sm classi
14 Testo guida Visualizza il testo della guida utilizzando la classe .help-block Visualizza il testo della guida utilizzando la classe .form-text
15 Stili Utilizza le classi .btn-default e .btn-info sui pulsanti Utilizza le classi .btn-secondary , .btn-light e .btn-dark sui pulsanti e rilascia la classe .btn-default .
16 Pulsanti di contorno Non supportato Applicare uno stile ai pulsanti con il colore del contorno utilizzando .btn-outline- * class
17 Dimensioni dei pulsanti La classe .btn-xs è disponibile Disponibile solo per le classi .btn-sm e .btn-lg e ha eliminato la classe .btn-xs
18 Intestazioni di menu Usa la classe .dropdown-header per il tag li Usa la classe .dropdown-header per i tag h1 - h2
19 Divisori Usa la classe .divider nell'elemento li Utilizza la classe .dropdown-divider nell'elemento div
20 Navbar fisse Fissare la barra di navigazione in alto o in basso utilizzando .navbar-fisso-top e -bottom-.navbar fisso classi Fissare la barra di navigazione in alto o in basso utilizzando .fixed-top e .fixed-bottom classi
21 Cercapersone Allineare le pagine utilizzando .previous e .Next classi Non supportato
22 Jumbotron a tutta larghezza Non utilizza la classe .jumbotron-fluid su jumbotron a larghezza intera Utilizza la classe .jumbotron-fluid per jumbotron a tutta larghezza
23 Elemento carosello Utilizza la classe .item per gli elementi del carosello. Utilizza la classe .carousel-item per gli elementi del carousel.
24 Pozzetti, pannelli e miniature Supportato Non supportato. Usa invece le carte
25 Nav in linea Non include la classe .nav-inline Visualizza i nav come in linea utilizzando la classe .nav-inline