Bootstrap 4分页

Bootstrap 4分页

分页是用来在网站中实现页面之间的导航。Bootstrap中使用的分页有一大块连接的链接,很难错过,而且容易扩展。

基本分页:基本分页可以用以下类来指定。

  • ..pagination类是用来指定列表组的分页。
  • .page-item类用于指定组中的每个分页项目。
  • .page-link类是用来指定分页项目中的链接。

示例:

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 4 | Pagination</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1>Bootstrap 4 | Basic Pagination</h1>
        <!-- Declare the pagination class -->
        <ul class="pagination">
            <!-- Declare the item in the group -->
            <li class="page-item">
                <!-- Declare the link of the item -->
                <a class="page-link" href="#">Previous</a>
            </li>
            <!-- Rest of the pagination items -->
            <li class="page-item">
                <a class="page-link" href="#">1</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">2</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">3</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
    </div>
</body>
</html>

输出:

Bootstrap 4分页

禁用状态:分页链接可以通过使用.disabled类来使它们看起来无法点击。这可用于禁用 “上一页 “或 “下一页 “按钮。.disabled类在内部使用 “指针事件:无 “来使链接不可点击,然而,由于这一规范并不总是被实施,最好是通过设置 “tabindex “属性为-1来使其不可能被导航到。这个属性控制一个元素是否可以用tab键来导航。

示例:

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 4 | Pagination</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1>Bootstrap 4 | Pagination Disabled State</h1>
        <!-- Declare the pagination class -->
        <ul class="pagination">
            <!-- Specify the disabled class to style this item disabled -->
            <li class="page-item disabled">
                <!-- Specify tabindex to make the link non navigatable -->
                <a class="page-link" href="#" tabindex="-1">
                    Previous
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">
                    1
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">2</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">
                    3
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
    </div>
</body>
</html>

输出:

Bootstrap 4分页

活动状态:分页链接可以通过在分页项目上使用.active类来突出它们作为当前活动页面的风格。

示例:

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 4 | Pagination</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1>Bootstrap 4 | Pagination Active State</h1>
        <!-- Declare the pagination class -->
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link" href="#">
                    Previous
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">
                    1
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">
                    2
                </a>
            </li>
            <!-- Specify the active class to style this item active -->
            <li class="page-item active">
                <a class="page-link" href="#">3</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
    </div>
</body>
</html>

输出:

Bootstrap 4分页

分页组的大小:分页组可以通过使用额外的类使其变大或变小。输入组有3种可能的大小。

  • .pagination-sm类用于更小的尺寸。
  • .pagination-lg类用于更大的尺寸。
  • .pagination类是默认尺寸。

示例:

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 4 | Pagination</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1>Bootstrap 4 | Pagination Sizing</h1>
        <b>Large Pagination</b>
        <!-- Specify pagination-lg for large pagination group -->
        <ul class="pagination pagination-lg">
            <li class="page-item">
                <a class="page-link" href="#">Previous</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">1</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">2</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">3</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
        <b>Small Pagination</b>
        <!-- Specify pagination-sm for small pagination group -->
        <ul class="pagination pagination-sm">
            <li class="page-item">
                <a class="page-link" href="#">Previous</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">1</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">2</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">3</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
        <b>Normal Pagination</b>
        <!-- Normal size pagination -->
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link" href="#">Previous</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">1</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">2</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">3</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
    </div>
</body>
</html>

输出:

Bootstrap 4分页

分页组的对齐方式:分页组可以通过使用flexbox实用类,向右或向中间对齐。

  • .justify-content-center类是用来将组别向中心对齐的。
  • .justify-content-end类用于将该组向右对齐。

示例:

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 4 | Pagination</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1>Bootstrap 4 | Pagination Alignment</h1>
        <b>Align to the center</b>
        <!-- Specify justify-content-center to align to the center -->
        <ul class="pagination justify-content-center">
            <li class="page-item">
                <a class="page-link" href="#">Previous</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">1</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">2</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">3</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
        <b>Align to the right</b>
        <!-- Specify justify-content-end to align to the right -->
        <ul class="pagination justify-content-end">
            <li class="page-item">
                <a class="page-link" href="#">Previous</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">1</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">2</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">3</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
    </div>
</body>
</html>

输出:

Bootstrap 4分页

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程