一、分页
1.1 创建分页
要创建一个基本的分页可以在
-
元素上添加 .pagination 类。然后在
- 元素上添加 .page-item 类,
- 元素的 标签上添加 .page-link 类:
<div class="container mt-3"> <h2>分页</h2> <p>要创建一个基本的分页可以在 ul 元素上添加 .pagination 类。然后在 li 元素上添加 .page-item 类:</p> <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>
1.2 当前页页码状态
当前页可以使用 .active 类来高亮显示:
<div class="container mt-3"> <h2>当前页页码状态</h2> <p>当前页可以使用 .active 类来高亮显示:</p> <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 active"><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>
1.3 不可点击的分页链接
.disabled 类可以设置分页链接不可点击:
<div class="container mt-3"> <h2>不可点击的分页链接</h2> <p>.disabled 类可以设置分页链接不可点击:</p> <ul class="pagination"> <li class="page-item disabled"><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>
1.4 分页显示大小
可以将分页条目设置为不同的大小
.pagination-lg 类设置大字体的分页条目,.pagination-sm 类设置小字体的分页条目:
<div class="container mt-3"> <h2>分页显示大小</h2> <p>.pagination-lg 类设置大字体的分页条目,.pagination-sm 类设置小字体的分页条目:</p> <p>大:</p> <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> <p>默认:</p> <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> <p>小:</p> <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> </div>
1.5 分页的对齐方式
可以使用工具类来设置分页的对齐方式:
<div class="container mt-3"> <h2>分页的对齐方式</h2> <p>可以使用工具类来设置分页的对齐方式:</p> <ul class="pagination"> <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li> </ul> <ul class="pagination justify-content-center"> <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li> </ul> <ul class="pagination justify-content-end"> <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li> </ul> </div>
1.6 面包屑导航
.breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航:
二、列表组
2.1 创建列表组
要创建列表组,可以在
-
元素上添加 .list-group 类, 在
- 元素上添加 .list-group-item 类:
<div class="container mt-3"> <h2>基础列表组</h2> <ul class="list-group"> <li class="list-group-item">第一项</li> <li class="list-group-item">第二项</li> <li class="list-group-item">第三项</li> </ul> </div>
2.2 激活状态的列表项
通过添加 .active 类来设置激活状态的列表项:
<div class="container mt-3"> <h2>激活状态的列表项</h2> <ul class="list-group"> <li class="list-group-item active">激活列表项</li> <li class="list-group-item">第二项</li> <li class="list-group-item">第三项</li> </ul> </div>
2.3 禁用的列表项
.disabled 类用于设置禁用的列表项:
<div class="container mt-3"> <h2>禁用的列表项</h2> <ul class="list-group"> <li class="list-group-item disabled">禁用项</li> <li class="list-group-item">第二项</li> <li class="list-group-item">第三项</li> </ul> </div>
2.4 链接列表项
要创建一个链接的列表项,可以将
-
替换为
- 。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类:
, 替换
<div class="container mt-3"> <h2>链接列表项</h2> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action">第一项</a> <a href="#" class="list-group-item list-group-item-action">第二项</a> <a href="#" class="list-group-item list-group-item-action">第三项</a> </div> </div>
2.5 移除列表边框
使用 .list-group-flush 类来删除列表的边框和圆角:
<div class="container mt-3"> <h2>移除列表边框</h2> <p>使用 .list-group-flush 类来删除列表的边框和圆角:</p> </div> <div class="container"> <ul class="list-group list-group-flush"> <li class="list-group-item">第一项</li> <li class="list-group-item">第二项</li> <li class="list-group-item">第三项</li> <li class="list-group-item">第四项</li> </ul> </div>
2.6 水平列表组
我们可以将 .list-group-horizontal 类添加到 .list-group 类后面来创建水平列表组:
<div class="container mt-3"> <h2>水平列表组</h2> <p>可以将 .list-group-horizontal 类添加到 .list-group 类后面来创建水平列表组:</p> <ul class="list-group list-group-horizontal"> <li class="list-group-item">第一项</li> <li class="list-group-item">第二项</li> <li class="list-group-item">第三项</li> <li class="list-group-item">第四项</li> </ul> </div>
2.7 多种颜色列表项
列表项目的颜色可以通过以下列来设置: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark 和 list-group-item-light:
<div class="container mt-3"> <h2>多种颜色列表项</h2> <ul class="list-group"> <li class="list-group-item list-group-item-success">成功列表项</li> <li class="list-group-item list-group-item-secondary">次要列表项</li> <li class="list-group-item list-group-item-info">信息列表项</li> <li class="list-group-item list-group-item-warning">警告列表项</li> <li class="list-group-item list-group-item-danger">危险列表项</li> <li class="list-group-item list-group-item-primary">主要列表项</li> <li class="list-group-item list-group-item-dark">深灰色列表项</li> <li class="list-group-item list-group-item-light">浅色列表项</li> </ul> </div>