Share
Laten we vandaag kijken naar het rastersysteem dat wordt geleverd bij Twitter Bootstrap en we zullen een kijkje nemen naar hun mediaraster terwijl we dit doen. In het proces bouwen we een leuke kleine mockup voor een portfolio-pagina.
Notitie: Het raster waarmee we vandaag werken, komt met de Bootstrap-release-stroom op het moment van publicatie: 1.4.0.
Laat me je voorstellen aan Bootstrap's grid, dat gebaseerd is op het 960-rastersysteem. Ik zal je aanmoedigen om te leren door met het grid te spelen en het hero.html-bestand te gebruiken.
Of download de video of abonneer je op Webdesigntuts + screencasts via iTunes!
Accentsconagua
.rij, .rij: vóór, en tr: na is gebaseerd op de micro clearfix-hack van Nicolas Gallagher..rij> [class * = "span"] is een CSS 2.1 attribuut selector. Hier is de W3C-specificatie. Zie Chris Coyier's nuttige introductie.Laten we nu onze eigen aangepaste portfolio-pagina maken. We zullen twee YouTube-video's insluiten en deze in een wisselend patroon rangschikken met behulp van het rastersysteem. Terwijl we dit doen, zal ik vertellen hoe de juiste breedten kunnen worden berekend voor het plaatsen van media binnen het raster.
Of download de video of abonneer je op Webdesigntuts + screencasts via iTunes!
Laten we doorgaan met het ontwikkelen van onze portfolio-pagina. We zullen de klas gebruiken media-raster om twee rijen miniatuurafbeeldingen in te stellen. En ik zal je voorstellen aan de zeer behulpzame placehold-image site: Placehold.it.
Of download de video of abonneer je op Webdesigntuts + screencasts via iTunes!
Met onze inhoud op zijn plaats, zijn we klaar om enkele van onze eigen aangepaste stijlen toe te voegen. Laten we onze eigen stylesheet koppelen, de stijlen van Bootstrap importeren en onze stijlen toevoegen. Deze stap zorgt ervoor dat je klaar bent om te starten en klaar bent om je eigen prachtig op maat gemaakte Bootstrap-gebouwde site te maken.
Of download de video of abonneer je op Webdesigntuts + screencasts via iTunes!
Er gebeuren opwindende dingen in de ontwikkelingsgemeenschap die vorm heeft gekregen rond het project. Over een paar weken (bij het laatste rapport) zal Twitter Bootstrap 2.0 worden vrijgegeven aan de wereld, en het zal een aantal opwindende nieuwe details bevatten, waaronder een responsief raster. Dat is zeker iets om op te letten.
Ondertussen bereiden we ons voor door volledig bekend te raken met het huidige beste dat Bootstrap te bieden heeft.
