BootStrap4

卡片

  • 简单的卡片

我们可以通过.card与.card-body类来创建一个简单的卡片。

1
2
3
<div class="card">
  <div class="card-body">简单的卡片</div>
</div>
  • 头部和底部

.card-header类用于创建卡片的头部样式，.card-footer类用于创建卡片的底部样式。

1
2
3
4
5
<div class="card">
  <div class="card-header">头部</div>
  <div class="card-body">内容</div>
  <div class="card-footer">底部</div>
</div>
  • 多种颜色卡片

提供了多种卡片的背景颜色类：.bg-primary,.bg-success,.bg-info,.bg-warning,.bg-danger,.bg-secondary,.bg-dark和.bg-light。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="container">
  <h2>多种颜色卡片</h2>
  <div class="card">
    <div class="card-body">Basic card</div>
  </div>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">Primary card</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">Success card</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">Info card</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">Warning card</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">Danger card</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">Secondary card</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">Dark card</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">Light card</div>
  </div>
</div>
  • 标题、文本和链接

可以在头部元素上使用.card-title类来设置卡片的标题。.card-text类用于设置卡片正文的内容。.card-link类用于给链接设置颜色。

1
2
3
4
5
6
7
8
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some example text. Some example text.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>
  • 图片卡片

我们可以给img添加.card-img-top（图片在文字上方）或.card-img-bottom（图片在文字下方来设置图片卡片）。

1
2
3
4
5
6
7
8
<div class="card" style="width:400px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

如果图片要设置为背景，可以使用.card-img-overlay类。

1
2
3
4
5
6
7
8
<div class="card" style="width:500px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

下拉菜单

1
2
3
4
5
6
7
8
9
10
<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
  </div>
</div>

.dropdown类用来指定一个下拉菜单。我们可以使用一个按钮或链接来打开下拉菜单，按钮或链接需要添加.dropdown-toggle和data-toggle="dropdown"属性。div元素上添加.dropdown-menu类来设置实际下拉菜单，然后在下拉菜单的选项中添加.dropdown-item类。

1
2
3
4
5
6
7
8
9
10
11
<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
  • 下拉菜单中的分割线

.dropdown-divider类用于在下拉菜单中创建一个水平的分割线。

1
<div class="dropdown-divider"></div>
  • 下拉菜单中的标题

.dropdown-header 类用于在下拉菜单中添加标题

1
<div class="dropdown-header">Dropdown header 1</div>
  • 下拉菜单中的可用项与禁用项

.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。如果要禁用下拉菜单的选项，可以使用.disabled类。

1
2
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
  • 下拉菜单的定位

如果我们想让下拉菜单右对齐，可以在元素上的.dropdown-menu类后添加.dropdown-menu-right类。

1
<div class="dropdown-menu dropdown-menu-right">
  • 指定方向弹出的下拉菜单

如果你希望下拉菜单向右弹出，可以在div元素上添加"dropright"类。
如果你希望上拉菜单向上弹出，可以在div元素上添加"dropup"类。
如果你希望下拉菜单向左弹出，可以在div元素上添加"dropleft"类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

折叠

折叠可以很容易的实现内容的显示与隐藏。

1
2
3
4
<button data-toggle="collapse" data-target="#demo">折叠</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

.collapse类用于指定一个折叠元素(实例中的div);点击按钮后会在隐藏与显示之间切换。
控制内容的隐藏与显示，需要在a或button元素上添加data-toggle=“collapse"属性。data-target=”#id"属性是对应折叠的内容(div id=“demo”)。
注意:a元素上你可以使用href属性来代替data-target属性。

1
2
3
4
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

默认情况下折叠的内容是隐藏的，你可以添加.show类让内容默认显示。

1
2
3
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>

以下实例通过扩展卡片组件来显示简单的手风琴。
注意:使用data-parent属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div id="accordion">
<div class="card">
  <div class="card-header">
    <a class="card-link" data-toggle="collapse" href="#collapseOne">
      选项一
    </a>
  </div>
  <div id="collapseOne" class="collapse show" data-parent="#accordion">
    <div class="card-body">
      #1 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
    </div>
  </div>
</div>
<div class="card">
  <div class="card-header">
    <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
    选项二
  </a>
  </div>
  <div id="collapseTwo" class="collapse" data-parent="#accordion">
    <div class="card-body">
      #2 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
    </div>
  </div>
</div>
<div class="card">
  <div class="card-header">
    <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
      选项三
    </a>
  </div>
  <div id="collapseThree" class="collapse" data-parent="#accordion">
    <div class="card-body">
      #3 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
    </div>
  </div>
</div>
</div>