BootStrap4

进度条

创建一个基本的进度条的步骤如下：

1
2
3
4
5
6
添加一个带有 .progress 类的 <div>。
接着，在上面的<div>内，添加一个带有.progress-bar类的空的<div>。
添加一个带有百分比表示的宽度的style属性，例如style="width:70%"表示进度条在70%的位置。
<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>
  • 进度条高度

进度条高度默认为16px。我们可以使用CSS的height属性来修改。

1
2
3
<div class="progress" style="height:20px;">
  <div class="progress-bar" style="width:40%;"></div>
</div>
  • 进度条标签

可以在进度条内添加文本，如进度的百分比：

1
2
3
<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>
  • 不同颜色的进度条

默认情况下进度条为蓝色，Bootstrap4还提供了以下颜色的进度条。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="progress">
  <div class="progress-bar bg-success" style="width:40%"></div>
</div>

<div class="progress">
  <div class="progress-bar bg-info" style="width:50%"></div>
</div>

<div class="progress">
  <div class="progress-bar bg-warning" style="width:60%"></div>
</div>

<div class="progress">
  <div class="progress-bar bg-danger" style="width:70%"></div>
</div>
  • 条纹的进度条

可以使用.progress-bar-striped类来设置条纹进度条。

1
2
3
<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>
  • 动画进度条

使用.progress-bar-animated类可以为进度条添加动画。

1
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div>
  • 混合色彩进度条
1
2
3
4
5
6
7
8
9
10
11
<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    Warning
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    Danger
  </div>
</div>

分页

要创建一个基本的分页可以在ul元素上添加.pagination类。然后在li元素上添加.page-item类。

1
2
3
4
5
6
7
<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>
  • 当前页页码状态

当前页可以使用.active类来高亮显示。

1
2
3
4
5
6
7
<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>
  • 不可点击的分页链接

.disabled类可以设置分页链接不可点击。

1
2
3
4
5
6
7
<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>
  • 分页显示大小

可以将分页条目设置为不同的大小，.pagination-lg类设置大字体的分页条目，.pagination-sm类设置小字体的分页条目。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>

<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>
  • 面包屑导航

.breadcrumb和.breadcrumb-item类用于设置面包屑导航。

1
2
3
4
5
6
<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Photos</a></li>
  <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
  <li class="breadcrumb-item"><a href="#">Italy</a></li>
  <li class="breadcrumb-item active">Rome</li>
</ul>

列表组

创建列表组，可以在ul元素上添加.list-group类, 在li元素上添加.list-group-item类。

1
2
3
4
5
<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>
  • 激活状态的列表项

通过添加.active类来设置激活状态的列表项。

1
2
3
4
5
<ul class="list-group">
  <li class="list-group-item active">Active item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>
  • 禁用的列表项

.disabled类用于设置禁用的列表项。

1
2
3
4
5
<ul class="list-group">
  <li class="list-group-item disabled">Disabled item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>
  • 链接列表项

要创建一个链接的列表项，可以将ul替换为div，a替换li。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类。

1
2
3
4
5
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">First item</a>
  <a href="#" class="list-group-item list-group-item-action">Second item</a>
  <a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
  • 多种颜色列表项

列表项目的颜色可以通过以下列来设置：.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。

1
2
3
4
5
6
7
8
9
10
<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>
  • 链接的多种颜色列表项
1
2
3
4
5
6
7
8
9
10
11
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">激活列表项</a>
  <a href="#" class="list-group-item list-group-item-success">成功列表项</a>
  <a href="#" class="list-group-item list-group-item-secondary">次要列表项</a>
  <a href="#" class="list-group-item list-group-item-info">信息列表项</a>
  <a href="#" class="list-group-item list-group-item-warning">警告列表项</a>
  <a href="#" class="list-group-item list-group-item-danger">危险列表项</a>
  <a href="#" class="list-group-item list-group-item-primary">主要列表项</a>
  <a href="#" class="list-group-item list-group-item-dark">深灰色列表项</a>
  <a href="#" class="list-group-item list-group-item-light">浅色列表项</a>
</div>