09-高级的CSS 组件

高级的CSS组件

表单

定义表单控件

Bootstrap 表单控件用于创建交互式元素。常见控件包括输入框、选择框、复选框和单选按钮等。
使用 .form-control 类来设置文本框、文本区域、选择框等表单控件的样式。

</head>
<body class="container">
<h2 class="mb-4">表单组示例</h2>
<form>
<div class="form-group">
<label for="formGroup1">姓名</label>
<input type="text" class="form-control" id="formGroup1" placeholder="Name">
</div>
<div class="form-group">
<label for="formGroup2">密码</label>
<input type="password" class="form-control" id="formGroup2" placeholder="PassWord">
</div>
<div class="form-group">
<label for="controlFile1">文件选择</label>
<input type="file" class="form-control-file" id="controlFile1">

</div>
</form>

<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

设置表单控件的大小

</head>
<body class="container">
<h2 class="mb-4">设置表单控件的大小</h2>
<form>
<input type="text" class="form-control form-control-lg" placeholder="大尺寸（form-control-lg）"><br>
<input type="text" class="form-control" placeholder="默认大小"><br>
<input type="text" class="form-control form-control-sm" placeholder="小尺寸（form-control-sm）">
</form>

设置表单控件只读

</head>
<body class="container">
<h2 class="mb-4">设置表单控件只读</h2>
<form>
<input type="text" class="form-control" placeholder="只读表单" readonly>
</form>

设置只读纯文本

</head>
<body class="container">
<h2 class="mb-4">设置表单控件只读</h2>
<form>
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">邮箱</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="email" value="email@example.com">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-sm-2 col-form-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="PassWord">
</div>
</div>
</form>

范围输入

</head>
<body class="container">
<h2 class="mb-4">范围输入</h2>
<form>
<input type="range" class="form-control-range">
</form>

设计单选按钮/ 复选框布局和样式

复选框和单选按钮–垂直堆叠方式

</head>
<body class="container">
<h2 class="mb-4">复选框和单选按钮–默认堆叠方式</h2>
<h5>选择你喜欢吃的水果</h5>
<form>
<p>只能选择一种的水果</p>
<div class="form-check">
<input type="radio" class="form-check-input" name="fruits" id="fruit1">
<label for="fruit1" class="form-check-label">香瓜</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="fruits" id="fruit2">
<label for="fruit2" class="form-check-label">哈密瓜</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="fruits" id="fruit3" disabled>
<label for="fruit3" class="form-check-label">西瓜（禁选）</label>
</div>
</form>
<form>
<p class="mt-4">可以多选的水果</p>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="fruits" id="fruit4">
<label for="fruit4" class="form-check-label">苹果</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="fruits" id="fruit5">
<label for="fruit5" class="form-check-label">香蕉</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="fruits" id="fruit6" disabled>
<label for="fruit6" class="form-check-label">菠萝(禁选)</label>
</div>
</form>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

复选框和单选按钮–水平堆叠方式

</head>
<body class="container">
<h2 class="mb-4">复选框和单选按钮–默认堆叠方式</h2>
<h5>选择你喜欢吃的水果</h5>
<form>
<p>只能选择一种的水果</p>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="fruits" id="fruit1">
<label for="fruit1" class="form-check-label">香瓜</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="fruits" id="fruit2">
<label for="fruit2" class="form-check-label">哈密瓜</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="fruits" id="fruit3" disabled>
<label for="fruit3" class="form-check-label">西瓜（禁选）</label>
</div>
</form>
<form>
<p class="mt-4">可以多选的水果</p>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" name="fruits" id="fruit4">
<label for="fruit4" class="form-check-label">苹果</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" name="fruits" id="fruit5">
<label for="fruit5" class="form-check-label">香蕉</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" name="fruits" id="fruit6" disabled>
<label for="fruit6" class="form-check-label">菠萝(禁选)</label>
</div>
</form>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

表单布局风格

表单布局风格是指在表单中排列标签、输入框、按钮等控件的方式，以实现不同的视觉效果和用户体验。

Bootstrap 提供了几种常见的表单布局方式：

水平表单布局 (Horizontal Form)

水平布局：布局是指标签与输入框在同一行排列。使用 .form-horizontal 类结合栅格系统（Grid System）来实现水平布局。通常，标签会占用部分列宽，输入框占用剩余列宽。
<form class="form-horizontal">
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>

关键点：
.form-group 包裹每一组标签和输入框。
使用 .row 类包裹每一组表单控件，实现栅格布局。
label 标签使用 .col-form-label 类，设置为同一行。

垂直表单布局 (Vertical Form)

垂直表单：垂直布局是指标签与输入框在不同的行中垂直排列，这是最常见的表单布局方式。
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

