Il miglior tutorial schede bootstrap Nel 2024, in questo tutorial puoi imparare Paging (impaginazione),Esempi,Esempi,Esempi,Flip (Pager),Esempi,Esempi,Esempi,Ulteriori esempi di impaginazione,
Questo capitolo spiegherà le funzioni supportate dalla scheda Bootstrap. Paging (impaginazione), è una lista non ordinata, Bootstrap trattato come gli altri elementi dell'interfaccia come maniglie di paging.
Nella tabella seguente sono elencati i Bootstrap fornire classe di elaborazione di paging.
Class | 描述 | 示例代码 |
---|---|---|
.pagination | 添加该 class 来在页面上显示分页。 |
<ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> ititit. </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> ititit. </ul> |
.pagination-lg, .pagination-sm | 使用这些 class 来获取不同大小的项。 |
<ul class="pagination pagination-lg">it.</ul> <ul class="pagination">it.</ul> <ul class="pagination pagination-sm">it.</ul> |
L'esempio seguente dimostra l'uso.pagination tavolo classe discussi:
I risultati sono i seguenti:
Il seguente esempio dimostraclasse .disabled discusso sopra tavolo,utilizzo.active:
I risultati sono i seguenti:
L'esempio seguente mostra la tabella di classe ha discusso.pagination- * Uso:
I risultati sono i seguenti:
Se si desidera creare un semplice link di pagina per fornire agli utenti di navigare attraverso la pagina di raggiungere. E link di paginazione come una lista non ordinata lanciare. Per impostazione predefinita, i collegamenti sono centrati. La seguente tabella elenca la classe di elaborazione di vibrazione Bootstrap.
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> |
L'esempio seguente mostra la tabella di classe discusso utilizzo.pager:
I risultati sono i seguenti:
L'esempio seguente mostra .previousclasse discusso sopra tavolo,utilizzo.Next:
I risultati sono i seguenti:
L'esempio seguente mostra la tabella di classe ha discusso l'uso.disabled:
I risultati sono i seguenti:
categoria | descrizione | Esempi |
---|---|---|
.pager | Un semplice link di paginazione, collegamenti centrati. | provare |
.previous | .pager il pulsante stile precedente, giustificato a sinistra | provare |
.Next | .pager il successivo stile del pulsante, allineato a destra | provare |
.disabled | Link Disabilita | provare |
.pagination | link cercapersone | provare |
.pagination-lg | link di paginazione più grandi | provare |
.pagination-sm | Dimensioni più piccole dei collegamenti di paging | provare |
.disabled | Link Disabilita | provare |
.active | accesso corrente pagina dei link stile | provare |