Thuật ngữ 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.
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ụ:
<!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.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<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>
Với đoạn code ta sẽ có được giao diện như hình bên dưới.
2. Pagination sử dụng class active và 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)
Các bạn xem ví dụ dưới đây hoặc nhìn vào hình có thể thấy rõ là tôi đang gán cho trang 1 bằng class active và nó hiển thị background màu xanh. Còn trang 2 thì tôi gán cho class disabled nó không còn hiện màu xanh nửa mà hiện màu đen , khi rê chuột vào nó ra dấu cấm click.
Ví dụ:
<!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.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<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>
Với đoạn code ta được giao diện như hình
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út previous & next bằng cách thêm class pager vào thẻ ul.
Ví dụ:
<!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.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<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>
Với đoạn code trên ta được giao diện như hình
4. Lời kết
Bài viết khá ngắn nhưng tôi cũng đã trình bày xong những tính năng stylesheet mà pagination trong bootstrap hỗ trợ. Có nhiều bạn hỏi tôi rằng sao tôi viết bài riêng lẻ thế, tôi xin trả lời như sau: Sở dĩ tôi viết từng bài riêng lẽ chính là sau khi kết thúc loạt bài hướng dẫn thì sẽ ráp toàn bộ kiến thức trong loạt bài đó xây dựng một giao diện website hoàn chỉnh.
