Sommaire

La barre de navigation pour smartphone COMPOSANTS DE NAVIGATION ET DE PAGINATION:Barre de navigation pour smartphone

1. L’objectif

Dans un projet de site Web en design adaptatif, il convient de prendre en compte l’interface réduite des smartphones. Nous ne pouvons pas afficher une barre de navigation comportant de nombreux liens dans la largeur de la fenêtre du navigateur des smartphones.

Bootstrap permet de basculer automatiquement d’une barre de navigation « classique » avec tous ses items visibles à une barre de navigation sous la forme d’un bouton déroulant.

Vous retrouverez cet exemple dans le fichier Bootstrap-06-COMP-Nav-Pag/04-Navbar-RWD.html.

2. La structure

Pour mettre en place cette barre de navigation pour smartphone, nous créerons une « double » barre de navigation : la barre de navigation pour smartphone et la barre de navigation « classique ».

Voici la structure :

images/C12-028.png

L’élément <nav class="navbar navbar-default" role="navigation"> englobe toute la barre de navigation. La première boîte <div> incluse est celle pour les smartphones, la deuxième est la barre de navigation pour les écrans des tablettes et des ordinateurs.

3. La barre de navigation classique

La deuxième boîte <div class="collapse navbar-collapse" id="navbarmobile"> contient tous les éléments d’affichage de la barre de navigation « classique », ...