Twitter Bootstrap 101 Navbar

En av de stora funktionerna i Twitter Bootstrap 2.0 är dess utmärkt responsiva navbar. I den här korta handledningen behandlar vi ett antal saker, inklusive navbar dokumentation, uppdatering av våra provfiler och titta på nödvändiga JavaScript.

I dessa screencasts täcker vi följande:

Vi checkar ut några senaste uppdateringar på Twitter Bootstraps online dokumentation - Jag rekommenderar att du följer Changelog, som uppdateras ofta!
Vi pakar ut provfilerna och går till jobbet på navbar-markupen, lägger till en dropdown nav och sökfält.
Vi installerar JavaScript som behövs för rullgardinsmenyn och den kollapsande svarsfältet.
Slutligen, i de provfiler som jag har tagit med några anteckningar och exempel kan du tycka att det är till hjälp för att anpassa navbaren för att passa alternativa layouter, inklusive en fullbredd statisk navbar (inte fixad till toppen) och en navbar som är begränsad till bredden av webbplatsens innehåll.

Navbar Dokumentation

Följande dokumentation visar sig vara ganska viktigt, eftersom det uppdateras ofta. I det här fallet har senaste uppdateringar påverkat några av de exempel jag har angett i våra provfiler.

Alternativt kan du ladda ner videoklippet eller prenumerera på Webdesigntuts + screencasts via iTunes eller YouTube!

Navbar Markup

Låt oss packa upp provfilerna och gå till jobbet på navbar-markupen, lägga till en dropdown nav, flyta den rätt och lägga till ett sökfält.

Navbar JavaScript

Nedrullningsfälten och den hopfällbara svarsmenyn fungerar inte utan JavaScript, så låt oss ställa in det!

Alternativt kan du ladda ner videoklippet eller prenumerera på Webdesigntuts + screencasts via iTunes eller YouTube!

Länkar och nedladdningar

Twitter Bootstraps huvuddokumentationssida
Hämta provfilerna för den här övningen

Ha så kul!

Webbdesign