关键点：
每个表单控件独占一行，标签位于输入框上方。
这种布局简单明了，适合移动端设备。

内联表单布局 (Inline Form)

内联表单:内联表单布局是指表单控件水平排列，适合用于搜索框、登录框等较短的表单。
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>

<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

关键点：
使用 .form-inline 类，表单控件会自动排列在同一行。
内联表单布局适合放在导航栏或其他紧凑空间中。

帮助文本

帮助文本通常用于表单控件的说明，使用 .form-text 类来实现。

</head>
<body class="container">
<h3 class="mb-4">帮助文本</h3>
<form>
<div class="form-group row">
<label for="password">密码</label>
<input type="password" id="password" class="form-control">
<small class="form-text text-muted">
密码必须有8-18个字符，包含字母和数字，并且不能包含空格，特殊字符或表情符号。
</small>
</div>
</form>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

禁用表单

表单或表单控件可以通过 disabled 属性进行禁用。禁用后的控件无法进行用户输入。

</head>
<body class="container">
<h3 class="mb-4">禁用表单</h3>
<form>
<fieldset disabled>
<div class="form-group">
<label for="textInput">禁用表单</label>
<input type="text" id="textInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="testSelect">禁用选择菜单</label>
<select id="testSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="testCheck">
<label for="testCheck" class="form-check-label">禁用复选框</label>
</div>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</fieldset>
</form>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

列表组

列表组是一个常用的 Bootstrap 组件，用于显示一系列内容，比如菜单、导航、评论列表等。它能够以清晰的层级和视觉效果展示内容。

定义列表组

列表组使用 .list-group 类来创建。每个列表项使用 .list-group-item 类来定义。

</head>
<body class="container">
<h3 class="mb-4">列表组</h3>
<ul class="list-group">
<li class="list-group-item list-group-item-action">全心全力见心见行</li>
<li class="list-group-item list-group-item-action">同心同德启帆远航</li>
<li class="list-group-item list-group-item-action">同心同行共创未来</li>
<li class="list-group-item list-group-item-action">激情闪耀共创辉煌</li>
<li class="list-group-item list-group-item-action">超越梦想再创辉煌</li>
</ul>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

设计列表组的风格样式

激活状态和禁用状态：

.active 类用于标记当前激活的列表项。
.disabled 类用于禁用某个列表项。

</head>
<body class="container">
<h3 class="mb-4">激活和禁用状态</h3>
<ul class="list-group">
<li class="list-group-item list-group-item-action active">全心全力见心见行(激活状态)</li>
<li class="list-group-item list-group-item-action">同心同德启帆远航</li>
<li class="list-group-item list-group-item-action disabled">同心同行共创未来(禁用状态)</li>
<li class="list-group-item list-group-item-action">激情闪耀共创辉煌</li>
<li class="list-group-item list-group-item-action">超越梦想再创辉煌</li>
</ul>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

去除边框和圆角

</head>
<body class="container">
<h3 class="mb-4">去除边框和圆角</h3>
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-action">全心全力见心见行</li>
<li class="list-group-item list-group-item-action">同心同德启帆远航</li>
<li class="list-group-item list-group-item-action">同心同行共创未来</li>
<li class="list-group-item list-group-item-action">激情闪耀共创辉煌</li>
<li class="list-group-item list-group-item-action">超越梦想再创辉煌</li>
</ul>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

列表项的背景颜色：

通过 .list-group-item-* 类来设置不同的背景颜色，如 .list-group-item-primary、.list-group-item-success 等。

</head>
<body class="container">
<h3 class="mb-4">背景和文字颜色</h3>
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-primary">全心全力见心见行</li>
<li class="list-group-item list-group-item-secondary">同心同德启帆远航</li>
<li class="list-group-item list-group-item-success">同心同行共创未来</li>
<li class="list-group-item list-group-item-danger">激情闪耀共创辉煌</li>
<li class="list-group-item list-group-item-warning">超越梦想再创辉煌</li>
<li class="list-group-item list-group-item-info">飞跃巅峰纵横四海</li>
<li class="list-group-item list-group-item-light">融合梦想努力超越</li>
<li class="list-group-item list-group-item-dark">超越第一实现梦想</li>
</ul>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

可点击列表项

通过将 <li> 替换为 <a> 或 <button> 标签，并添加 .list-group-item-action 类，可以使列表项变为可点击状态，类似于链接或按钮。

</head>
<body class="container">
<h3 class="mb-4">添加徽章</h3>
<h5>每句口号支持的人数</h5>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">全心全力见心见行
<span class="badge badge-primary badge-pill">30</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center">超越梦想再创辉煌
<span class="badge badge-primary badge-pill">50</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center">超越第一实现梦想
<span class="badge badge-primary badge-pill">20</span></li>

