Tutoriel Bootstrap

Bootstrap

Découvez les bases du plus célébre des frameworks CSS.

HTML HTML5 CSS Dreamweaver PHP

Pagination Bootsrap

Le composant pagination fournit comme son nom l'indique un système de pagination. Très utile lorsque vous voulez afficher un nombre d'enregistrement limité.

La classe ".active" permet de sélectionner un des éléments.

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

Exemple

Désactivé un élément

Il suffit d'utiliser la classe .disabled sur la balise li pour désactiver un élément
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li><a href="#" aria-label="Précédent"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#" title="1">1</a></li>
    <li><a href="#" title="2">2</a></li>
    <li><a href="#" title="3">3</a></li>
    <li class="disabled"><a href="#" title="4">4</a></li>
    <li><a href="#" title="5">5</a></li>
    <li><a href="#" aria-label="Suivant"><span aria-hidden="true">&raquo;</span></a></li>
  </ul>
</nav>

Exemple avec le lien 4 désactivé

La taille des éléments

On pourra modifier la taille avec 2 classes : ".pagination-lg" et ".pagination-sm" que nous appliquons sur la balise ul.
<ul class="pagination pagination-lg">
ou
<ul class="pagination pagination-sm">

Exemple avec pagination-lg

Exemple avec pagination-sm

Ce site est liste dans la categorie Enseignement et formation : Formations professionnelles de l'annuaire Référencement et Dictionnaire

Frédéric création Jardin | Concinnatis | Au petit grandeur | Lestrem TP | Jerico | Solumetal | Comonmarket | Chez Beau J'ai | Beukenne Traiteur | PDP Recouvrement | Agroé - Achat groupé d'énérgie | Achat goupé Sorea | CE LM énergie | placedesenergies.com | Gazon de la Folie | Dépannage pôele à  pellet | Création site web Nord | Rénovation habitat Pas de calais | Cuisine Bois | Créperie à  Valenciennes | Repar Coudre | DNS service | Archis 2 | 3MI | Tests d'orientation professionnels - Solutests | Ircl | Leblan promotion | Formation webmaster, PAO, CAO / DAO | Formateur Web, référencement et PAO | Formateur bureautique |