Share
Oggi, diamo un'occhiata al sistema di rete che viene fornito con Twitter Bootstrap e daremo un'occhiata alla loro griglia dei media mentre lo facciamo. Nel processo costruiremo un bel mockup per una pagina del portfolio.
Nota: La griglia con cui lavoriamo oggi viene fornita con la versione di Bootstrap aggiornata al momento della pubblicazione: 1.4.0.
Permettetemi di presentarvi la griglia di Bootstrap, che si basa sul sistema a griglia 960. Ti incoraggerò a imparare giocando con la griglia, usando il file hero.html.
In alternativa, scarica il video o iscriviti a Webdesigntuts + screencast tramite iTunes!
Accentsconagua
.riga, .fila: prima, e fila: dopo è basato sul trucco micro clearfix di Nicolas Gallagher..riga> [class * = "span"] è un selettore di attributi CSS 2.1. Ecco le specifiche del W3C. Vedi l'utile introduzione di Chris Coyier.Ora creiamo la nostra pagina portfolio personalizzata. Incorporeremo due video di YouTube e li organizzeremo in uno schema alternato utilizzando il sistema di griglia. Nel farlo, condividerò come calcolare le larghezze appropriate per il montaggio dei media all'interno della griglia.
In alternativa, scarica il video o iscriviti a Webdesigntuts + screencast tramite iTunes!
Continuiamo a sviluppare la nostra pagina portfolio. Useremo la classe media-grid per configurare due file di immagini in miniatura. E ti presenterò l'utilissimo sito per le immagini sui luoghi: Placehold.it.
In alternativa, scarica il video o iscriviti a Webdesigntuts + screencast tramite iTunes!
Con i nostri contenuti in atto, siamo pronti ad aggiungere alcuni dei nostri stili personalizzati. Colleghiamo il nostro foglio di stile, importando gli stili di Bootstrap e aggiungendo il nostro. Questo passaggio ti consentirà di essere pronto a correre, pronto a creare il tuo sito creato su misura per Bootstrap.
In alternativa, scarica il video o iscriviti a Webdesigntuts + screencast tramite iTunes!
Cose entusiasmanti stanno accadendo nella comunità di sviluppo che ha preso forma attorno al progetto. Tra poche settimane (nell'ultima relazione), Twitter Bootstrap 2.0 sarà rilasciato al mondo e includerà alcuni nuovi eccitanti tocchi, tra cui una griglia reattiva. Questo è certamente qualcosa a cui prestare attenzione.
Nel frattempo, ci prepareremo familiarizzando con il meglio che Bootstrap ha da offrire.
