Bootstrap 3 vs Bootstrap 4: una panoramica

Bootstrap è stato il framework front-end open source più affidabile per lo sviluppo di siti Web reattivi e mobili. Bootstrap è un framework famoso, perché??? Perché tutto ciò che richiede è la conoscenza di base di HTML e CSS e possiamo costruire un sito Web attraente e funzionale utilizzando classi predefinite di bootstrap che si occupano della reattività su diversi dispositivi.

Bootstrap 3 è stato rilasciato nell'anno 2013 e l'ultima versione stabile Bootstrap 3.3.7 è stata rilasciata a luglio 2016. Nell'ottobre 2014, Twitter ha annunciato che Bootstrap 4 era in fase di sviluppo. La prima versione alpha di Bootstrap 4 è stata rilasciata nell'agosto 2015. E ora nell'agosto 2017 è stata rilasciata la versione Bootstrap 4.0.0-beta. Puoi dare un'occhiata a questo tutorial approfondito su Bootstrap se vuoi iniziare a imparare da 0 .

Il centro dell'attenzione di questo post saranno le differenze chiave, le aggiunte e le sottrazioni dalla versione 3 alla versione 4.0.0-beta appena rilasciata.

Cosa c'è di diverso nella versione 4:

Ora possiamo iniziare a parlare delle nuove funzionalità di Bootstrap 4. Con la rapida evoluzione della tecnologia, vengono sviluppati linguaggi più nuovi e intelligenti per rendere molto più semplice la creazione di siti Web puliti e veloci. Questo è il caso dell'ultima versione di Bootstrap. Il team afferma che questa "versione 4 è un'importante riscrittura di quasi l'intero progetto". Riassumeremo alcune modifiche chiave di questo miglioramento.

Modifiche globali:

• Passato da Less a Sass per i file CSS di origine.
• Passato da px rem come unità CSS principale di Bootstrap, sebbene i pixel siano ancora utilizzati per le query multimediali e il comportamento della griglia poiché le viste del dispositivo non sono influenzate dalla dimensione del tipo.
• Dimensione globale del carattere aumentata da 14px a 16px .
• Aggiunto un nuovo livello di griglia per ~480px e inferiore.

Sistema a griglia:

Il principale passo avanti di Bootstrap 4 verso il miglioramento è il suo movimento verso l'adozione di Flexbox. Come parte di flexbox, includeva il supporto per le classi di allineamento verticale e orizzontale. Bootstrap 4 pone molta enfasi sulla personalizzazione. Il suo nuovo sistema di livelli di griglia consente a Bootstrap 4 di godere della presenza di un massimo di 5 livelli di griglia (esempio di 5 livelli: .col-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4). Si può facilmente dire che Bootstrap 4 fornisce l'accesso a un sistema di griglia migliorato.

• Aggiunto un nuovo livello di griglia SM inferiore a 768px per un controllo più granulare. Ora ci sono xs, sm, md, lg e xl. Ciò significa anche che ogni livello è stato aumentato di un livello (quindi .col-md-6 nella v3 è ora .col-lg-6 nella v4).
• Modificati i punti di interruzione delle query multimediali del sistema della griglia e le larghezze dei contenitori per tenere conto del nuovo livello della griglia e garantire che le colonne siano equamente divisibili per 12 alla loro larghezza massima.
• I punti di interruzione della griglia e le larghezze del contenitore ora vengono gestiti tramite mappe Sass ($ punti di interruzione della griglia e $ larghezza massima del contenitore) anziché una manciata di variabili separate. Questi sostituiscono completamente le variabili @screen-* e consentono di personalizzare completamente i livelli della griglia.
• Anche le query sui media sono cambiate. Invece di ripetere le dichiarazioni di media query con lo stesso valore ogni volta, ora c'è @include media-breakpoint-up/down/only. Ora, invece di scrivere @media (min-width: @screen-sm-min) { … }, puoi scrivere @include media-breakpoint-up(sm) { … }.

Supporto del browser:

• Eliminato il supporto per IE8 e iOS 6. v4 ora è solo IE9+ e iOS 7+. Per i siti che necessitano di uno di questi, utilizzare v3.

