Share
Il 19esimo Agosto 2015 Bootstrap 4 alpha è stato rilasciato al pubblico, esattamente quattro anni dopo il loro primo annuncio ufficiale di Bootstrap v1 (che coincidenza, giusto?).
Woohoo! Twitter Bootstrap, un framework CSS / HTML open source da me e @fat, è appena stato pubblicato: http://t.co/3OOsQ5T #kaboom
- Mark Otto (@mdo), 19 agosto 2011
Il sempre popolare framework di front-end ha subito un restyling completo e, in quanto grande fan di Bootstrap, sono davvero entusiasta di mettere le mani su alcune delle nuove funzionalità!
La homepage di BootstrapAvendo attraversato circa un anno di sviluppo, sono stati modificati 1.100 commit e 120.000 linee di codice; c'è un mucchio di cambiamenti e nuove funzionalità su cui possiamo sbavare. Per risparmiarti tutta la fatica di setacciare il registro delle modifiche, ho compilato un elenco di funzionalità che ho trovato interessanti.
Cominciamo da dove inizia ogni struttura, il modulo di reset. Il nuovo modulo di riavvio di Bootstrap si basa sul tradizionale normalize.css e ora sposta tutti i selettori di elementi generici e reimposta gli stili in un unico file scss accessibile.
Noterai anche un trucco elegante, impostando il tradizionale dimensionamento della scatola: border-box al html elemento, quindi globalmente a tutti gli elementi tramite l'ereditarietà:
html box-sizing: border-box; *, *: before, *: after box-sizing: inherit;
Ciò ci consente di ignorare meglio l'impostazione (se necessario) senza aumentare la specificità o l'utilizzo !importante.
Il merito va a Jon Neal per l'idea originale e CSS-Tricks per la panoramica approfondita di questo metodo.
In una mossa per facilitare lo snellimento del CSS, Bootstrap v4 alpha ha abbandonato il supporto IE8 e una serie di poli filler CSS3 hacky. Supportando IE9 + è stato in grado di abbracciare alcuni moduli CSS molto amati. Una di queste è l'unità rem (root em), che calcola la dimensione del font relativa all'elemento root (html).
Prendendo ulteriormente le unità rem, possiamo davvero iniziare ad approfondire la tipografia reattiva. Poiché tutte le dimensioni dei caratteri si basano sul nostro elemento radice, possiamo creare query multimediali per modificare le dimensioni in diversi punti di interruzione. Combina questo con i nuovi mixin di breakpoint della griglia e voilà!
Un esempio di come cambiare la dimensione del carattere sul nostro sito Web quando viene visualizzato su dispositivi di piccole dimensioni:
html font-size: 16px; // Crea una query multimediale per dispositivi extra-piccoli (0 - 34em) @include media-breakpoint-up (xs) html font-size: 18px;
Maggiori informazioni nella Guida completa di Kezz Bracey: Quando utilizzare Em vs. Rem.
Fuori dalla scatola Bootstrap v4 non supporterà Flexbox, utilizzando invece metodi più tradizionali float o tabella di visualizzazione. L'assenza dell'integrazione standard di Flexbox contribuisce al supporto di IE9 +, tuttavia, se si è disposti a rinunciare a questo supporto e farlo risalire a IE10 +, è possibile abilitare Flexbox in tutto il progetto. Questo viene fatto cambiando la variabile booleana nel file _variables.scss; il tuo css compilato ora includerà gli stili di Flexbox. Flexbox viene utilizzato non solo sulla griglia, ma anche su vari altri elementi tra cui il nuovo componente della scheda, i gruppi di input e i componenti multimediali.
Esaminiamo un esempio di dove Flexbox ci aiuta. Molto spesso avrò una serie di colonne in linea (come nella foto sotto) dove il contenuto in una delle colonne estenderà l'altezza ben oltre le altre colonne. Un classico dilemma CSS. Uno dei molti vantaggi dell'abilitazione di Flexbox è che possiamo forzare l'altezza delle colonne in modo uguale. Non è richiesto alcun CSS aggiuntivo!
Senza Flexbox
Con FlexboxOh, btw-Bootstrap 4 sarà in SCSS. E se ti interessa, v5 sarà probabilmente in PostCSS perché è una schifezza sacra che suona bene.
- Mark Otto (@mdo), 23 aprile 2015
SCSS ha usurpato LESS come il preprocessore CSS di scelta per Bootstrap v4. L'intera base del codice CSS è stata refactored come SCSS, con nessuna porta LESS ufficiale al momento della scrittura. Mark ha spiegato alcuni dei suoi ragionamenti in un tweet:
Se vuoi ragioni: più persone usano SCSS, libsass è pazzo veloce, sintassi os più esplicitamente chiaro, e io sono pigro e uso SCSS su GitHub.
- Mark Otto (@mdo), 23 aprile 2015
Se sei un grande fan della build originale di LESS, Mark ha chiesto aiuto per creare e mantenere la porta LESS.
Bootstrap v4 ha ripulito i suoi componenti con la rimozione del classico bene, pannello e miniature componenti. Al loro posto un nuovo componente: le carte!
Il nuovo componente della carta ha gli aspetti familiari dei pannelli, come titoli, intestazioni e piè di pagina, e li inserisce tutti in un contenitore di contenuti ordinato e flessibile.
E c'è di più:
È possibile impostare uno sfondo di una carta con un'immagine e sovrapporre il testo della carta e altri contenuti. Questo viene fatto senza alcun CSS aggiuntivo aggiungendo il seguente elemento all'interno della tua carta:
Aggiungere la classe carta-inversa imposterà il colore del carattere in bianco, consentendoti di impostare uno sfondo più scuro se lo desideri.
A proposito di sfondi, le varianti di colore tradizionali possono anche essere applicate alla carta e modellare lo sfondo di conseguenza. Per esempio, carta-primaria imposterà la carta sul colore primario, così via e così via.
Oltre alla griglia standard con grondaie, troverai anche l'opzione per raggruppare le carte insieme, rimuovere la spaziatura in-between, quindi impostare ogni colonna su un'altezza uniforme. Di default questo si ottiene usando display: tabella e layout della tabella: fisso, tuttavia, se hai attivato Flexbox, verrà utilizzato display: flex anziché.
Il componente della scheda viene inoltre fornito con una configurazione di colonna simile alla muratura che consente alle carte di raggrupparsi strettamente in base allo spazio verticale disponibile. Questa opzione è non supportato in IE9-richiede IE10 e versioni successive!
Le versioni precedenti di Bootstrap includevano varie classi chiamate "classi di utilità" per consentire una regolazione rapida e semplice del contenuto al di fuori degli stili specifici del componente. In genere questo è stato limitato ad alcune modifiche di base, come ad esempio il floating (pull-sinistra, pull-destra), colore (.text-primaria ecc.), clearfix (.clearfix) e pochi altri.
In Bootstrap v4 alpha abbiamo accesso a un intero host di nuove classi di utilità attorno a padding e margini. Questa mossa forse controversa consentirà agli utenti di Bootstrap v4 di spingere e allineare rapidamente il contenuto con incrementi uniformi. Alcuni utenti potrebbero ritenere che le classi di utilità siano ad un passo dagli stili in linea, tuttavia forniscono la possibilità di creare uno stile in modo rapido e uniforme senza creare un selettore specifico per farlo.
Le classi di utilità margin e padding sono create in multipli di un valore di spacer uniforme. per esempio:
// $ spacer è una variabile sass uguale a 1rem o 16px .m-a-0 margin: 0! important; .m-a margin: $ spacer! important; .m-a-md margin: ($ spacer * 1.5)! important; .m-a-lg margin: ($ spacer * 3)! important;
Qui .m-a sta per margin on unlati Esistono classi per lati singoli, assi, dimensioni diverse (come indicato da -0, -md e -lg) e per imbottitura.
Ecco alcune delle altre classi:
// Applica padding standard su tutti i lati. P-a padding: $ spacer! Important; // Applica padding standard all'inizio .p-t padding-top: $ spacer-y! Important; // Applica padding standard a destra. P-r padding-right: $ spacer-x! Important; // Applica padding standard in fondo .p-b padding-bottom: $ spacer-y! Important; // Applica padding standard a sinistra .p-l padding-left: $ spacer-x! Important; // Applica padding standard all'asse x (destra e sinistra) .p-x padding-right: $ spacer-x! Important; padding-left: $ spacer-x! important; // Applica padding standard all'asse y (in alto e in basso) .p-y padding-top: $ spacer-y! Important; padding-bottom: $ spacer-y! important;
L'idea qui è quella di ridurre la quantità di classi personalizzate altamente specifiche create per spingere il contenuto, spostandole invece in un metodo uniforme e coerente di allineamento del contenuto.
Ho avuto una chiacchierata con Mark Otto (@mdo co-creatore di Bootstrap) sul loro canale Slack pubblico e ho discusso l'uso di queste classi, ha detto:
"Ci siamo trovati a doverli e spesso sovrascrivendo i valori predefiniti per molti componenti. Margin e padding sembrano essere le proprietà più comunemente ignorate (insieme a colori e caratteri). "- Mark Otto
Ci sono letteralmente centinaia di nuove funzionalità e aggiornamenti alla base di codice esistente, troppi per andare oltre nei minimi dettagli. Quindi ecco un altro paio che non ha fatto la mia lista principale, ma vale comunque la pena menzionarlo.
La documentazione di Bootstrap v4 è stata aggiornata. Esiste una struttura leggermente diversa in cui sono suddivise le funzionalità disposizione, soddisfare e componenti. Quello che mi piace della nuova documentazione è che ogni componente ha una sua pagina, che rende facile collegarsi e anche giocare con il ridimensionamento della pagina per testare la reattività.
Bootstrap 4 ha un nuovo livello di griglia per i dispositivi più piccoli (larghi 480px), questo breakpoint ha preso il nome della classe precedente più piccola (.Col-XS-XX). In tal modo tutti i livelli di griglia sono aumentati di una tacca, creando in tal modo un nuovo livello più grande chiamato .col-XL-XX per la precedente lg.
Come menzionato nella conversione in rem ed em, il team Bootstrap ha aggiunto nuovi mixin per creare rapidamente punti di interruzione intorno ai breakpoint esistenti. Possono essere utilizzati con la seguente sintassi:
// Crea una query multimediale: @media (min-width) @include media-breakpoint-up (xs) ... @include media-breakpoint-up (sm) ... @include media-breakpoint-up (md) ... @include media-breakpoint-up (lg) ... @include media-breakpoint-up (xl) ... // Crea una query multimediale: @media (larghezza massima) @include media-breakpoint-down (xs) ... @include media-breakpoint-down (sm) ... @include media-breakpoint-down (md) ... @include media-breakpoint-down (lg) ... @include media-breakpoint -down (xl) ...
I glyphicons sono stati rimossi dalla build; La documentazione di Bootstrap 4 includerà infine istruzioni su come includere pacchetti di icone di terze parti come Font Awesome e Octicons.
Tutti i plug-in JavaScript sono stati riscritti in ES6 per sfruttare le specifiche più recenti. Potresti notare alcuni plugin rimossi (come il plugin affix) mentre continuano a riscrivere e costruire la nuova libreria.
Questa è la mia lista di alcune delle nuove fantastiche funzionalità aggiunte in Bootstrap 4 alpha. Se vuoi controllare l'intero registro delle modifiche finora guarda @ mdo's git pull request per Bootstrap 4.
Sono sicuro che ci sarà ancora un mucchio di cambiamenti perché il team risolve tutti i nodi. Il loro piano di sviluppo include le seguenti pietre miliari
Non ci sono parole su quando questi saranno rilasciati, proprio come le precedenti build a cui arriverà quando la libreria sarà pronta. Nel frattempo, ottieni il bootstrap e aiutali a tenere traccia dei problemi e a fornire un feedback generale attraverso il loro bug tracker!
Accentsconagua
