Share
I dag, la oss se på rutenettet som følger med Twitter Bootstrap, og vi tar en titt på deres mediegitter mens vi gjør det. I prosessen bygger vi oss en fin liten mockup for en porteføljeside.
Merk: Rutenettet vi jobber med i dag kommer med Bootstrap-utgivelsen nåværende på utgivelsestidspunktet: 1.4.0.
La meg introdusere deg til Bootstraps nett, som er basert på 960-nettverket. Jeg oppfordrer deg til å lære ved å leke med nettet, ved hjelp av hero.html-filen.
Alternativt, Last ned videoen, eller abonner på Webdesigntuts + screencasts via iTunes!
Accentsconagua
.rad, .rad: før, og rad: etter er basert på Nicolas Gallaghers micro clearfix hack..rad> [klasse * = "span"] er en CSS 2.1 attributtvelger. Her er W3C-spesifikasjonen. Se Chris Coyiers nyttige introduksjon.La oss nå lage vår egen tilpassede porteføljeside. Vi legger inn to YouTube-videoer og ordner dem i et vekslende mønster ved hjelp av rutenettet. Når vi gjør det, deler jeg hvordan å beregne passende bredder for montering av medier i rutenettet.
Alternativt, Last ned videoen, eller abonner på Webdesigntuts + screencasts via iTunes!
La oss fortsette å utvikle vår porteføljeside. Vi bruker klassen media-gitter å sette opp to rader med miniatyrbilder. Og jeg vil introdusere deg til det veldig hjelpsomme stedet for plassering: Placehold.it.
Alternativt, Last ned videoen, eller abonner på Webdesigntuts + screencasts via iTunes!
Med vårt innhold på plass, er vi klare til å legge til noen av våre egne tilpassede stiler. La oss knytte opp vårt eget stilark, importere Bootstraps stiler og legge til vår egen. Dette trinnet vil gjøre deg klar til å være i gang, klar til å lage ditt eget, skreddersydde Bootstrap-bygget nettsted.
Alternativt, Last ned videoen, eller abonner på Webdesigntuts + screencasts via iTunes!
Spennende ting skjer i utviklingssamfunnet som har tatt form rundt prosjektet. I løpet av få uker (siste rapport), vil Twitter Bootstrap 2.0 bli utgitt til verden, og det vil inkludere noen spennende nye detaljer, inkludert et responsivt rutenett. Det er absolutt noe å se etter.
I mellomtiden forbereder vi oss ved å bli fullt kjent med det nåværende beste som Bootstrap har å tilby.
