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="#">«</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="#">»</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="#">«</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="#">»</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">«</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">»</a></li>
</ul> Cobalah sendiri " pagination Sizing
Gunakan w3-kecil, w3-kecil, w3-besar, w3-xlarge, w3-xxlarge atau w3-xxxlarge ukuran pagination yang:
Polos Pagination
Tambahkan kelas w3-perbatasan untuk membuat pagination dengan batas:
bulat Borders
Tambahkan kelas w3-babak berikutnya ke w3-perbatasan untuk perbatasan bulat:
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="#">❮
Previous</a></li>
<li><a href="#">Next
❯</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 "