Recentemente, abbiamo pubblicato un articolo intitolato 5 incredibilmente utili strumenti integrati in Twitter Bootstrap, che ha dato uno sguardo alla struttura di base del framework Bootstrap di Twitter e ti ha insegnato ad implementare alcuni dei componenti principali.
Twitter ha appena rilasciato Bootstrap 2.0, un aggiornamento così grande che equivale a una riscrittura quasi completa. Ci sono un bel po 'di nuove funzionalità e giocattoli con cui giocare, ma il vero protagonista è che il framework è ora pienamente reattivo. Unisciti a noi mentre scorgiamo per vedere come funziona la nuova griglia e quali altre fantastiche nuove funzionalità sono state aggiunte. Imparerai come implementare Bootstrap nei tuoi progetti e raccoglierai anche alcune tecniche CSS estremamente utili che puoi usare ovunque.
dimostrazione
Parleremo di diverse nuove funzionalità di Bootstrap oggi. Se vuoi vederli in azione, fermati dalla demo live di seguito.
demo: Clicca qui per il lancio.
Implementazione della griglia reattiva
L'aspetto più importante di Twitter Bootstrap è ovviamente che ora è completamente reattivo. Se stai ancora etichettando l'intero movimento reattivo come una mania sciocca nella speranza che alla fine puoi saltare l'apprendimento delle tecniche necessarie, sei sfortunato. Il design reattivo è sulla buona strada per essere una pratica standard invece di un? Bello avere? Aggiungi su. Non è così complicato come si potrebbe pensare e strumenti come Bootstrap lo rendono ancora più semplice.
La nuova griglia reattiva ha una larghezza di dodici colonne e funziona come la griglia di sedici colonne di Bootstrap 1. Se hai mai usato qualunque sistema di griglia prima, quindi ti sentirai come a casa perché non c'è niente di troppo sconvolgente.
Per implementare la griglia, segui praticamente gli stessi passi che hai sempre fatto. Inizia con un div contenitore, quindi crea una riga e riempi quella riga con span (x) div. Dato che si tratta di una griglia a dodici colonne, basta assicurarsi che i numeri in una riga aggiungano fino a dodici. Prova quattro? Span3? div, un? span9? con uno? span3? o anche solo una scala? span12? andare fino in fondo. Ecco un rapido esempio:
Quanto sopra rappresenta una griglia statica. Rimarrà comunque reattivo, semplicemente non risponderà alle minime variazioni della dimensione della finestra del browser, solo quelle impostate dalle query multimediali. Se si desidera una griglia fluida, utilizzare le classi di fluidi:
Le query sui media
Le domande multimediali incluse sono elencate di seguito, a partire dai dispositivi mobili e procedendo verso l'alto. In pratica, ognuno entra e modifica la dimensione delle colonne per ridisegnare il layout a qualcosa di più appropriato per il viewport.
- @media (larghezza massima: 480px)
- @media (larghezza massima: 768 px)
- @media (larghezza minima: 768 px) e (larghezza massima: 980 px)
- @media (larghezza massima: 980 px)
- @media (larghezza minima: 980 px)
- @media (larghezza minima: 1200px)
La prima query multimediale (480px e inferiore) è destinata agli smartphone e praticamente interrompe tutto in un'unica colonna di larghezza pari al 100%. Questo può essere un po 'troppo semplificato per i tuoi gusti, ma la bellezza di quadri come questo è che sono solo suggerimenti, sei incoraggiato a personalizzare il contenuto del tuo cuore.
La prossima media query si rivolge ai tablet con un range compreso tra 480px e 768px, quindi fino a 980px per i tablet con paesaggi e desktop standard e di grandi dimensioni.
Per la griglia statica, le singole colonne partono da 70 px di larghezza, quindi salgono a 60 px e infine a 42 px prima di aumentare del 100% per i dispositivi mobili.
Suggerimento: prendi il giusto download
È interessante notare che le query multimediali non sono incluse nel download predefinito dalla home page di Bootstrap. Se li vuoi, devi prendere il download di GitHub.
Uso del selettore del valore di attributo piacevole
Se controlli il codice per le domande sui media, potresti imparare uno o due trucchetti. Ad esempio, gli sviluppatori hanno implementato un solido esempio del "selettore del valore degli attributi della sottostringa arbitraria", di cui ho parlato nei selettori CSS: Just the Tricky Bits.
Bootstrap ha molte classi che usano la parola "span"? (span1, span2, ecc.), e invece di battere a macchina ognuno individualmente, l'ASAVS li afferra tutti in una volta con questo piccolo pezzo di codice: [class * =? span?]. Questo selettore in realtà scava l'HTML e trova qualcosa con? Span? nel nome della classe, indipendentemente da ciò che la segue. Anche una classe di? Spansomethingtotallycrazy? sarebbe mirato.
Trasformazione del contenuto
Sebbene il cuore delle domande dei media sia quello di ridisporre le colonne, anche qui c'è molto di più. Gli sviluppatori hanno effettivamente impiegato del tempo per ristrutturare molti degli elementi in modo che si trasformino quando le dimensioni della vista cambiano.
Ad esempio, i menu di navigazione cambiano drasticamente quando visualizzi su un tablet o uno smartphone. Per vedere un esempio, prova la pagina iniziale di Bootstrap. A grandezza intera, il menu di navigazione è un semplice elenco orizzontale di collegamenti testuali.
Su un tablet o uno smartphone, tuttavia, il testo viene cancellato e sostituito con un pulsante in alto a destra sullo schermo.
Toccando il pulsante si espande la nuova area del menu. Qui abbiamo una lista verticale di link, che consente di toccare aree più grandi.
Immagini reattive
Il menu di navigazione non è l'unica cosa che modifica le dimensioni con le finestre, anche molti altri oggetti, dai pulsanti semplici fino agli oggetti più complicati come i caroselli delle immagini. Per rimuovere le immagini di ridimensionamento automatico, Twitter ha assunto la larghezza massima: 100%; itinerario. Ecco lo snippet completo:
In questo modo, dato che le colonne e le righe si ridimensionano, la larghezza dell'immagine si riduce al massimo alla larghezza della colonna genitore. Notare anche la modalità? -Ms-interpolazione: bicubica ;? linea. Questa è una proprietà piuttosto oscura che essenzialmente rende più facile il ridimensionamento delle immagini in IE.
Altre novità
La funzionalità reattiva è sicuramente la nuova funzionalità più interessante di Bootstrap, ma c'è molto di più qui per essere entusiasti. Ecco tre dei miei articoli preferiti:
Barre di avanzamento
Bootstrap ora ha barre di avanzamento compatibili con i browser che sono semplicissime da implementare. Basta inserire uno snippet come quello qui sotto:
La larghezza? 30%? qui assomiglia a quanto lontano lungo la barra di avanzamento sarà. Se vuoi cambiarlo a metà, digita solo il 50%.
Gruppi di pulsanti
I gruppi di pulsanti sono un po 'come la navigazione breadcrumb in quanto sono pulsanti individuali che sono tutti insieme. Normalmente, questo richiede una buona parte del codice da estrarre. Non solo devi dare uno stile al tema generale dei pulsanti, devi anche rendere diverso il primo e l'ultimo pulsante.
Con Bootstrap, tutto ciò di cui hai bisogno sono alcuni collegamenti con il? Btn? classe all'interno di un gruppo? btn? div.
caroselli
I vecchi plug-in JavaScript di Bootstrap sono stati rinnovati e alcuni di quelli completamente nuovi sono stati aggiunti. Il mio preferito qui è il nuovo carosello jQuery. Il codice di esempio qui sotto può sembrare pesante, ma se lo decidi è piuttosto semplice. Il contenuto della diapositiva viene gettato nel? .Item? div e può essere aggiunta una didascalia opzionale. La navigazione è lanciata alla fine.
Conclusione
Quando una grande azienda come Twitter mette a disposizione una risorsa gratuita, è una scommessa per costruire effettivamente il flusso di lavoro attorno ad esso. Uno dei problemi principali è che non si può sapere con certezza quanto bene verrà mantenuto a lungo termine. Fortunatamente, sembra che Bootstrap sia, almeno per ora, una priorità piuttosto elevata su Twitter. La nuova versione rappresenta un'enorme quantità di tempo e fatica e mostra davvero. Questo si sta trasformando in un boilerplate estremamente ampio.
Sono personalmente entusiasta del fatto che Twitter ritenga necessario prendere Bootstrap reattivo. Ciò sicuramente aiuterà ulteriormente la causa del responsive design che funziona bene non solo su tutti i principali browser, ma anche su tutti i principali dispositivi.
Lascia un commento qui sotto e facci sapere cosa ne pensi di Bootstrap 2.0. Hai provato la prima versione? Quali sono i tuoi miglioramenti preferiti?