Comment créer des pages numérotées avec le Framework BootStrap 3 et le fil d ariane

Apprenez à organiser votre site Web en y intégrant une numérotation des pages mais aussi un fil d’Ariane.

C’est très pratique pour la lisibilité de votre site, et vos internautes vous remercieront de ces fonctionnalités.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment créer des pages numérotées avec le Framework BootStrap 3 et le fil d’Ariane

Bonjour à tous et bienvenu sur Développement Facile.

Dans ce nouveau tutoriel toujours consacré au framework CSS BootStrap3, vous allez découvrir comment créer des pages numérotées. Par exemple dans un bloc quand il y a beaucoup d’articles, en dessous il y a suivant, le signe précédent, le signe suivant, et en dessous il y a des pages 1, 2, 3, espace, 5, 6, 7, etc. Ça permet de naviguer entre les différents articles.

Les pages numérotées

Là, c’est que vous allez apprendre à créer, c’est-à-dire, des pages numérotées, il y a deux solutions, soit vous utilisez la numérotation des pages avec BootStrap, ça va vous faire un truc très ergonomique, très sympa avec tous les chiffres 1, 2, 3, le nombre de pages que vous avez . Ou alors vous pouvez utiliser les boutons suivants et précédents de BootStrap, qui seront également très sympas. Vous avez des options, la classe active que vous connaissez, par exemple pour activer un onglet, pour activer un bouton, là, vous allez vous en servir pour activer une page, la page en cours sera en cours de lecture avec la classe active, et le lien sera désactivé bien évidemment, sur cette page. C’est très pratique, c’est gérer automatiquement par BootStrap quand ça va cliquer sur cette page, dans la page de destination vous mettrez la classe CSS active sur ce numéro de page-là. Ça va mieux vous parler visuellement.

Et au contraire la classe .disabled ça permet de désactiver un lien ou un bouton, vous arrivez au premier article, il y n’y a plus d’articles suivants, vous mettez la classe disabled sur le bouton, suivant, comme ça il ne sera pas cliquable. Pareil pour une page si vous savez qu’il y a une erreur ou je ne sais pas, pour X ou Y raison, vous pouvez mettre sur un numéro de page, la classe CSS disabled et elle ne sera pas accessible.

Vous pouvez également modifier la taille des pages numérotées avec les fameuses classes -lg, -sm, sauf que là vous utilisez la classe pagination-lg pour agrandir la classe, pagination-sm pour la réduire, et pagination la taille standard.

Les boutons suivant/précédent

Et donc la classe .pager ça permet de mettre ce type de navigation en place, c’est la classe CSS que vous avez utilisé. Comme vous l’avez remarqué avec les différents tutoriels en vidéo, vous avez eu sur Développement Facile, le framework BootStrap fonctionne énormément avec beaucoup de classes CSS que vous rajoutez sur vos éléments html. Il y a également l’API javascript à partir de jQuery, vous pouvez interagir avec les différents éléments.

Pour rendre un bouton de navigation inactif, comme je vous l’ai dit c’est la classe disabled, et vous pouvez aligner sur toute la largeur de la page, les boutons, vous avez votre contenu, les boutons sont soit alignés avec votre contenu, soit ils sont rapprochés.

Le fil d’Ariane

Il y a également une option très pratique avec BootStrap, c’est le fameux fil d’Ariane ou navigation dans le site, notamment sur les blogs, même sur les sites un peu plus institutionnels, on retrouve ce système de fil d’Ariane, vous avez accueil, la catégorie où vous êtes, php, le type d’article où vous êtes, et ça permet à l’internaute de remonter rapidement, de revenir soit à l’accueil, sois à la catégorie, soit à php de voir la liste des articles etc.

Pour cela il suffit d’utiliser une liste numérotée avec une balise ol et li et d’utiliser la classe css.breadcrumb.

Exemple d’application

On va passer ensemble … on va regarder un exemple de code source, un exemple visuel, ça va vous aider.

Je vous montre visuellement, là c’est la page active, le lien est désactivé sinon il y a toutes les pages, bouton suivant, précédent, là il y a une page qui est non accessible. Les différentes tailles, normale, taille petite, taille grande, du texte, les boutons suivant précédent les uns à côté des autres, ou alors sur la largeur du paragraphe avec le bouton, là on est sur le premier article, on désactive le bouton suivant parce qu’il n’y a pas d’autre cours.

Et là le fameux fil d’Ariane, accueil, tutoriel, php, vu qu’on est sur PHP ce n’est pas cliquable, on peut revenir à tutoriel et on peut revenir à la page d’accueil. Comment on fait ça ?

Déjà le fil d’Ariane. Il est où ? Il est ici, readcrum c’est tout simple, une liste numérotée ol avec li et readcrumb et la classe active pour dire que l’on est sur PHP, le reste est désactivé. Et là il y a le lien.

Vous avez la pagination avec des liens partout, sauf ici, classe active sur le 3, à chaque fois c’est un copier-coller, que j’ai fait forcément, par contre, qu’est-ce que j’ai fait ?

J’ai changé la taille avec -lg, -sm petite taille et -lg large, grande taille, et toujours par exemple je peux changer le bouton active, je vous montre ça en direct, sur le 10, ça fait que l’utilisateur est sur le 10, donc le 10 n’est pas activé. Là le 13 il est disabled celui-là, disabled le 13, ici, ensuite vous avez les boutons c’est la classe pager, cours suivant, cours précédent et pour aligner les boutons suivant et précédent avec le paragraphe, pardon, il suffit de le préciser dans l’alignement, vous avez la désactivation disabled, pour désactiver un bouton, voilà sur le 13, on peut très bien désactiver, je vais vous montrer en direct, désactiver le 11 sur du sm, je recharge ici, voilà, le 11 est désactivé.

Vous avez vu que c’est très simple d’intégrer une pagination, les boutons suivant précédent, il n’y a rien de bien compliqué. Qu’est-ce que je peux vous montrer d’autre comme code source ?

Avec les classes preview c’est next ce qui permet d’aligner par rapport au paragraphe, là on ne l’a pas précisé donc ça crée des boutons grâce au pager mais ça les mets l’un à côté de l’autre par contre si on précise les classes ça va les aligner avec le paragraphe, tout simplement.

Votre plan d’actions !

Maintenant c’est à vous de jouer, à vous de réutiliser ce concept de pages numérotées, vous trouverez le code source sous cette vidéo, vous pouvez également me poser les questions que vous avez sur ce cours, et maintenant je vous invite à regarder la deuxième vidéo, à la fin de cette vidéo, il y a un lien qui va apparaître et vous n’avez plus qu’à cliquer sur ce lien pour être redirigé vers la deuxième vidéo. Dans la deuxième vidéo, vous allez apprendre de long en large en travers HTML 5, CSS 3, le framework BootStrap 3 à travers une multitude d’exemples, je vous invite dès maintenant à cliquer sur la deuxième vidéo, et justement on se rejoint dans la deuxième vidéo. A tout de suite.

[/ppmtoggle] [/ppmaccordion]

Télécharger les exemples de numérotation et de fil d’Ariane

Retrouvez le code source commenté sur les numérotation et le fil d’Ariane réalisé avec BootStrap 3

Utilisez vous le fil d’Ariane ?

Partager vos expériences dans la zone commentaire