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 marque. vous obtiendrez la barre de menu statique. Laisse aller de l'avant.

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

élément où vous voulez et menu déroulant de donner class = « menu déroulant » il vous faudra donner un morceau supplémentaire de balises dans Elément tel que représenté ci-dessus.

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

élément ici avec la boîte d'entrée. voir l'exemple.
tous les liens du menu sont sur le côté gauche et le formulaire de recherche est à droite de sorte qu'il semble bien. en utilisant cette classe class = « navbar-forme navbar-droite », vous pouvez mettre un lien sur le côté droit.

Qu'il est pour la journée, la prochaine fois que je viendrai avec plus bootstrap et d'autres tutoriels, vous obtiendrez également des tutoriels AngularJS très bientôt sur ce blog. Je prévois de couvrir autant que des tutoriels je peux.

BTW Merci pour les gars de soutien, espérons qu'il vous plaira.