Contoh Paginasi CSS
Pelajari cara membuat pagination responsif menggunakan CSS.
paginasi sederhana
Jika Anda memiliki situs web dengan banyak halaman, Anda mungkin ingin menambahkan semacam pagination ke setiap halaman:
Contoh
.pagination {
display: inline-block;
}
.pagination a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
}
Pagination Aktif dan Hoverable
Sorot halaman saat ini dengan .active
kelas, dan gunakan :hover
pemilih untuk mengubah warna setiap tautan halaman saat menggerakkan mouse ke atasnya:
Contoh
.pagination a.active {
background-color:
#4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
Tombol Aktif dan Melayang yang Dibulatkan
Tambahkan border-radiusproperti jika Anda menginginkan tombol "aktif" dan "arahkan" yang bulat:
Contoh
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
Efek Transisi Hoverable
Tambahkan transitionproperti ke tautan halaman untuk membuat efek transisi saat mengarahkan kursor:
Contoh
.pagination a {
transition: background-color .3s;
}
Pagination Berbatasan
Gunakan borderproperti untuk menambahkan batas ke pagination:
Contoh
.pagination a {
border: 1px solid #ddd; /* Gray
*/
}
Perbatasan Bulat
Tip: Tambahkan batas bulat ke tautan pertama dan terakhir Anda di pagination:
Contoh
.pagination a:first-child {
border-top-left-radius:
5px;
border-bottom-left-radius: 5px;
}
.pagination
a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Ruang Antar Tautan
Tip: Tambahkan marginproperti jika Anda tidak ingin mengelompokkan tautan halaman:
Contoh
.pagination a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Ukuran paginasi
Ubah ukuran pagination dengan font-sizeproperti:
Contoh
.pagination a {
font-size: 22px;
}
Pagination Terpusat
Untuk memusatkan pagination, bungkus elemen container (seperti <div>) di sekitarnya dengantext-align:center
Contoh
.center {
text-align: center;
}
Lebih Banyak Contoh
Contoh
Tepung roti
Variasi lain dari pagination disebut "remah roti":
Contoh
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}