onglets bootstrap
Ce chapitre explique les fonctions prises en charge par l'onglet Bootstrap. Paging (Pagination), est une liste non ordonnée, Bootstrap traité comme les autres éléments de l'interface que les poignées pagination.
Paging (Pagination)
Le tableau suivant dresse la liste des Bootstrap fournit la classe de traitement de pagination.
| Class | 描述 | 示例代码 |
|---|---|---|
| .pagination | 添加该 class 来在页面上显示分页。 |
<ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> ....... </ul> |
| .disabled, .active | 您可以自定义链接，通过使用.disabled来定义不可点击的链接，通过使用.active来指示当前的页面。 |
<ul class="pagination"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li> ....... </ul> |
| .pagination-lg, .pagination-sm | 使用这些 class 来获取不同大小的项。 |
<ul class="pagination pagination-lg">...</ul> <ul class="pagination">...</ul> <ul class="pagination pagination-sm">...</ul> |
L'onglet par défaut
L'exemple suivant illustre l'utilisationde .pagination table de classe discuté:
Exemples
Essayez »
Les résultats sont les suivants:
statut de Paging
L'exemple suivant illustre laclasse .disabled discuté tableauci -dessus,l' utilisation.active:
Exemples
Essayez »
Les résultats sont les suivants:
Taille de la page
L'exemple suivant montre la table de classe discuté.pagination- * Utilisation:
Exemples
Essayez »
Les résultats sont les suivants:
Flip (Pager)
Si vous voulez créer un simple liens de page pour fournir aux utilisateurs de naviguer dans la page à atteindre. Et les liens de pagination comme une liste à puces est flip. Par défaut, les liens sont centrés. Le tableau suivant dresse la liste des Bootstrap classe de traitement de flip.
| Class | 描述 | 示例代码 |
|---|---|---|
| .pager | 添加该 class 来获得翻页链接。 |
<ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> |
| .previous, .next | 使用 class.previous把链接向左对齐，使用.next把链接向右对齐。 |
<ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> |
| .disabled | 添加该 class 来获得一个颜色变淡的外观。 |
<ul class="pager"> <li class="previous disabled"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> |
La page par défaut
L'exemple suivant montre la table de classe discuté utilisation.pager:
Exemples
Essayez »
Les résultats sont les suivants:
liens alignés
L'exemple suivant montre .previousde classe discuté tableauci -dessus,l' utilisation.next:
Exemples
Essayez »
Les résultats sont les suivants:
Etat flip
L'exemple suivant montre la table de classe a discuté l' utilisation.disabled:
Exemples
Essayez »
Les résultats sont les suivants:
D'autres exemples de pagination
| catégorie | description | Exemples |
|---|---|---|
| .pager | Un simple liens de pagination, des liens centrés. | essayer |
| .previous | .pager le bouton Style précédent, justifié à gauche | essayer |
| .next | .pager le bouton Style suivant, aligné à droite | essayer |
| .disabled | lien Désactiver | essayer |
| .pagination | liens de radiomessagerie | essayer |
| .pagination-lg | Grandes liens de pagination | essayer |
| .pagination-sm | Diminuer la taille des liens de pagination | essayer |
| .disabled | lien Désactiver | essayer |
| .active | L'accès actuel style de page de liens | essayer |