Ma reconversion pro

Du bâtiment au développement web

La pagination avec Bootstrap

Salut, La pagination avec Bootstrap

Dernier article de la longue série sur le framework de Twitter. Aujourd’hui on va voir comment mettre en place la pagination avec Bootstrap. Cette fonction va permettre à tes utilisateurs de pouvoir changer de page et de poursuivre leur navigation dans une même thématique. Tu peux retrouver un exemple de pagination dans ce blog dans l’onglet ARTICLE en bas de page. Il faudrait d’ailleurs que je prenne le temps de rechercher dans les fichiers PHP comment remplacer les textes en anglais pour les mettre en français.

Si tu me lis depuis quelques articles, je procèderais de la même façon, tous les exemples de code seront visibles depuis cet article ou depuis un projet Codepen.

Pour mettre ta pagination en place, on va encore et toujours ajouter des classes CSS, et Bootstrap s’occupe du reste!

Mettre en place la pagination

La pagination sera souvent placée en pied de page, c’est en tout cas à cet endroit qu’on la rencontre assez souvent. La plus fréquente que tu vois c’est sur la page des résultats de Google… Pour indiquer d’un point de vu sémantique que la pagination est un élément de navigation à part entière, on placera le code qui la compose dans une balise HTML nav.  Pour finaliser la structure de cela, il faut ensuite créer une liste non ordonnée (ul) dans laquelle les éléments li représenteront le nombre de pages.  Pour indiquer à ton navigateur que l’élément que tu viens de coder est une pagination Bootstrap, il faut donner la classe CSS pagination à la liste ul.

	<nav>
		<ul class="pagination">
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
		</ul>
	</nav>

Tu remarqueras notamment dans Codepen, que Bootstrap gère seul l’animation des boutons au survol. A noter également, que les numéros de page « li » sont des liens permettant d’accéder à la page en question. Penses bien à mettre les balises HTML « a » pour réaliser ces liens. Bootstrap ne fait pas ça tout seul…

Pour terminer cette pagination, il est bien d’ajouter des flèches permettant de passer d’une page à l’autre. Pour cela, on va ajouter 2 éléments li, un en première position, l’autre en dernier avec un code un peu particulier permettant de coder les flèches:

		<nav>
		<ul class="pagination">
			<li class="disabled"><a href="#" aria-label="Précédent"><span aria-hidden="true">&laquo</span></a></li>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#" aria-label="Suivant"><span aria-hidden="true">&raquo</span></a></li>
		</ul>
	</nav>

« C’est quoi encore ce truc aria-hidden et aria-label? »

Bien vu, la spécification ARIA fournit « des moyens de rendre plus accessible les applications Web[…] à une plus grande part des utilisateurs, y compris ceux utilisant des technologies d’assistances telles que les lecteurs d’écrans ou les agrandisseurs. » Cet extrait vient d’un article du MDN que je te recommande de lire puisqu’il permet de comprendre l’importance de ces spécifications.

FAQ Applications Web et ARIA

Je me demandais lors d’un précédent article, ce qu’était un lecteur d’écran? Il s’agit d’un logiciel d’assistance qui retranscrit par audio le contenu de ta page. Cela permet aux personnes qui ne peuvent pas lire (non-voyant, mal-voyant), d’avoir tout de même accès à ton site web et de profiter des services qu’il propose.  Pour en savoir un peu plus, je te conseille la lecture de la page Wikipédia qui parle de ce sujet.

Cette précision étant faite, passons aux points suivant.

Les états de paginations

Comme dans la pagination de Google, on peut définir différents états. Par exemple, lorsque tu es sur la première page, la flèche permettant de revenir sur la page précédente n’apparaît pas. De plus,  la page 1 étant active, celle sur laquelle tu es, ne peut pas être recliquée et apparaît en noir, alors que les autres numéros de pages eux figurent en bleu et sont donc cliquables.

Il est possible d’obtenir les mêmes fonctionnalités avec Bootstrap. En ajoutant la classe CSS active à un élément li, celui-ci apparaîtra en bleu et la police en blanc. Au survol, ce bouton ne pourra pas être cliqué une nouvelle fois tant qu’il sera actif. Cela signifie que cette fonction supprime temporairement le lien.

Lorsque l’on est sur la page 1, on peut supprimer l’action sur le bouton de gauche menant vers la page précédente à l’aide de la classe CSS disabled.

Ces informations permettent de faciliter la lecture, la navigation sur notre site et à l’utilisateur de savoir où il se trouve. Pour voir à quoi cela ressemble, direction Codepen.

Modifier la taille

Dernier point concernant une option que nous offre Bootstrap, modifier la taille de la pagination. Nous pouvons ajouter 2 classes CSS mais il y a en réalité 3 tailles différentes, tu la sens arriver la propriété par défaut:

  • pagination-sm: la taille la plus petite par Bootstrap,
  • _________________: la taille par défaut ne porte pas de nom, il suffit de ne rien écrire pour l’appliquer, ça c’est plutôt sympa, moins il y a de code, plus il y a de chance de ne pas se tromper,
  • pagination-lg: cette fois les numéros de page et les flèches apparaissent vraiment plus grande.  On parlait tout à l’heure d’accessibilité, le fait de pouvoir proposer ce type d’affichage, entre selon moi tout à fait dans cet optique…

