Twitter Bootstrap 101 la barre de navigation

L'une des principales fonctionnalités de Twitter Bootstrap 2.0 est son excellente barre de navigation réactive. Dans ce bref tutoriel, nous aborderons un certain nombre de choses, notamment la documentation de la barre de navigation, la mise à jour de nos exemples de fichiers et l’examen du code JavaScript nécessaire..

Dans ces screencasts, nous couvrirons les points suivants:

• Nous allons vérifier quelques mises à jour récentes de la documentation en ligne de Twitter Bootstrap - je vous recommande de suivre le Changelog, qui est mis à jour fréquemment.!
• Nous allons décompresser les exemples de fichiers et travailler sur le balisage de la barre de navigation en ajoutant un menu déroulant de navigation et un champ de recherche..
• Nous allons configurer le code JavaScript nécessaire au menu déroulant et à la barre de navigation réactive réductrice.
• Enfin, dans les exemples de fichiers, j'ai inclus quelques notes et exemples que vous pouvez trouver utiles pour personnaliser la barre de navigation afin de l'adapter à d'autres dispositions, notamment une barre de navigation statique pleine largeur (non fixée au sommet) et une barre de navigation contrainte à la largeur. du contenu de votre site.

---

Documentation Navbar

Suivre la documentation s'avère être assez important, car il est mis à jour fréquemment. Dans ce cas, les mises à jour récentes ont eu une incidence sur certains des exemples fournis dans nos exemples de fichiers..

Vous pouvez également télécharger la vidéo ou vous abonner à Webdesigntuts + screencasts via iTunes ou YouTube.!

---

Balisage de la barre de navigation

Décompressons les exemples de fichiers et commençons à travailler sur le balisage de la barre de navigation en ajoutant un menu déroulant, en le faisant flotter à droite et en ajoutant un champ de recherche..

---

Navbar JavaScript

Les menus déroulants et les menus réactifs pliables ne fonctionnent pas sans JavaScript, donc configurons-le.!

Vous pouvez également télécharger la vidéo ou vous abonner à Webdesigntuts + screencasts via iTunes ou YouTube.!

---

Liens et téléchargements

• Page de documentation principale de Twitter Bootstrap
• Téléchargez les exemples de fichiers pour cet exercice

S'amuser!