Création de la navigation réactive Menus - Bootstrap Navbars, Cage de codage
Aujourd'hui, dans ce tutoriel, je vais vous montrer comment créer navigation statiques et fixes Responsive barres de menus. les en-têtes en utilisant Bootstrap. Barre de navigation est un en-tête de navigation qui est placé en haut de la page et peut être prolonger ou réduire en fonction de la taille de l'écran, Bootstrap a rendu facile. Maintenant, nous allons créer ici une couverture barres de navigation en haut statiques et fixes avec menu déroulant et avec la boîte de recherche. Il peut être fait en utilisant le composant Navbar de Bootstrap. Ces navbar sensibles effondré initialement sur les appareils. J'ai utilisé ici dernière version bootstrap 3.3.7, donc un coup d'oeil à ce simple tutoriel mais utile.
Bootstrap Paramètres du fichier
Bien sûr, vous aurez besoin bootstrap fichiers CSS / JS et un fichier de bibliothèque jQuery qui va rendre les choses plus faciles. vérifier la structure de fichier ci-dessous.
Maintenant, nous allons jeter un oeil à la création de barres de navigation.
Statique Haut Navnar
L'exemple suivant va vous montrer comment créer un simple barre de navigation statique avec des liens de navigation.
Voici comment vous pouvez créer une simple barre de menu de navigation statique. il suffit d'ajouter ce code après le démarrage
Top fixe Navbar
D'accord, nous avons fait avec barre de navigation statique, maintenant je vais vous montrer comment créer le menu fixe de barre de navigation, qui collera au sommet, même après la page vers le bas / vers le haut.
On dirait menu à droite statique. oui c'est le même code que nous avons vu dans le menu statique, mais il y a un peu de changement là-bas à la première ligne, celui-ci navbar-top-fixe.
Navigation avec Menu déroulant
Voici l'exemple de code qui vous montrera comment ajouter un autre menu comme menu déroulant, nous allons jeter un coup d'oeil.
Ici, vous ne avez pas besoin de faire quelque chose de plus ici juste annonce un nouveau ensemble
Navbar avec Boîte de recherche
Dans cet exemple, j'ai pris navbar fixe, de sorte qu'il devient fixe avec barre de navigation boîte de recherche, il suffit d'ajouter