Je te propose de voir la différence entre les 3 tailles dans Codepen.

Le pager

Autre possibilité pour créer une pagination, faire un pager. Cette technique demande d’intégrer seulement 2 boutons permettant la navigation, Précédent et Suivant.

Comme pour la pagination, le pager va avoir besoin d’une structure qui réponde à une certaine façon de faire sémantique. Commençons donc par créer une balise HTML nav  puis une liste non ordonnée ul à laquelle nous allons appliquer la classe CSS pager.

Pour pagination la classe CSS de la balise ul c’est pagination et pour le pager c’est pager. On devrait donc arriver à ne pas se perdre.

Une fois la structure posée, on peut passer à l’intégration des boutons. On a donc créé 2 éléments de listes li, qui comprendront un lien (balise a) et le nom de notre bouton (Précédent ou Suivant).

A ce stade, on peut noter que notre pager est en place et qu’encore une fois Bootstrap gère les effets d’animations, la forme du bouton, la couleur, etc. Tu peux aller jeter un oeil sur Codepen pour voir tout ça…

	<nav>
		<ul class="pager">
			<li><a href="#">Précédent</a></li>
			<li><a href="#">Suivant</a></li>
		</ul>
	</nav>

Bootstrap, te permet de modifier la position des boutons en les envoyant au bord de la page. Pour cela il faut ajouter des classes CSS:

  • previous: pour le bouton Précédent.
  • next: pour le bouton Suivant.

Compléter l’information

On peut ajouter davantage de précisions en ajoutant une flèche indiquant le sens de navigation. Pour cela on va utiliser de nouveau les balises HTML span et des caractères spéciaux pour définir les flèches. Les flèches sont également là dans un soucis de compréhension. Une personne qui perçoit ou qui interprète mal le texte pourra alors comprendre ce que signifient les flèches. Dans le même esprit d’accessibilité, on va de nouveau ajouter les propriétés aria au pager.

Dans la documentation de Bootstrap, il est proposé d’utiliser d’autre type de flèche que celles vues pour la pagination:

  • &larr; :  pour la flèche allant vers la gauche,
  • &rarr; :  pour la flèche allant vers la droite.

Sache que les autres caractères spéciaux appliqué dans l’exemple de la pagination, fonctionne aussi pour le pager.

Attention: Il faut que tu aies bien conscience que les caractères spéciaux que l’on ajoute sont du texte. Il faut donc faire attention dans quel ordre tu veux les choses. Il faut noter le caractère spécial avant le mot précédent pour avoir la flèche avent le mot. En revanche pour le bouton « Suivant », il faut que tu écrives la balise span et le caractère spécial après le mot suivant, pour avoir la flèche après le mot. Oui, là aussi je me suis fait avoir… à aller trop vite aussi… -_-‘

	<nav>
		<ul class="pager">
			<li class="previous"><a href="#"><span aria-hidden="true">←</span>Précédent</a></li>
			<li class="next"><a href="#">Suivant<span aria-hidden="true">→</span></a></li>
		</ul>
	</nav>

De la même manière que pour la pagination, il est possible de rendre inactif un bouton. Par exemple le bouton précédent lorsque tu es sur la première page. Pour cela il faut simplement ajouter la classe CSS disabled à la balise li du bouton concerné.

Fin de la section sur Bootstrap

Voilà, la section Bootstrap est terminée, avec cet article. J’espère que comme moi tu auras appris plein de choses. Pour aller encore plus loin, je te recommande vivement la lecture du livre de Benoît Philibert, Bootstrap 3, le Framewok 100% Webdesign, ou la lecture en anglais de la documentation.

A travers ces articles je n’ai parlé que des fonctions implémentées dans Bootstrap, mais il me reste plein de choses à explorer comme l’ajout de Jquery et la maîtrise de SASS et de LESS qui sont des préprocesseurs CSS. Je ne connais pas encore cela, donc je ne vais pas m’aventurer dans une description hasardeuse, fausse et incomplète de ces outils. J’y reviendrais plus tard!

Les prochains articles seront consacrés à des propriétés CSS avancés, et dès la semaine prochaine, je me lance dans jQuery et Javascript. Comme l’a dit le poète, l’été sera chaud!

OK j’arrête, bonne soirée, à bientôt,

Guillaume

 

 

2 Comments

  1. Je suis moi aussi un débutant en reconversion dans le développement web. C’est un plaisir de te suivre !

    Bonne route Guillaume!

     
    • guillaume

      26 juin 2017 at 20 h 07 min

      Salut Florian, merci beaucoup. Ça me fait super plaisir! 😊 On est au moins deux à débuter alors! 😄Le top c’est si on arrive à s’entre aider, donc si je peux te renseigner sur 2-3 trucs ou si tu as des questions auxquelles je suis capable de répondre… ça sera avec plaisir! Tu étais dans quelle domaine avant? A bientôt!
      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 :