Share
Bootstrap, uno dei più popolari framework di front-end tra i web designer, ha recentemente lanciato il suo molto attesissima versione 4! Diamo un'occhiata a cosa c'è di nuovo, cosa è stato rimosso e cosa puoi fare con esso.
Non abbiamo mai smesso di credere, e spero che tu non l'abbia fatto neanche! Bootstrap 4.0.0 è finalmente arrivato! https://t.co/zFAOxpyhvD
- Bootstrap (@getbootstrap) 18 gennaio 2018
Questa iterazione di Bootstrap, secondo Mark Otto e il team, è una "grande riscrittura dell'intero progetto". Ciò promette molti miglioramenti e suggerisce anche che c'è molto da capire se si prevede di migrare progetti esistenti in questa nuova versione. Non ci sono "cambi di rottura", ma c'è molto da fare. Tempo di saltare ed esaminare le caratteristiche più importanti.
Tradizionalmente, il layout di Bootstrap è stato alimentato da stili basati sul float. Nelle versioni recenti è stata resa disponibile un'alternativa flexbox, ma dato il suo diffuso supporto per i browser, flexbox è ora il padrone delle griglie di Bootstrap. La tecnologia CSS alla base delle griglie di Bootstrap non fa una grande differenza, ma Flexbox offre una maggiore flessibilità rispetto ai float, quindi le griglie basate su Flexbox hanno alcune opzioni in più. Ad esempio, l'utilizzo di flexbox significa che è possibile definire una colonna e far ridimensionare automaticamente i suoi fratelli attorno ad essa.
La mossa verso la promozione di flexbox ha in realtà provocato un'altra modifica: il supporto del browser. Bootstrap v4 ha ufficialmente abbandonato il supporto per Internet Explorer 8, 9 e iOS 6. Ciò significa in effetti che i siti Web Bootstrap supportano solo IE10 + e iOS 7+. Vale la pena prendere nota di.
I fan di Sass saranno lieti di sapere che Bootstrap è ora ufficialmente un progetto Sass-first. Se scarichi il sorgente Bootstrap troverai una cartella chiamata "Sass" nella quale vedrai tutti i partial parziali necessari. "_Variables.scss" contiene tutte le variabili e le impostazioni necessarie, quindi "bootstrap.scss" contiene tutte le @importare direttive, che consente di personalizzare l'installazione di Bootstrap includendo o escludendo i componenti desiderati.
In tutti i posti a parte le query multimediali, Bootstrap v4 ha rilasciato pixel in favore delle relative unità di misura come rems. Ciò rende il tutto più scalabile, quindi se non sei ancora abituato a rem unità ora sarebbe un ottimo momento per dare un'occhiata a queste risorse:
Oltre al passaggio da Bootstrap ai layout basati sul float, la sua reattività ora arriva anche con un livello extra. D'ora in poi, potrai personalizzare questi cinque valori predefiniti:
$ breakpoint della griglia: (xs: 0px, sm: 576px, md: 768px, lg: 992px, xl: 1200px)! default;
Il prossimo cambiamento notevole si presenta sotto forma di un nuovo file di reset. "Riavvia" accetta i ripristini di Normalize, che usano solo selettori di elementi, quindi si basano su di esso con alcuni stili di reset basati su classi supponenti (troverai .tavolo e .table-delimitato sepolto lì con molti altri).
Se hai scaricato una versione precedente di Bootstrap avrai familiarità con il customizer online. Questo strumento ti permetteva di selezionare e deselezionare vari aspetti del framework Bootstrap per creare la tua versione ideale.
Bene, è andato.
Al contrario, Bootstrap ora si concentra sulla propria struttura modulare, permettendoti di sfruttare Sass dalla tua parte, includendo solo ciò che ti serve e compilando il tuo risultato finale deployable .
Fallo da soloBootstrap non include più Glyphicons. Invece, ti consigliamo di trovare i tuoi preferiti e includerli nel modo che ritieni più opportuno. Il team Bootstrap preferisce i seguenti set, che raccomandiamo di implementare come SVG piuttosto che utilizzare le icone dei caratteri Web:
Il pollice in su di IconicLe versioni precedenti di Bootstrap includevano il supporto Grunt per automatizzare molte delle attività più comuni; ora è andato. Al suo posto, Bootstrap ora include una serie di script npm che troverai nel file "package.json". Puoi usarli per fare cose come guardare i tuoi file Sass per le modifiche, eseguire test dei lint sul tuo JavaScript o semplicemente usarli eseguire npm dist per fare tutto e compilare una versione di distribuzione del tuo sito web finito.
Per ulteriori dettagli su come Bootstrap e Node.js funzionano, dai un'occhiata ai documenti dello strumento di creazione o dai seguenti tutorial:
Insieme a questi importanti cambiamenti, ci sono una serie di modifiche minori all'ultimo Bootstrap. Gli appassionati di componenti come pannelli, miniature e pozzi saranno delusi dall'apprendere che questi sono stati rimossi. Tuttavia, hanno lasciato il posto a un componente onnicomprensivo chiamato "card", che in realtà è un grande miglioramento. Puoi leggere tutto su questi cambiamenti e altro ancora sulla pagina Migrazione.
Restate sintonizzati per ulteriori tutorial e corsi su Bootstrap 4 su Tuts +, e ci vedremo la prossima volta!
Accentsconagua