TWITTER BOOTSTRAP 3
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Bài 6: 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.

Note: Nếu bạn chưa biết cách phân trang trong PHP thì có thể xem bài thuật toán phân trang trong PHP.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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.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="#">&laquo;</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="#">&raquo;</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>                                     

Giao diện:

pagination bootstrap png
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 active sẽ hiển thị background để báo cho chúng ta biết đang ở trang nào.
  • Class disabled cấ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ụ: Xem demo

<!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="#">&laquo;</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="#">&raquo;</a></li>
                </ul>
            </div>
        </div>

    </div>
</body>
</html>                                     

Giao diện:

pagination disabled active png
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út previous & next bằng cách thêm class pager vào thẻ ul.

Ví dụ: Xem demo

<!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>                                     

Giao diện:

pager png
Hình ảnh pager với 2 nút previous & next

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.

Cùng chuyên mục:

Bootstrap4 là gì?

Bootstrap4 là gì?

Chào các bạn, nếu các bạn đang tìm hiểu về Bootstrap4 thì các bạn đã…

Twitter Bootstrap la gi? Tìm hiểu Bootstrap CSS

Twitter Bootstrap la gi? Tìm hiểu Bootstrap CSS

Hiện nay PHP có rất nhiều Framework và CMS hỗ trợ giúp cho công việc…

Bài 21: Xây dựng layout blog cơ bản với bootstrap 3

Bài 21: Xây dựng layout blog cơ bản với bootstrap 3

Sau khi kết thúc series bootstrap 3 lý thuyết thì ở bài này tôi sẽ…

Bài 20: Jumbotron, well, progress bar trong bootstrap 3

Bài 20: Jumbotron, well, progress bar trong bootstrap 3

Đây là bài lý thuyết cuối cùng trong series bootstrap 3, ở các bài tiếp…

Bài 19: Helper classes trong bootstrap 3

Bài 19: Helper classes trong bootstrap 3

Trong bài viết này thì chúng ta sẽ tìm hiểu về các helper classes hỗ…

Bài 18: Tạo Tabs trong bootstrap 3

Bài 18: Tạo Tabs trong bootstrap 3

Bài viết này cũng có một mối liên quan mật thiết với component navs vì…

Bài 17: Dropdown menu trong bootstrap 3

Bài 17: Dropdown menu trong bootstrap 3

Thuật ngữ dropdown menu đã trở nên quá quen thuộc trong mỗi người của chúng…

Bài 16: Navigation và thuộc tính hỗ trợ trong bootstrap 3

Bài 16: Navigation và thuộc tính hỗ trợ trong bootstrap 3

Như vậy sau khi kết thúc bài trước thì xem như chúng ta đã tìm…

Bài 15: Navigation trong bootstrap 3

Bài 15: Navigation trong bootstrap 3

Như vậy, kết thúc bài trước chúng ta đã tìm hiểu xong khái niệm về…

Bài 14: Navs menu trong bootstrap 3

Bài 14: Navs menu trong bootstrap 3

Như vậy sau khi kết thúc bài viết trước thì các bạn cùng với tôi…

Bài 13: Glyphicons trong bootstrap 3

Bài 13: Glyphicons trong bootstrap 3

Trong bài học ngày hôm nay các bạn sẽ cùng với tôi tìm hiểu về…

Bài 12: Button group bootstrap 3

Bài 12: Button group bootstrap 3

Để có thể hiểu rõ bài viết này thì tôi cần các bạn phải xem…

Bài 11: List group trong bootstrap 3

Bài 11: List group trong bootstrap 3

Trong bài này chúng ta sẽ cùng nhau tìm hiểu khái niệm List Group trong…

Bài 10: Tạo button trong bootstrap 3

Bài 10: Tạo button trong bootstrap 3

Như vậy kết thúc 9 bài trước thì các bạn cũng phần nào cảm nhận…

Bài 9: Xây dựng form với bootstrap 3

Bài 9: Xây dựng form với bootstrap 3

Khi các bạn tiến hành xây dựng giao diện một website thì form chính là…

Bài 8: Định dạng Typography bootstrap 3

Bài 8: Định dạng Typography bootstrap 3

Trong bài viết này, các bạn sẽ tìm hiểu về các phong cách và định…

Bài 7: Panel & Labels trong bootstrap 3

Bài 7: Panel & Labels trong bootstrap 3

Trong bài hôm nay chúng ta sẽ cùng tìm hiểu hai thuộc tính khác mà…

Bài 5: Breadcrumbs  & Images trong bootstrap 3

Bài 5: Breadcrumbs & Images trong bootstrap 3

Breadcrumb là tập hợp các đường link phân cấp giúp người dùng có thể biết…

Bài 4: Tạo table trong bootstrap 3

Bài 4: Tạo table trong bootstrap 3

Dùng bootstrap 3 để để tạo ra table thì rất là đơn giản, chỉ cần…

Bài 3: Grid System trong bootstrap 3

Bài 3: Grid System trong bootstrap 3

Chắc hẳn các bạn còn đang lạ lẫm và đặt ra câu hỏi Grid system…

Top