Sommaire

La barre de navigation simple COMPOSANTS DE NAVIGATION ET DE PAGINATION:Barre de navigation simple

Bootstrap nous propose d’utiliser des barres de navigation simples et sophistiquées. Nous verrons dans un premier temps une barre de navigation très simple avec quatre liens.

La barre de navigation est une boîte <div> avec la classe dédiée de base .navbar. La mise en forme par défaut de cette barre de navigation est appliquée avec la classe .navbar-default.

Ensuite nous trouvons une autre boîte <div> qui utilise les classes .collapse et .navbar-collapse. Ces deux classes permettent la mise en forme du contenu de la barre de navigation.

Les liens <a> sont placés dans les éléments <li> d’une liste <ul>. L’élément <ul> utilise les deux classes de mise en forme .nav et .navbar-nav.

Voilà le code pour une barre de navigation très simple :

<div class="navbar navbar-default"> 
   <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
         <li><a href="#">Accueil</a></li> 
         <li><a href="#">Projets</a></li> 
         <li><a href="#">Réalisations</a></li> 
         <li><a href="#">Equipe</a></li>  ...