Latest web development tutorials

schede bootstrap

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.

Paging (impaginazione)

Nella tabella seguente sono elencati i Bootstrap fornire classe di elaborazione di paging.

Class描述示例代码
.pagination添加该 class 来在页面上显示分页。 
<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  .......
</ul>
.disabled, .active您可以自定义链接，通过使用.disabled来定义不可点击的链接，通过使用.active来指示当前的页面。 
<ul class="pagination">
  <li class="disabled"><a href="#">&laquo;</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>

La scheda predefinita

L'esempio seguente dimostra l'uso.pagination tavolo classe discussi:

Esempi

<ul class = "impaginazione"> <LI> <a href = "#"> & laquo ; </ a> </ li> <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> <LI> <a href = "#"> & raquo ; </ a> </ li> </ Ul>

Prova »

I risultati sono i seguenti:

La scheda predefinita

stato paging

Il seguente esempio dimostraclasse .disabled discusso sopra tavolo,utilizzo.active:

Esempi

<ul class = "impaginazione"> <LI> <a href = "#"> & laquo ; </ a> </ li> <Li class = "attiva"> <a href = "#"> 1 < / a> </ li> <Li class = "disabilitato"> <a href = "#"> 2 < / a> </ li> <LI> <a href = "#"> 3 < / a> </ li> <LI> <a href = "#"> 4 < / a> </ li> <LI> <a href = "#"> 5 < / a> </ li> <LI> <a href = "#"> & raquo ; </ a> </ li> </ Ul>

Prova »

I risultati sono i seguenti:

stato paging

dimensioni pagina

L'esempio seguente mostra la tabella di classe ha discusso.pagination- * Uso:

Esempi

<ul class = "impaginazione impaginazione-lg" > <LI> <a href = "#"> & laquo ; </ a> </ li> <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> <LI> <a href = "#"> & raquo ; </ a> </ li> </ Ul> <br> <ul class = "impaginazione"> <LI> <a href = "#"> & laquo ; </ a> </ li> <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> <LI> <a href = "#"> & raquo ; </ a> </ li> </ Ul> <br> <ul class = "impaginazione impaginazione-sm" > <LI> <a href = "#"> & laquo ; </ a> </ li> <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> <LI> <a href = "#"> & raquo ; </ a> </ li> </ Ul>

Prova »

I risultati sono i seguenti:

dimensioni pagina

Flip (Pager)

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="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>
.disabled添加该 class 来获得一个颜色变淡的外观。 
<ul class="pager">
  <li class="previous disabled"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

La pagina di default

L'esempio seguente mostra la tabella di classe discusso utilizzo.pager:

Esempi

<ul class = "cercapersone"> <LI> <a href = "#"> precedente < / a> </ li> <LI> <a href = "#"> Avanti < / a> </ li> </ Ul>

Prova »

I risultati sono i seguenti:

La pagina di default

link allineati

L'esempio seguente mostra .previousclasse discusso sopra tavolo,utilizzo.Next:

Esempi

<ul class = "cercapersone"> <Li class = "precedente"> <a href = "#"> & larr ; più vecchio </ a> </ li> <Li class = "next"> <a href = "#"> più recente & rarr; </ a> </ li> </ Ul>

Prova »

I risultati sono i seguenti:

Flip collegamenti allineati

stato flip

L'esempio seguente mostra la tabella di classe ha discusso l'uso.disabled:

Esempi

<ul class = "cercapersone"> <Li class = "precedente disabilitato"> < a href = "#"> & larr ; più vecchio </ a> </ li> <Li class = "next"> <a href = "#"> più recente & rarr; </ a> </ li> </ Ul>

Prova »

I risultati sono i seguenti:

stato flip

Ulteriori esempi di impaginazione

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