Derniers tutoriels de développement web
 

Bootstrap Pagination


Basic Pagination

Si vous avez un site web avec beaucoup de pages, vous pouvez ajouter une sorte de pagination à chaque page.

Une pagination de base en Bootstrap ressemble à ceci:

Pour créer une pagination de base, ajoutez la .pagination classe à un <ul> élément:

Exemple

<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>
  <li><a href="#">5</a></li>
</ul>
Essayez - le vous - même »

active State

L'état actif montre quelle est la page en cours:

Ajouter la classe .active de laisser l'utilisateur de savoir quelle page il / elle est sur:

Exemple

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>
Essayez - le vous - même »

Disabled State

Un lien désactivé ne peut pas être cliqué:

Ajouter classe .disabled si un lien pour une raison quelconque est désactivé:

Exemple

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="disabled"><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>
Essayez - le vous - même »

Pagination Sizing

les blocs de pagination peuvent également être dimensionnés pour une plus grande taille ou d'une taille plus petite:

Ajouter classe .pagination-lg pour des blocs plus grands ou .pagination-sm pour les petits blocs:

Exemple

<ul class="pagination pagination-lg">
  <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="#">5</a></li>
</ul>

<ul class="pagination pagination-sm">
  <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="#">5</a></li>
</ul>
Essayez - le vous - même »

Chapelure

Une autre forme pour la pagination, est la chapelure:

La .breadcrumb classe indique l'emplacement de la page courante dans une hiérarchie de navigation:

Exemple

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Private</a></li>
  <li><a href="#">Pictures</a></li>
  <li class="active">Vacation</li>
</ul>
Essayez - le vous - même »

Testez-vous avec des exercices!

Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »


Remplissez Bootstrap Navigation Référence

Pour une référence complète de toutes les classes de navigation, allez à notre entière Bootstrap Navigation Référence .