Menu navbar Bootstrap - Tutoriel Boostrap

Menus de navigation (Navbar)

Les navbars Bootstrap sont des menus de navigation responsives, ils s'adaptenent aux différents periphériques et prennent des mises en forme différentes en fonction de la taille de votre écran.

Pour que les navbars fonctionnent correctement, il est indispensable d'activer les plugins Javascript et d'ajouter la balise <meta name="viewport" ...

Barre de navigation par défaut .navbar-default

<nav class="navbar navbar-default">

  <div class="container-fluid">

  <!-- Brand, toggle pour l'affichage en version mobile -->

  <div class="navbar-header">

  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

  <span class="sr-only">Toggle navigation</span>

  <span class="icon-bar"></span>

  <span class="icon-bar"></span>

  <span class="icon-bar"></span>

  </button>

  <a class="navbar-brand" href="#">Brand</a>

  </div>

  <!-- Liens de navigation, formulaires et autres -->

  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

  <ul class="nav navbar-nav">

  <li class="active"><a href="#" title="Lien actif">Lien actif <span class="sr-only">(current)</span></a></li>

  <li class="dropdown">

  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Lien 2 <span class="caret"></span></a>

  <ul class="dropdown-menu">

  <li><a href="#" title="Lien 2.1">Lien 2.1</a></li>

  <li><a href="#" title="Lien 2.2">Lien 2.2</a></li>

  <li><a href="#" title="Lien 2.3">Lien 2.3</a></li>

  <li role="separator" class="divider"></li>

  <li><a href="#" title="Lien séparé 1">Lien séparé 1</a></li>

  <li role="separator" class="divider"></li>

  <li><a href="#" title="Lien séparé 2">Lien séparé 2</a></li>

  </ul>

  </li>

  </ul>

  <form class="navbar-form navbar-left">

  <div class="form-group">

  <input type="text" class="form-control" placeholder="Rechercher">

  </div>

  <button type="submit" class="btn btn-sm btn-default">OK</button>

  </form>

  <ul class="nav navbar-nav navbar-right">

  <li><a href="#" title="Lien à droite">Lien à droite</a></li>

  </ul>

  </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->

  </nav>

Tester

Remplacer la marque (Brand) par une image

Vous pouvez remplacer le texte "Brand" par défaut par une image. Dans la feuille de style bootstrap.css, vous trouverez la régle ".navbar-brand > img" qui permettra de caler au mieux votre image.


  <nav class="navbar navbar-default">

  <div class="container-fluid">

    <div class="navbar-header">

        <a class="navbar-brand" href="#">

          <img alt="Marque" src="images/mini-bootstrap.png">

       </a>

    </div>

  </div>

</nav>

Tester

Texte

Pour ajouter un simple texte sans lien, il faut utiliser la balise "p" avec la classe ".navbar-text".

<p class="navbar-text">Bonjour Miguel !, Déconnectez-vous</p>

Un lien ne seravnt pas à la navigation

Pour ajouter un lien hypertexte ne servant pas à la navigation, il faut y ajouter la classe ".navbar-link"

Alignement des éléments de menu

Pour aligner les éléments, nous avons 2 classes : ".navbar-left" et ".navbar-right"

Fixé en haut de page et toujours visible

Pour faire en sorte que votre menu reste calé sur le haut de votre page et reste toujours visible lorsque l'on scrolle, il faudra ajouter la classe ".navbar-fixed-top"


<nav class="navbar navbar-default navbar-fixed-top">    

  <div class="container">      ...    </div>  

</nav>

Si vous utilisez ce menu, il faudra ajouter un padding-top dans le body, sinon ce dernier va recouvrir vos éléments en dessous.

body {padding-top: 70px;}

Tester

Fixé en bas de page et toujours visible

Pour faire en sorte que votre menu reste calé sur le bas de votre page et reste toujours visible lorsque l'on scrolle, il faudra ajouter la classe ".navbar-fixed-bottom"

 <nav class="navbar navbar-default navbar-fixed-bottom"> 

    <div class="container">      ...    </div> 

  </nav>

Si vous utilisez ce menu, il faudra ajouter un padding-bottom dans le body, sinon ce dernier va recouvrir vos éléments.

body {padding-bottom: 70px;}

Tester

Fixé en haut de page

Pour faire en sorte que votre menu soit affiché en haut de page, il faudra ajouter la classe ".navbar-static-top"

 <nav class="navbar navbar-default navbar-static-top"> 

    <div class="container">      ...    </div> 

  </nav>

Tester

Navbar inversée

En ajoutant la classe ".navbar-inverse", votre menu de navigation sera sur fond noir avec les liens hypertextes en blanc.

<nav class="navbar navbar-inverse"> ... </nav>

Tester

Tutoriel Bootstrap

Menus de navigation (Navbar)

Barre de navigation par défaut .navbar-default

Remplacer la marque (Brand) par une image

Texte

Un lien ne seravnt pas à la navigation

Alignement des éléments de menu

Fixé en haut de page et toujours visible

Fixé en bas de page et toujours visible

Fixé en haut de page

Navbar inversée