tutorial pengembangan web terbaru
 

W3.CSS pagination


W3.CSS Paginations

Jika Anda memiliki situs web dengan banyak halaman, Anda mungkin ingin menambahkan beberapa jenis pagination untuk setiap halaman:


dasar Pagination

Untuk membuat pagination dasar, menambahkan kelas w3-pagination ke <ul> elemen:

Contoh

<ul class="w3-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>
Cobalah sendiri "

Arrows pagination

Gunakan entitas HTML atau ikon dari ikon perpustakaan untuk menambahkan panah pagination:

Contoh

<ul class="w3-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>
Cobalah sendiri "

Active / Link sekarang

Gunakan salah satu kelas warna w3- untuk menunjukkan halaman pengguna adalah pada:

Contoh

<ul class="w3-pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a class="w3-green" 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>
Cobalah sendiri "

Hover Color

Secara default, ketika Anda memindahkan mouse di atas link pagination, mereka mendapatkan warna latar belakang abu-abu. Gunakan salah satu kelas warna w3-hover- untuk mengubah warna melayang:

Contoh

<ul class="w3-pagination">
  <li><a href="#" class="w3-hover-purple">&laquo;</a></li>
  <li><a href="#" class="w3-hover-green">1</a></li>
  <li><a href="#" class="w3-hover-red">2</a></li>
  <li><a href="#" class="w3-hover-blue">3</a></li>
  <li><a href="#" class="w3-hover-black">4</a></li>
  <li><a href="#" class="w3-hover-orange">&raquo;</a></li>
</ul>
Cobalah sendiri "

pagination Sizing

Gunakan w3-kecil, w3-kecil, w3-besar, w3-xlarge, w3-xxlarge atau w3-xxxlarge ukuran pagination yang:

Contoh

<ul class="w3-pagination w3-xlarge">
Cobalah sendiri "

Polos Pagination

Tambahkan kelas w3-perbatasan untuk membuat pagination dengan batas:

Contoh

<ul class="w3-pagination w3-border">
Cobalah sendiri "

bulat Borders

Tambahkan kelas w3-babak berikutnya ke w3-perbatasan untuk perbatasan bulat:

Contoh

<ul class="w3-pagination w3-border w3-round">
Cobalah sendiri "

berpusat Pagination

Untuk pusat pagination, bungkus <div> elemen dengan class = "w3-pusat" di sekitar <ul>:

Contoh

<div class="w3-center">
  <ul class="w3-pagination w3-xlarge">
    ...
  </ul>
</div>
Cobalah sendiri "

Contoh Pagination lainnya

Berikutnya / Contoh sebelumnya

<ul class="w3-pagination w3-border w3-round">
  <li><a href="#">&#10094; Previous</a></li>
  <li><a href="#">Next &#10095;</a></li>
</ul>
Cobalah sendiri "

menu Contoh

<ul class="w3-pagination w3-border">
  <li><a href="#" class="w3-light-grey">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>
Cobalah sendiri "