BootStrap4

信息提示框

提示框可以使用.alert 类,后面加上.alert-success,.alert-info,.alert-warning,.alert-danger,.alert-primary,.alert-secondary,.alert-light或.alert-dark类来实现。

1
2
3
<div class="alert alert-success">
  <strong>成功!</strong> 指定操作成功提示信息。
</div>
  • 提示框添加链接

提示框中在链接的标签上添加alert-link类来设置匹配提示框颜色的链接。

1
2
3
<div class="alert alert-success">
  <strong>成功!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
</div>
  • 关闭提示框

我们可以在提示框中的div中添加.alert-dismissible类，然后在关闭按钮的链接上添加class="close"和data-dismiss="alert"类来设置提示框的关闭操作。

1
2
3
4
<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>成功!</strong> 指定操作成功提示信息。
</div>
  • 提示框动画

.fade和.show类用于设置提示框在关闭时的淡出和淡入效果

1
<div class="alert alert-danger alert-dismissible fade show">

按钮

1
2
3
4
5
6
7
8
9
10
<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">黑色</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>

按钮类可用于 a,button或input元素上

1
2
3
4
<a href="#" class="btn btn-info" role="button">链接按钮</a>
<button type="button" class="btn btn-info">按钮</button>
<input type="button" class="btn btn-info" value="输入框按钮">
<input type="submit" class="btn btn-info" value="提交按钮">
  • 按钮设置边框
1
2
3
4
5
6
7
8
<button type="button" class="btn btn-outline-primary">主要按钮</button>
<button type="button" class="btn btn-outline-secondary">次要按钮</button>
<button type="button" class="btn btn-outline-success">成功</button>
<button type="button" class="btn btn-outline-info">信息</button>
<button type="button" class="btn btn-outline-warning">警告</button>
<button type="button" class="btn btn-outline-danger">危险</button>
<button type="button" class="btn btn-outline-dark">黑色</button>
<button type="button" class="btn btn-outline-light text-dark">浅色</button>
  • 不同大小的按钮
1
2
3
<button type="button" class="btn btn-primary btn-lg">大号按钮</button>
<button type="button" class="btn btn-primary">默认按钮</button>
<button type="button" class="btn btn-primary btn-sm">小号按钮</button>
  • 块级按钮

通过添加.btn-block类可以设置块级按钮。

1
<button type="button" class="btn btn-primary btn-block">按钮 1</button>
  • 激活和禁用的按钮

按钮可设置为激活或者禁止点击的状态。
.active类可以设置按钮是可用的，disabled属性可以设置按钮是不可点击的。注意a元素不支持disabled属性，你可以通过添加.disabled类来禁止链接的点击。

1
2
3
<button type="button" class="btn btn-primary active">点击后的按钮</button>
<button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
<a href="#" class="btn btn-primary disabled">禁止点击的链接</a>

按钮组

可以在div元素上添加.btn-group类来创建按钮组。

1
2
3
4
5
<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

我们可以使用.btn-group-lg/sm类来设置按钮组的大小。

1
2
3
4
5
<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
  • 垂直按钮组

可以使用.btn-group-vertical类来创建垂直的按钮组：

1
2
3
4
5
<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
  • 内嵌按钮组及下拉菜单
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>
  • 拆分按钮下拉菜单
1
2
3
4
5
6
7
8
9
10
<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Tablet</a>
    <a class="dropdown-item" href="#">Smartphone</a>
  </div>
</div>
  • 垂直按钮组及下拉菜单
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

徽章（Badges）

徽章(Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将.badge类加上带有指定意义的颜色类(如.badge-secondary)添加到span元素上即可。徽章可以根据父元素的大小的变化而变化。

  • 各种颜色类型的徽章
1
2
3
4
5
6
7
8
<span class="badge badge-primary">主要</span>
<span class="badge badge-secondary">次要</span>
<span class="badge badge-success">成功</span>
<span class="badge badge-danger">危险</span>
<span class="badge badge-warning">警告</span>
<span class="badge badge-info">信息</span>
<span class="badge badge-light">浅色</span>
<span class="badge badge-dark">深色</span>
  • 药丸形状徽章

使用.badge-pill类来设置药丸形状徽章

1
2
3
4
5
6
<span class="badge badge-pill badge-default">默认</span>
<span class="badge badge-pill badge-primary">主要</span>
<span class="badge badge-pill badge-success">成功</span>
<span class="badge badge-pill badge-info">信息</span>
<span class="badge badge-pill badge-warning">警告</span>
<span class="badge badge-pill badge-danger">危险</span>
  • 徽章插入到元素内
1
2
3
<button type="button" class="btn btn-primary">
  Messages <span class="badge badge-light">4</span>
</button>