</ul>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

定制内容

复杂的列表项：可以在列表项中嵌入更多内容，如标题、文本、徽章等，以实现更复杂的布局。

</head>
<body class="container">
<h3 class="mb-4">定制内容</h3>
<h5>招聘信息</h5>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">公司名称</h5>
<small>发布时间</small>
</div>
<p class="mb-1">描述</p>
<p>薪资</p>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">顺畅建筑有限公司</h5>
<small class="text-muted">一天前</small>
</div>
<p class="mb-1">公司在全国各地都有项目，现招一位项目经理，工作地点在新疆。。。</p>
<p>10-15k</p>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">梦想网络有限公司</h5>
<small class="text-muted">一天前</small>
</div>
<p class="mb-1">本公司位于北京，现招一位web前端工程师，要求有两年以上工作经验。。。</p>
<p>8-12k</p>
</a>

</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

面包屑

面包屑导航是一种用户界面元素，通常用于显示用户在网站或应用程序中的位置路径。它提供了层次结构的上下文，并允许用户轻松地返回到上一层或更高层级的页面。

定义面包屑

面包屑在 Bootstrap 中使用 .breadcrumb 类来创建。每个导航项使用 <li> 元素，并带有 .breadcrumb-item 类。最后一个项通常代表当前页面，使用 .active 类标记。

</head>
<body class="container">
<h3 class="mb-4">面包屑</h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active">首页</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">首页</a></li>
<li class="breadcrumb-item active">图书馆</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">首页</a></li>
<li class="breadcrumb-item"><a href="#">图书馆</a></li>
<li class="breadcrumb-item active">工程类</li>
</ol>
</nav>

关键点：
.breadcrumb 类用于定义整个面包屑导航的容器。
.breadcrumb-item 类用于定义每个面包屑导航项。
.active 类用于标记当前页面所在的导航项。

设计分隔符

默认分隔符：在 Bootstrap 中，面包屑导航项之间的默认分隔符是斜杠 (/)。这个分隔符可以通过 CSS 自定义。

自定义分隔符：如果你想要更改分隔符，可以使用 CSS。比如，将分隔符改为 >：

分页

分页（pagination）是用于指示一系列相关的内容存在于多个页面中的组件

定义分页

分页是一种导航方法，用于将大量内容分成多个页面，以便用户可以轻松浏览。通常用于长列表、搜索结果或文章目录等。分页组件通常包含页码链接、”上一页” 和 “下一页” 按钮等，允许用户在内容中快速跳转。

使用图标

在分页中使用图标可以让用户界面更直观和友好。Bootstrap 提供了使用 Font Awesome 或 Bootstrap Icons 等图标库的方式来增强分页导航的视觉效果。

设计分页风格

在设计分页时，除了功能外，风格也是非常重要的。不同的分页风格可以为用户带来不同的使用体验。Bootstrap 提供了几种分页样式，但你也可以通过自定义 CSS 来设计独特的分页风格。

默认风格

这是 Bootstrap 提供的默认分页样式，简洁而常见。

大小变化

Bootstrap 允许你通过添加 pagination-lg 或 pagination-sm 类来更改分页组件的大小。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>高级的CSS组件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<h3 class="mb-4">设置大小</h3>
<!–大号分页样式–>
<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"><span>«</span></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"><span>»</span></a></li>
<li class="page-item"><a href="#" class="page-link">尾页</a></li>
</ul>
<!–默认分页样式–>
<ul class="pagination">
<li class="page-item"><a href="#" class="page-link">首页</a></li>
<li class="page-item"><a href="#" class="page-link"><span>«</span></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"><span>»</span></a></li>
<li class="page-item"><a href="#" class="page-link">尾页</a></li>
</ul>
<!–小号分页样式–>
<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"><span>«</span></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"><span>»</span></a></li>
<li class="page-item"><a href="#" class="page-link">尾页</a></li>
</ul>

激活和禁用

对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>高级的CSS组件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<h3 class="mb-4">居中对齐</h3>
<ul class="pagination mb-5 justify-content-center">
<li class="page-item"><a href="#" class="page-link">首页</a></li>
<li class="page-item"><a href="#" class="page-link"><span>«</span></a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item active"><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 disabled"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link"><span>»</span></a></li>
<li class="page-item"><a href="#" class="page-link">尾页</a></li>
</ul>
<h3 class="mb-4">右对齐</h3>
<ul class="pagination justify-content-end">
<li class="page-item"><a href="#" class="page-link">首页</a></li>
<li class="page-item"><a href="#" class="page-link"><span>«</span></a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item active"><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 disabled"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link"><span>»</span></a></li>
<li class="page-item"><a href="#" class="page-link">尾页</a></li>
</ul>