Classi di utilità:

In Bootstrap 4 sono state incluse nuove classi di utilità senza ostacolare alcuna funzionalità esistente. Aggiunte così importanti sono quelle delle classi di allineamento del testo reattivo, dei float reattivi e dell'incorporamento reattivo. Oltre a offrire molte scorciatoie, queste consentono rispettivamente di modificare l'allineamento del testo, la fluttuazione degli elementi e il ridimensionamento delle proporzioni di qualsiasi supporto incorporato. (esempio: .hidden-md-up nasconde un elemento nelle viste medie, grandi ed extra-grandi. Ora, invece di .hidden-md-up , usa .d-md-none ).

Immagini:

• Rinominato .img-responsive in .img-fluid .
• Rinominato .img-rounded in .rounded
• Rinominato .img-circle in .rounded-circle

Tabelle:

• Le tabelle reattive non richiedono più un elemento di avvolgimento. In parole semplici, in Bootstrap 3, la classe .table-responsive dovrebbe essere aggiunta al genitore <div>. Ma in Bootstrap 4 , classe .table-responsive da aggiungere all'elemento <table> .
• Aggiunta una nuova opzione .table-inverse .
• Aggiunti modificatori dell'intestazione della tabella: .thead-default e. .thead-inverse
• Classi contestuali rinominate per avere un .table- . Quindi, .active .success , .warning , .danger e .table-info a .table-active , .table-success , .table-warning , .table-danger e .table-info.

Navigazione:

In Bootstrap 4, il componente di navigazione è stato notevolmente semplificato. Uno è necessario per creare un nuovo elenco di elementi che utilizzino l'ultima classe base di navigazione. Ci sono anche alcune aggiunte recenti come la classe nav-link, la classe nav-item e gli stili della barra di navigazione.

• Componente riscritto con flexbox.
• .navbar-default è ora .navbar-light , anche se .navbar-dark rimane lo stesso. Tuttavia, queste classi non impostano più background-color ; invece essenzialmente influiscono solo sul color .
• .navbar-toggle è ora .navbar-toggler e ha stili e markup interni diversi (non più tre <span> s).
• Eliminata completamente la classe .navbar-form . Non è più necessario; invece, usa semplicemente .form-inline e applica le utilità di margine secondo necessità.
• Le barre di navigazione non includono più margin-bottom o border-radius per impostazione predefinita.

Una tabella di confronto di Bootstrap versione 3 e versione 4

Come abbiamo già detto, il team di Bootstrap ha riscritto il framework. Quindi le modifiche di cui sopra sono solo modifiche chiave che abbiamo scritto qui. Per approfondimenti segui il link Bootstrap 4.

Dovremmo migrare su Bootstrap 4 o rimanere su Bootstrap 3

Abbiamo parlato delle funzionalità offerte da Bootstrap 4. Possiamo vedere che è stato fatto molto lavoro per ottimizzare e ripulire elementi e classi non necessari nell'intero framework. Bootstrap 4 promette di essere molto più veloce e semplificato per una flessibilità e una facilità ancora maggiori durante la creazione di un fantastico sito Web ottimizzato per i dispositivi mobili.

Bootstrap 4, spostato su flexbox. Questo può essere considerato uno dei risultati più grandi e significativi. Ciò fornirà i seguenti vantaggi:

• Griglia basata su Flexbox
• Nuovo livello di griglia XLl
• Ultima griglia di layout automatico
• Opzioni di personalizzazione della barra di navigazione
• Nuove utilità di spaziatura
• Configurazione senza Glyphicons (zona senza rigonfiamenti)
• Dimensionamento reattivo
• Galleggianti reattivi
• Margini automatici
• Centratura verticale

Conclusione

Bootstrap ha sempre facilitato la vita degli sviluppatori e grazie all'aggiornamento nella versione, ora bootstrap ha molte più nuove funzionalità e opzioni per rendere le cose, ancora di più, più facili per gli sviluppatori ed è per questo che le persone stanno migrando da Bootstrap 3 a Bootstrap 4 in quanto più comoda e accessibile della sua controparte precedente.