Twitter Bootstrap 101 Navbar

En av de flotte funksjonene i Twitter Bootstrap 2.0 er den utmerkede, responsive navbaren. I denne korte opplæringen tar vi oss av en rekke ting, inkludert navbiblioteksdokumentasjonen, oppdatering av våre prøvefiler og se på den nødvendige JavaScript.

I disse screencastene vil vi dekke følgende:

Vi sjekker ut noen nyere oppdateringer på Twitter Bootstraps online dokumentasjon - Jeg anbefaler å følge Changelog, som oppdateres ofte!
Vi pakker ut prøvefiler og går på jobb på navbar-markeringen, legger til en dropdown nav og søkefelt.
Vi konfigurerer JavaScript som trengs for rullegardinmenyen og den kollapsende responsive navbaren.
Til slutt, i utvalgsfiler jeg har tatt med noen notater og eksempler, kan det hende du finner hjelp til å tilpasse navbaret til å passe til alternative layouter, inkludert en full bredde statisk navbar (ikke festet til toppen) og en navbar som er begrenset til bredden av innholdet på nettstedet ditt.

Navbar-dokumentasjon

Å følge dokumentasjonen viser seg å være ganske viktig, siden den oppdateres ofte. I dette tilfellet har nyere oppdateringer påvirket noen av eksemplene jeg har gitt i våre prøvefiler.

Alternativt kan du laste ned videoen eller abonnere på Webdesigntuts + screencasts via iTunes eller YouTube!

Navbar Markup

La oss pakke ut prøvefilene og gå på jobb på navbar-markeringen, legge til en dropdown nav, flyte den riktig, og legge til et søkefelt.

Navbar JavaScript

Dropdowns og collapsible responsive menyen fungerer ikke uten JavaScript, så la oss sette opp det!

Alternativt kan du laste ned videoen eller abonnere på Webdesigntuts + screencasts via iTunes eller YouTube!

Lenker og nedlastinger

Twitter Bootstraps hoveddokumentasjonsside
Last ned prøvefilene for denne øvelsen

Ha det gøy!

Webdesign