Twitter Bootstrap 101 Introduzione

Il Bootstrap di Twitter è un eccellente set di elementi dell'interfaccia utente attentamente predisposti, layout e strumenti javascript, disponibili gratuitamente per il tuo prossimo progetto di web design. Questa serie di video mira a farti conoscere Bootstrap; portandoti dal download delle risorse alla creazione di un sito Web completo basato su Bootstrap.

Quando Mark Otto (@mdo) e Jacob Thornton (@fat) hanno pubblicato Twitter Bootstrap nel mondo ad agosto 2011, il loro annuncio ha spiegato quale sarebbe stato il suo valore: potenziare gli sviluppatori front-end per avviare progetti in modo più efficiente ed efficace.

Il foglio di stile Bootstrap offre una griglia 960 facile da implementare per un layout efficiente, nonché stili realizzati con abilità per tipografia, navigazione, tabelle, moduli, pulsanti e altro. Per occuparsi dei tocchi JavaScript di tutti i giorni, Bootstrap offre un set ben costruito di plug-in jQuery per menu a discesa, schede, caselle modali, suggerimenti, messaggi di avviso e altro.

Insieme, questi elementi dell'interfaccia forniscono tutti i simboli di un sito Web HTML5 conforme agli standard, facile da usare e costruito professionalmente, subito pronto all'uso. Come @mdo mettilo nel post originale:

Bootstrap è un modo molto semplice per promuovere applicazioni veloci, pulite e altamente utilizzabili ... fornendo una soluzione pulita e uniforme per le attività di interfaccia più comuni e quotidiane che gli sviluppatori incontrano.

Eppure nessuno di questi si oppone a ulteriori personalizzazioni. Ancora una volta, nelle parole di @mdo, mentre Twitter Bootstrap "è molto esteso", rimane comunque "abbastanza flessibile da funzionare per molte esigenze di progettazione uniche". così,

È possibile utilizzare Bootstrap per creare prototipi rapidi o guidare l'esecuzione di progetti più sofisticati e maggiori sforzi di progettazione.

I termini di licenza liberale, con la licenza Apache 2.0, offrono una grande quantità di libertà creativa. Fintanto che offri ai bravi utenti di Twitter il merito del loro lavoro, sei libero di prendere, modificare e personalizzare tutto a tuo piacimento, quindi girarti e lanciare il sito risultante per te o per un cliente, gratuitamente o per profitto. (Per ulteriori approfondimenti, guarda questo thread di discussione, dove i ragazzi di Twitter hanno spiegato come rimanere in conformità con la licenza mentre personalizza il codice.)

Dato l'evidente valore di ciò che offre e i termini liberali della sua licenza, non c'è da meravigliarsi se molti sviluppatori hanno iniziato a sfruttarlo appieno. Il sito di Tumblr, "Built with Bootstrap", ha documentato un numero di siti creati da Bootstrap, tra cui:

  • CodeAcademy.com
  • CodeCards.com
  • Codesprint
  • The Hub Cycle Shop
  • Concerti in Clearing
  • E anche il nuovo sito di MSNBC: BreakingNews.com

In tutti questi esempi, noterai una griglia pulita e un'interfaccia che connota la professionalità. Noterai anche una buona dose di varietà nei dettagli. E potresti rimanere colpito dal fatto che gli sviluppatori di abiti rispettati come Code Academy e MSNBC hanno scelto di creare con Bootstrap.

Se sei come me, sarai fortemente tentato di dare un'occhiata per te stesso - e dovresti!

In effetti, l'ho controllato di recente. Lascia che ti mostri in giro.

Nei due brevi video seguenti, ti presenterò alla home page di Twitter Bootstrap, ti spiegheremo come scaricare il codice, dopodiché lo apriremo e cominceremo a organizzare le cose per preparare il nostro sito creato da Bootstrap.


Ottieni il codice

  • Vai a Twitter Homepage di Bootstrap
  • Scarica Bootstrap v. 1.4.0 (usato in questo tutorial)

Video 1: Introduzione

In alternativa, scarica il video o iscriviti a Webdesigntuts + screencast tramite iTunes!

Passaggi trattati in questo video:

  1. Visita la homepage di Bootstrap della documentazione online
  2. Visualizza alcuni siti creati con Bootstrap
  3. Scarica il codice da Github
  4. Decomprimilo

Video 2: scompattare e organizzare

In alternativa, scarica il video o iscriviti a Webdesigntuts + screencast tramite iTunes!

Passaggi trattati in questo video:

Faremo quanto segue, ma non precisamente in questo ordine:

  1. Organizza il CSS
  2. Organizza il codice JavaScript
  3. Sbarazzarsi dei file non necessari (risparmiando MENO per un altro giorno)
  4. Conserva il file di licenza di Apache 2.0, come richiesto dai termini di licenza di Twitter Bootstrap
  5. Preparati a sviluppare il nostro sito creato da Bootstrap

Prossimi passi?

Nelle future esercitazioni, ti guiderò attraverso le funzionalità principali di Bootstrap e ti aiuterò ad utilizzare Bootstrap per creare il tuo repository personalizzato di frammenti Bootstrap. In tal modo, conosceremo Bootstrap, acquisiremo esperienza nell'usarlo e personalizzarlo e ci prepareremo a lavorare con un'efficienza ancora maggiore sui nostri futuri progetti basati su Bootstrap.