Twitter Bootstrap 101 de navigatiebalk

Een van de geweldige functies van Twitter Bootstrap 2.0 is de uitstekende responsieve navigatiebalk. In deze korte tutorial zullen we een aantal dingen aanpakken, waaronder de navbar-documentatie, het bijwerken van onze voorbeeldbestanden en het bekijken van de benodigde JavaScript.

In deze screencasts behandelen we het volgende:

• We zullen enkele recente updates van de online documentatie van Twitter Bootstrap bekijken - ik raad aan de Changelog te volgen, die regelmatig wordt bijgewerkt!
• We pakken de voorbeeldbestanden uit en gaan aan de slag met de navbar-markup, een vervolgkeuzelijst en een zoekveld toevoegen.
• We stellen het JavaScript in dat nodig is voor de vervolgkeuzelijst en de samenvallende responsieve navigatiebalk.
• Ten slotte heb ik in de voorbeeldbestanden enkele opmerkingen en voorbeelden opgenomen die nuttig kunnen zijn voor het aanpassen van de navigatiebalk aan alternatieve lay-outs, waaronder een statische navigatiebalk met volledige breedte (niet aan de bovenkant bevestigd) en een navigatiebalk die is beperkt tot de breedte van de inhoud van uw site.

---

Navbar-documentatie

Het volgen van de documentatie blijkt nogal belangrijk te zijn, omdat deze regelmatig wordt bijgewerkt. In dit geval hebben recente updates invloed gehad op enkele van de voorbeelden die ik in onze voorbeeldbestanden heb verstrekt.

Of download de video of abonneer je op Webdesigntuts + screencasts via iTunes of YouTube!

---

Navbar Markup

Laten we de voorbeeldbestanden uitpakken en aan het werk gaan op de markering op de navbar, een vervolgkeuzelink toevoegen, het goed laten zweven en een zoekveld toevoegen.

---

Navbar JavaScript

De vervolgkeuzelijsten en het samenvouwbare responsieve menu werken niet zonder JavaScript, dus laten we dat instellen!

Of download de video of abonneer je op Webdesigntuts + screencasts via iTunes of YouTube!

---

Links en downloads

• De belangrijkste documentatiepagina van Twitter Bootstrap
• Download de voorbeeldbestanden voor deze oefening

Veel plezier!