Ma reconversion pro

Du bâtiment au développement web

La navigation avec Bootstrap

La navigation avec Bootstrap – Partie 1

Salut, la navigation avec bootstrap

Dernier sujet sur Bootstrap, à propos de la façon de construire la navigation de ton site. Comme d’habitude, il faudra ajouter des classes particulières, et pour que certaines techniques fonctionnent il faudra ajouter du code jQrery et/ou JavaScript, choses que je ne connais pas encore. Je reviendrai donc sur l’animation de ces navigations plus tard lorsque j’aurai maîtrisé ces deux choses là.

Bootstrap propose donc plusieurs façons d’organiser et de réaliser la navigation de ta page. Chacune de ces solutions est différentes visuellement, donc à toi de savoir laquelle utiliser.

Au risque de faire un article très long, je le découpe en au moins 3 parties, peut-être même 4…

Les différents types de navigation

Bootstrap permet assez facilement de créer plusieurs types de navigation:

  • les tabs: ce sont des onglets, qui ressemblent aux onglets des intercalaires d’un classeur, mais à l’horizontal. Quand on sélectionne un onglet, on voit directement le contenu en dessous, par exemple lorsque l’intitulé de l’onglet se divise en plusieurs sous catégories. Cette fonction a besoin de JS et jQuery pour fonctionner.
  • les pills: il s’agit de pastilles ressemblant fortement aux boutons de Bootstrap. Cette technique peut être utilisée quand on a un design One-Page et que l’on a une navigation permettant de cibler des ancres dans la page par exemple.
  • la navbar: plus souvent appelée la barre de navigation. C’est un des éléments les plus importants d’un site web. Une navbar peut avoir plusieurs formes, comporter des boutons, des liens, un logo, etc…
  • les breadcrumbs: c’est un peu un fil d’ariane. C’est une fonction qui te permet de voir le chemin des liens que tu as suivi pour arriver sur la page où tu es. Les pages précédentes sont cliquables puisque ce sont des liens, afin que tu puisses y revenir si besoin.
  • la pagination: permets de passer d’une page à l’autre dans une même rubrique, par exemple pour visiter la rubrique article d’un blog. J’avoue que je ne sais même pas comment ça se passe sur ce blog, il faudra que j’y jette un oeil… Cela te donne le nombre de page que contient la rubrique en question. C’est un peu comme le nombre de page qui figure en bas lorsque tu fais une recherche Google.
  • le pager: C’est un peu similaire à la pagination, sauf qu’au lieu d’avoir des numéros de pages, il y a 2 boutons, « Page Précédente » et « Page Suivante ».

 

Les Tabs

Pour intégrer une navigation par TABS sur ta page, il te faudra tout d’abord créer une liste non-ordonnée (ul) et lui donner la classe CSS nav. Ensuite il faut ajouter une deuxième classe à cette liste: nav-tabs. Les éléments <li> qui composeront cette liste non-ordonnée comprendront les noms de tes onglets.  Tu peux voir à quoi ressembles les Tabs dans Codepen.

    <ul class="nav nav-tabs">
        <li role="presentation" class="active"><a href="#">Onglet 1</a></li>
        <li role="presentation"><a href="#">Onglet 2</a>
			</li>
        <li role="presentation"><a href="#">Onglet 3</a></li>
        <li role="presentation"><a href="#">Onglet 4</a></li>
    </ul>

Il est bien de préciser l’onglet à afficher par défaut lors du chargement de la page en lui appliquant la classe CSS active.

Tu remarqueras sans doute le role= »presentation » qui est présent dans tous les éléments <li>. Cette déclaration annonces aux lecteurs d’écran utilisés par les personnes non-voyantes ou malvoyantes que la balise HTML ne porte aucune valeur sémantique. J’ai eu de mal à trouver à quoi servait cette déclaration et ce que voulait dire la phrase que j’ai recopié au dessus et quand je suis tombé  la-dessus je me suis dis, ok, on avance…   -_-‘

