Share
Idag låt oss titta på nätverket som följer med Twitter Bootstrap, och vi tar en titt på deras mediasnät medan vi gör det. I processen kommer vi att bygga oss en fin liten mockup för en portföljsida.
Notera: Nätet vi arbetar med idag levereras med Bootstrap-utgåvan aktuell vid tidpunkten för publiceringen: 1.4.0.
Låt mig presentera dig för Bootstraps nät, som är baserat på 960-nätet. Jag uppmuntrar dig att lära dig genom att leka med nätet, med hjälten.html-filen.
Alternativt kan du ladda ner videoklippet eller prenumerera på Webdesigntuts + skärmdump via iTunes!
Accentsconagua
.rad, .v: före, och v: efter baseras på Nicolas Gallaghers micro clearfix hack..rad> [class * = "span"] är en CSS 2.1 attributväljare. Här är W3C-specifikationen. Se Chris Coyiers hjälpsamma introduktion.Låt oss nu skapa vår egen anpassade portföljsida. Vi lägger in två YouTube-videor och ordnar dem i ett växlande mönster med hjälp av nätsystemet. Som vi gör så delar jag hur man beräknar lämpliga bredder för montering av media i nätet.
Alternativt kan du ladda ner videoklippet eller prenumerera på Webdesigntuts + skärmdump via iTunes!
Låt oss fortsätta utveckla vår portföljsida. Vi använder klassen media-grid för att ställa in två rader miniatyrbilder. Och jag introducerar dig till den mycket hjälpsamma platsen-bildsiten: Placehold.it.
Alternativt kan du ladda ner videoklippet eller prenumerera på Webdesigntuts + skärmdump via iTunes!
Med vårt innehåll på plats, är vi redo att lägga till några av våra egna anpassade stilar. Låt oss länka upp vårt eget stilark, importera Bootstraps stilar och lägga till våra egna. Det här steget gör att du är redo att vara igång, redo att skapa en egen vackert anpassad Bootstrap-byggd webbplats.
Alternativt kan du ladda ner videoklippet eller prenumerera på Webdesigntuts + skärmdump via iTunes!
Spännande saker händer i utvecklingssamhället som har tagit form runt projektet. Om några veckor (sista rapport) kommer Twitter Bootstrap 2.0 att släppas ut till världen, och det kommer att innehålla några spännande nya detaljer, inklusive ett lyhörda rutnät. Det är verkligen något att se upp för.
Under tiden förbereder vi oss själva genom att bli fullt bekanta med det nuvarande bästa som Bootstrap har att erbjuda.
