使用 Bootstrap5 创建分页

笔记 CSS 前端

使用 Bootstrap5 创建分页

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap5</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <nav>
        <ul class="pagination">
            <li class="page-item"><a href="#" class="page-link">上一页</a></li>
            <li class="page-item"><a href="#" class="page-link">1</a></li>
            <li class="page-item"><a href="#" class="page-link">2</a></li>
            <li class="page-item"><a href="#" class="page-link">3</a></li>
            <li class="page-item"><a href="#" class="page-link">4</a></li>
            <li class="page-item"><a href="#" class="page-link">5</a></li>
            <li class="page-item"><a href="#" class="page-link">下一页</a></li>
        </ul>
    </nav>
</div>
<div class="m-3">
    <ul class="pagination">
        <li class="page-item"><a href="" class="page-link">上一页</a></li>
        <li class="page-item"><a href="" class="page-link">1</a></li>
        <li class="page-item"><a href="" class="page-link">2</a></li>
        <li class="page-item"><a href="" class="page-link">下一页</a></li>
    </ul>
</div>
</body>
</html>

具有禁用和活动状态的分页

Bootstrap5 分页内的链接可以针对不同情况进一步定制样式，例如当用户接近结束或开始时，或向用户指示当前页码。使用类 .disabled 来禁用链接，使用 .active 来指示当前所在页面的页码。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap5</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-3">
    <ul class="pagination">
        <li class="page-item active"><a href="" class="page-link">上一页</a></li>
        <li class="page-item active"><a href="" class="page-link">1</a></li>
        <li class="page-item"><a href="" class="page-link">2</a></li>
        <li class="page-item"><a href="" class="page-link">下一页</a></li>
    </ul>
</div>
</body>
</html>

修改分页大小

将 .pagination-lg 或 .pagination-sm 等相对大小调整类添加到带有 .pagination 基类的元素上来创建更大或更小的分页。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap5</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-3">
    <ul class="pagination pagination-lg">
        <li class="page-item"><a href="" class="page-link">上一页</a></li>
        <li class="page-item"><a href="" class="page-link">1</a></li>
        <li class="page-item"><a href="" class="page-link">2</a></li>
        <li class="page-item"><a href="" class="page-link">下一页</a></li>
    </ul>
</div>
<div class="m-3">
    <ul class="pagination pagination-md">
        <li class="page-item"><a href="" class="page-link">上一页</a></li>
        <li class="page-item"><a href="" class="page-link">1</a></li>
        <li class="page-item"><a href="" class="page-link">2</a></li>
        <li class="page-item"><a href="" class="page-link">下一页</a></li>
    </ul>
</div>
<div class="m-3">
    <ul class="pagination pagination-sm">
        <li class="page-item"><a href="" class="page-link">上一页</a></li>
        <li class="page-item"><a href="" class="page-link">1</a></li>
        <li class="page-item"><a href="" class="page-link">2</a></li>
        <li class="page-item"><a href="" class="page-link">下一页</a></li>
    </ul>
</div>
</body>
</html>

分页对齐

默认情况下，分页水平左对齐。要将其与页面中心对齐，将类 .justify-content-center 添加到 .pagination 基类中，如下所示：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap5</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-3">
    <ul class="pagination pagination-lg">
        <li class="page-item"><a href="" class="page-link">上一页</a></li>
        <li class="page-item"><a href="" class="page-link">1</a></li>
        <li class="page-item"><a href="" class="page-link">2</a></li>
        <li class="page-item"><a href="" class="page-link">下一页</a></li>
    </ul>
</div>
<div class="m-3">
    <ul class="pagination pagination-md justify-content-center">
        <li class="page-item"><a href="" class="page-link">上一页</a></li>
        <li class="page-item"><a href="" class="page-link">1</a></li>
        <li class="page-item"><a href="" class="page-link">2</a></li>
        <li class="page-item"><a href="" class="page-link">下一页</a></li>
    </ul>
</div>
<div class="m-3">
    <ul class="pagination pagination-sm">
        <li class="page-item"><a href="" class="page-link">上一页</a></li>
        <li class="page-item"><a href="" class="page-link">1</a></li>
        <li class="page-item"><a href="" class="page-link">2</a></li>
        <li class="page-item"><a href="" class="page-link">下一页</a></li>
    </ul>
</div>
</body>
</html>

如果觉得文章对你有用，请随意赞赏

bootstrap