En gros, je crois que ça veut dire que la balise <li> telle qu’elle est utilisée n’apporte rien de plus qu’un élément de liste en tant que tel (pour les fans de Kamelott…). Ce que je me demande alors c’est pourquoi on ne met pas cette déclaration tout le temps pour des éléments qui n’apporte rien de plus que leur fonction. Un titre par exemple annonce sémantiquement un début de section, de paragraphe, comprends un mot important et mets en valeur le sens d’un contenu et en plus ajoute du gras au texte dans la mise en forme.

Je ne sais pas si c’est très clair, je te laisse le lien où j’ai trouvé une explication…c’est par ici. Bon courage… SI tu as une explication claire, ça m’intéresse vraiment!

Les pills

Comme pour les tabs, il faut ajouter les classes CSS suivantes à une liste non-ordonnée (ul): nav et nav-pills. Par défaut, les pills s’alignent horizontalement. Si tu veux pour des raisons qui t’appartiennent avoir ce type de navigation à la verticale, il faut ajouter une troisième classe CSS: nav-stacked. A voir sur Codepen.

  	<!-- Pills disposées horizontalement par defaut-->	 
		<ul class="nav nav-pills">
     		 <li role="presentation" class="active"><a href="#">Bouton 1</a></li>
      		 <li role="presentation"><a href="#">Bouton 2</a></li>
       		 <li role="presentation"><a href="#">Bouton 3</a></li>		
       		 <li role="presentation"><a href="#">Boutont 4</a></li>
   		</ul>

  	<!-- Pills disposées verticalement avec la classe CSS nav-stacked-->	 

  		 <ul class="nav nav-pills nav-stacked">
     		 <li role="presentation" class="active"><a href="#">Bouton 1</a></li>
      		 <li role="presentation"><a href="#">Bouton 2</a></li>
       		 <li role="presentation"><a href="#">Bouton 3</a></li>		
       		 <li role="presentation"><a href="#">Boutont 4</a></li>
   		</ul>

Par défaut, les boutons prennent la largeur de la page, ce qui n’est pas franchement l’idéal sur un écran PC. C’est pour ça que j’ai mis ces « Pills-Stacked » dans une grille Bootstrap pour que ça soit un peu moins large. Si tu réduis ta fenêtre, tu verras le résultat…

Les breadcrumbs

Dans cette partie, je vais juste te montrer à quoi cela ressemble. Le code va être assez simpliste, puisque j’imagine que c’est une fonction (Javascript ou PHP) qui fabrique les breadcrumbs en fonction de ton parcours sur le site. La liste qu’on va construire ici serais en réalité construite pas un programme, enfin ça, c’est ce que je crois. Mais je n’en suis pas encore là.

Donc un breadcrumb est une liste ordonnée cette fois et c’est assez logique puisque cette liste va répertorier l’ordre des pages que tu as regardées. Cette liste devra porter la classe CSS breadcrumb.

<ol class="breadcrumb">
   	<li><a href="#">Accueil</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Les derniers articles</a></li>		       	
	<li><a href="#">Les dégradés en CSS</a></li>	
</ol>

 

!! Attention !!

Si comme moi tu as le livre Bootstrap 3, Le framework 100% Web Design de Benoît Philibert, il y a une petite erreur. En effet la propriété breadcrumb est indiquée au pluriel (breadcrumbs) mais ça ne marche pas!

La propriété doit IMPERATIVEMENT être écrite au SINGULIER:  breadcrumb! Tu peux vérifier sur Codepen en modifiant mon code ou vérifier dans la doc de Bootstrap.

 

 

 

 

C’est la fin de la première partie sur la navigation avec Bootstrap . La prochaine sera consacrée à la Navbar, vaste sujet…

Donc je te dis à très vite pour le prochain article!

 

Guillaume

 

2 Comments

  1. Superbe article bonne continuation.

     
    • guillaume

      20 juin 2017 at 23 h 36 min

      Bonsoir,
      Merci pour ton commentaire, je suis très heureux qu’il t’ait plu! Je vais continuer, j’ai tellement de choses à apprendre et à partager!
      Bonne soirée,
      Guillaume

       

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

© 2019 Ma reconversion pro

Theme by Anders NorenUp ↑

%d blogueurs aiment cette page :