CSS Pagination

• Học cách tạo phân trang sử dụng CSS.

 

Simple Pagination.

Ví dụ:

Cú pháp:

.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>

Thuộc tính hover và active.

• Đánh dấu từng trang hiện tại với .active và hiệu ứng khi hover .

Ví dụ:

Cú pháp:

.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
.pagination a.active {
  background-color: #4CAF50;
  color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>

Rounded Active and Hoverable Buttons.

• Tương tự như trên nhưng chúng ta thêm thuộc tính border-radius khi active và hover.

Ví dụ:

Cú pháp:

.pagination a {
  border-radius: 5px;
}
.pagination a.active {
  border-radius: 5px;
}

Hoverable Transition Effect.

• Thêm thuộc tính transition vào phân trang khi đưa chuột vào.

Cú pháp:

.pagination a {
  transition: background-color 3s;
}

Lưu ý : Với việc thêm transition như trên thì khi ta đưa chuột vào ô phân trang khác ô active hiện tại thì sau 3s mới hiện màu background.

Bordered Pagination.

• Thêm thuộc tính  border để tạo khung cho thanh phân trang.

Ví dụ:

Cú pháp:

.pagination a {
  border: 1px solid #ddd; /* Gray */
}

Pagination Size.

• Chúng ta có thể chỉnh kích thước thanh phân trang dựa vào thuộc tính font-size .

Cú pháp:

.pagination a {
  font-size: 22px;
}

Centered Pagination.

• Để căn giữa phân trang, hãy bọc một phần tử vùng chứa (như <div>) xung quanh nó bằng text-align:center

Cú pháp:

.center {
  text-align: center;
}
<div class="center">
  <div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
  </div>
</div>

Ví dụ:

Breadcrumbs.

• Một biến thể khác của phân trang được gọi là “breadcrumbs“:

Ví dụ:

Cú pháp:

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";
}
ul.breadcrumb li a {color: green;}
<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Pictures</a></li>
  <li><a href="#">Summer 15</a></li>
  <li>Italy</li>
</ul>