Latest web development tutorials

tab bootstrap

Bab ini akan menjelaskan fitur yang didukung oleh tab Bootstrap. Pager (Pagination), adalah daftar unordered, Bootstrap diperlakukan seperti elemen antarmuka lain menangani paging.

Pager (Pagination)

Tabel berikut berisi daftar Bootstrap menyediakan kelas pengolahan 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>

Tab default

Contoh berikut menunjukkan penggunaan.pagination meja kelas dibahas:

contoh

<Ul class = "pagination"> <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>

Coba »

Hasilnya adalah sebagai berikut:

Tab default

Status paging

Contoh berikut menunjukkankelas .disabled dibahas di atas meja,penggunaan.active:

contoh

<Ul class = "pagination"> <Li> <a href = "#"> & laquo ; </ a> </ li> <Li class = "aktif"> <a href = "#"> 1 < / a> </ li> <Li class = "cacat"> <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>

Coba »

Hasilnya adalah sebagai berikut:

Status paging

ukuran halaman

Contoh berikut menunjukkan tabel kelas dibahas.pagination- * Penggunaan:

contoh

<Ul class = "pagination pagination-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> Situs <Ul class = "pagination"> <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> Situs <Ul class = "pagination pagination-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>

Coba »

Hasilnya adalah sebagai berikut:

ukuran halaman

Flip (Pager)

Jika Anda ingin membuat link halaman sederhana untuk menyediakan pengguna menavigasi melalui halaman untuk mencapai. Dan paging link sebagai daftar unordered adalah sandal. Secara default, link yang berpusat. Tabel berikut berisi daftar Bootstrap kelas pengolahan sandal.

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>

Halaman default

Contoh berikut menunjukkan tabel kelas dibahas penggunaan.pager:

contoh

<Ul class = "pager"> <Li> <a href = "#"> Sebelumnya < / a> </ li> <Li> <a href = "#"> Berikutnya < / a> </ li> </ Ul>

Coba »

Hasilnya adalah sebagai berikut:

Halaman default

Link selaras

Contoh berikut menunjukkan .previouskelas dibahas di atas meja,penggunaan.next:

contoh

<Ul class = "pager"> <Li class = "sebelumnya"> <a href = "#"> & Larr ; tua </ a> </ li> <Li class = "berikutnya"> <a href = "#"> Baru & rarr; </ a> </ li> </ Ul>

Coba »

Hasilnya adalah sebagai berikut:

Membalik link selaras

keadaan flip

Contoh berikut menunjukkan tabel kelas dibahas penggunaan.disabled:

contoh

<Ul class = "pager"> <Li class = "sebelumnya dinonaktifkan"> < a href = "#"> & Larr ; tua </ a> </ li> <Li class = "berikutnya"> <a href = "#"> Baru & rarr; </ a> </ li> </ Ul>

Coba »

Hasilnya adalah sebagai berikut:

keadaan flip

contoh lebih lanjut dari pagination

kategori deskripsi contoh
.pager Sebuah link pagination sederhana, link berpusat. mencoba
.previous .pager tombol Sebelumnya gaya, kiri dibenarkan mencoba
.next .pager gaya tombol Next, kanan-blok mencoba
.disabled Link Nonaktifkan mencoba
.pagination link paging mencoba
.pagination-lg link paging lebih besar mencoba
.pagination-sm Ukuran yang lebih kecil dari link paging mencoba
.disabled Link Nonaktifkan mencoba
.active Akses saat ini gaya link halaman mencoba