Bootstrap è un'interessante framework o? Toolkit? offerto gratuitamente agli sviluppatori da nientemeno che da Twitter.com. Secondo Twitter, Bootstrap è progettato per dare il via allo sviluppo di applicazioni e siti web.
Oggi entreremo in Bootstrap e daremo uno sguardo veloce ad alcune delle cose che ha da offrire. Questo dovrebbe aiutarti a decidere se questo è solo un altro framework gonfiato o uno strumento incredibilmente utile che dovresti usare per avviare il tuo prossimo progetto.
Cosa puoi fare con Bootstrap?
Bootstrap è una sorta di coltellino svizzero per gli sviluppatori. È semplicemente caricato con strumenti e utilità, alcuni dei quali troverai estremamente utili, altri che non toccherai mai.
Il vero obiettivo dietro Bootstrap è quello di farti risparmiare tempo. Twitter ha fatto il lavoro pesante per te, ricercando e implementando alcuni dei modi migliori per eseguire varie attività. Hanno anche fatto diversi passi verso l'applicazione di stili di base solidi a vari elementi comunemente usati.
Dovresti prenderlo così com'è e spegnere il tuo cervello critico durante lo sviluppo? Assolutamente no! Dovresti scavare, trovare ciò che ti piace e abbandonare o cambiare ciò che non fai. Bootstrap è specificamente progettato per gestire la personalizzazione in molti casi, quindi sentiti libero di impazzire e renderlo tuo.
Iniziare
Se vuoi implementare alcuni degli stili con cui lavoreremo al volo, puoi semplicemente eseguire il hotlink sul file CSS Bootstrap in questo modo:
Faremo un ulteriore passo avanti e scaveremo in alcuni dei file LESS opzionali, quindi potrebbe anche essere utile fermarsi da GitHub e scaricare l'intero progetto.
Una volta che hai tutto pronto, è ora di andare avanti e vedere cosa questa cosa ha da offrire. Non seguirò un'esercitazione passo passo di ogni singola funzionalità di Bootstrap, è piuttosto enorme e la documentazione dovrebbe essere coperta. Ciò servirà semplicemente come una rapida panoramica per alcune delle cose che trovo utili su Bootstrap e su come poterle sfruttare rapidamente e facilmente nel proprio codice.
dimostrazione
Clicca sul link qui sotto per vedere Twitter Bootstrap in azione. Ho creato questa pagina di esempio in pochi minuti utilizzando le tecniche che esamineremo qui di seguito.
demo: Clicca qui per avviare la demo.
1: una griglia pre-costruita
La prima cosa di cui dovremmo discutere è la griglia. Ogni buon framework ne ha uno e Bootstrap non fa eccezione. Non è necessario utilizzare la griglia per trarre vantaggio dalla ricchezza di stili offerti da Bootstrap, ma è l'elemento chiave per l'utilizzo di questo toolkit per eseguire un rapido layout di pagina con quasi nessuno sforzo.
Per impostazione predefinita, la griglia è larga 940 pixel con 16 colonne. Ogni colonna è 40px con una grondaia di 20px. Come 960.gs, Blueprint e altri, questa griglia è un po 'div pesante e richiede alcuni markup che potresti non amare, ma alla fine è davvero facile da usare e rende l'uso di Bootstrap un gioco da ragazzi.
La griglia funziona principalmente sulle classi di righe e intervalli. Le righe si spiegano da sole, quando vuoi iniziare una nuova riga, creare un div e applicare la? Riga? classe. Tutto per quella riga va in quel div, quando è il momento di un'altra riga, chiudi quella vecchia e ne inizi una nuova.
Per ogni div all'interno di una riga, si applica lo span #? classe con? #? essendo il numero di colonne che vuoi div divare.
Esempio di griglia
Diciamo che stavamo prendendo in giro un layout che utilizzava un'immagine di intestazione di grandi dimensioni che copriva l'intera larghezza del sito sopra quattro colonne di testo. Il markup per questo è semplice:
Lo stile per questo sarà completamente automatizzato. Tutto quello che devi fare è lasciare un po 'di contenuto nel codice HTML sopra e hai un layout.
Proprio come 960.gs, la griglia Bootstrap supporta anche il nesting e le colonne. Puoi persino rendere fluida la pagina lanciando tutto in un div con a ? Contenitore del liquido? classe, o semplicemente usare ?contenitore? per larghezza fissa.
2: MENO
MENO, il sempre più famoso preprocessore CSS, ottiene qui una grande approvazione da Twitter con un sacco di supporto integrato. Sono davvero andati tutti fuori e hanno creato un sacco di mix e variabili LESS per farti lavorare subito.
Diamo una rapida occhiata a solo alcune delle cose che puoi fare con Bootstrap e LESS.
Personalizza la griglia
La griglia Bootstrap è costruita usando i mixin LESS e la matematica CSS, quindi è facile da personalizzare. Basta cambiare un paio di variabili e tutto viene aggiornato automaticamente. Ad esempio, supponiamo di volere una griglia di dodici colonne anziché una di sedici colonne, semplicemente entrare in "variables.less", trovare le variabili di griglia e modificare il numero di colonne su dodici. È così facile
CSS3 senza il problema
Bootstrap semplifica l'utilizzo di alcuni dei tuoi trucchi preferiti CSS3 senza il dolore di ripetersi manualmente per ogni browser. Troverai utili mix per l'implementazione di angoli arrotondati, ombre e transizioni.
Ci sono anche risorse per creare sfumature e combinazioni di colori usando la magia di LESS.
clearfix
Se ti attieni alla griglia precostruita, non dovresti impostare manualmente e cancellare i float, ma se vai a modo tuo con il layout, il mixin integrato di clearfix può farti risparmiare un sacco di problemi.
Per implementarlo, tutto ciò che devi fare è digitare ? .Clearfix ()? nel tuo .less file. La struttura qui rispecchia il metodo utilizzato da Nicolas Gallagher.
3: Navigazione
Uno dei pezzi più utili di Bootstrap è l'eccezionale kit di strumenti di navigazione fornito, che puoi utilizzare per implementare diversi tipi di elementi di navigazione complessi in pochi secondi.
Navigazione principale
Ad esempio, c'è un'eccezionale barra di navigazione principale dall'aspetto nitido, che consente di personalizzare il marchio personalizzato e persino di rimanere con te come lo scroll (mostrato sopra in alto). Il markup sembra inutilmente pesante ma sicuramente facilita la creazione di un menu davvero fluido (anche il supporto per i dropdown è incluso).
Tabs
È anche possibile implementare facilmente uno schema di navigazione a schede. Questo markup sembra molto più bello e in realtà non potrebbe essere più semplice. Basta aggiungere il ? Schede? classe per una lista non ordinata e il gioco è fatto!
Ancora di più
Bootstrap non si ferma qui. In esso troverai costrutti simili per la creazione di navigazione breadcrumb, impaginazione e altro. Molti di questi sono implementati proprio come le schede, con una classe semplice.
Ricorda che tutti gli stili predefiniti possono essere modificati, quindi anche se non ti piace lo stile utilizzato, questi strumenti sono estremamente utili per ottenere la struttura di base delle tue navigazioni attiva e funzionante in pochissimo tempo.
4: gallerie
Con Bootstrap, le gallerie di immagini sono abbastanza automatizzate. Come con le schede, in questo caso richiedono semplicemente un elenco non ordinato con una classe speciale ? Media-grid?. Con questo applicato, la galleria esegue automaticamente il lavoro di layout tenendo conto della dimensione delle immagini. Detto questo, Twitter consiglia di utilizzare dimensioni come 90, 210 e 330, che funzionano bene con il layout.
Conclusione
Questo articolo ha lo scopo di darti una breve panoramica su alcuni degli ottimi strumenti disponibili in Twitter Bootstrap. Sia che tu stia cercando un modo rapido per eseguire un layout complesso o semplicemente desideri alcuni elementi dell'interfaccia utente come schede e pulsanti, Bootstrap ti copre.
Ci sono cose qua e là che potrei non essere d'accordo, ma nel complesso penso che Twitter sia riuscito a creare un insieme veramente utile di strumenti. Sono sempre entusiasta di vedere le aziende che offrono gratuitamente risorse preziose alla comunità del web design. Conosci qualche strumento simile di altre società? Fateci sapere nei commenti qui sotto.
bootstrap
Bootstrap è un toolkit open source per lo sviluppo con HTML, CSS e JS. La nostra serie offre suggerimenti e idee per lavorare con Bootstrap e ispirare collezioni di modelli per iniziare velocemente!