Pagination trong bootstrap 3
Pagination là một thuật ngữ không quá xa lạ đối với dân
lập trình web, hầu hết mọi website đều sử dụng nó để làm nhiệm vụ giới
hạn dữ liệu trên một trang. Bootstrap cũng rất thấu hiểu tâm lý của
chúng ta vì thế cũng hỗ trợ phần stylesheet pagination
rất đẹp mắt giúp cho dân cắt HTML CSS giảm bớt được thời gian với nó.
Các bạn cố thể lên trang chủ của nó để xem cách sử dụng, nhưng nếu bạn
không rành tiếng anh thì có thể xem qua bài này để nắm bắt.
Ví dụ: Xem demo
1. Tạo pagination đơn giản với bootstrap 3
Phần này thì cực đơn giản như là các bạn lấy tay bóc kẹo ra bỏ vào miệng vậy đấy. Mọi thành phần tạo ra pagination đều nằm trong cặp thẻ ul & li, thêm vào thẻ ul class pagination thì mọi thứ coi như xong.Ví dụ: Xem demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Bootstrap 3 Pagination</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <style type="text/css"> .example{ margin: 20px; } </style></head><body> <div class="example"> <div class="container"> <div class="row"> <h2>Pagination Basic</h2> <ul class="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> </div> </div> </div></body></html>
Giao diện:
Hình ảnh pagination basic
Ví dụ: Xem demo
Giao diện:
Hình ảnh pagination disable & active
Ví dụ: Xem demo
Giao diện:
Hình ảnh pager với 2 nút previous & next
Hình ảnh pagination basic
2. Pagination sử dụng class active & disabled
Class active và disabled mục đích giúp người dùng nhận diện được họ dang ở trang nào. Cách sử dụng chi tiết như sau:- Class
activesẽ hiển thị background để báo cho chúng ta biết đang ở trang nào. - Class
disabledcấm chúng ta click vào trang nào đó (thường là trang hiện tại)
Ví dụ: Xem demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Bootstrap 3 Pagination with Disabled and Active</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <style type="text/css"> .example{ margin: 20px; } </style></head><body> <div class="example"> <div class="container"> <div class="row"> <h2>Pagination with disabled and active</h2> <ul class="pagination"> <li><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> <li class="disabled"><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> </div> </div> </div></body></html> |
Hình ảnh pagination disable & active
3. Tạo nút previous & next với class pager
Class này giúp các bạn dễ dàng tạo ra 2 nútprevious & next bằng cách thêm class pager vào thẻ ul.Ví dụ: Xem demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Bootstrap 3 Pager</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <style type="text/css"> .example{ margin: 20px; } </style></head><body> <div class="example"> <div class="container"> <div class="row"> <h2>Pager</h2> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> </div> </div> </div></body></html> |
Hình ảnh pager với 2 nút previous & next
No comments
Post a Comment