卡片是一个内容扩展管理器，可以包含图片、列表、文本、链接等多种组合;
- 先使用.card来构建卡片，然后可以使用.card-body建立卡片主体内容;
- 卡片主体标题可以使用.card-title(标题) .card-subtitle(副标题)等;
- 卡片主体使用.card-text 代表文本内容;
- 卡片主体使用.card-link 代表超链接;
- 使用.card-img-top可以设计一个带主题图片的内容管理器;
- 使用.card-header设置—个列表组的标头;
- 使用.card-footer配合.card-header,负责页眉页脚;
- 卡片默认是100%显示的，可以使用棚格系统嵌套来固定卡片的布局;
- 也可以使用.w-25、.w-50、.w-75、.w-100来设置卡片的显示百分比;
- 卡片支持文本的整体对齐和局部的对齐方式，采用.text-center等;
- 卡片使用.card-header-tabs可以配合列表ul实现导航功能;
- 将ul中的文本改成按钮式: .nav-pills、.card-header-pills实现按钮导航;
- 卡片中.card-img 插入一个整体的图片，再配合.card-img-overlay实背景。这种做法并不是真的作为背景，而是通过定位，让文字浮动在图片上进行编辑;
- 卡片通过内部栅格，也可以实现左右水平排列的图文显示;
- 卡片可以定制自己的背景和颜色，这里并无组件样式，均为之前所配置;
- 卡片可以定制自己的边框，直接使用之前边框组件样式即可;
- 在.card元素外层，构建一个.card-group分组，可以紧紧将每个卡片贴在一起;
- .card-group本身就具有栅格系统，但会紧贴，对应的.card-deck提供间隙;
- 有时，卡片的高度不一，上面两种会自动补全，换行也会留有巨大空隙;
- 这时，采用.card-columns可以自我进行填充，均分空隙; 代码练习：
<div class="card" style="width: 300px;">
<div class="card-body">
<div class="card-title">
卡片标题
</div>
<div class="card-subtitle text-muted">
卡片子标题
</div>
<p class="card-text">卡片主体</p>
</div>
</div>
<br />
<div class="card" style="width: 300px;">
<div class="card-header">
列表标题
</div>
<ul class="list-group">
<li class="list-group-item">列表一</li>
<li class="list-group-item">列表二</li>
<li class="list-group-item">列表三</li>
</ul>
</div>
<br />
<div class="card" style="width: 300px;">
<div class="card-header">
卡片页头
</div>
<div class="card-body">
卡片主体
</div>
<div class="card-footer">
卡片页脚
</div>
</div>
<br />
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-header">
卡片页头
</div>
<div class="card-body">
卡片主体
</div>
<div class="card-footer">
卡片页脚
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-header">
卡片页头
</div>
<div class="card-body">
卡片主体
</div>
<div class="card-footer">
卡片页脚
</div>
</div>
</div>
</div>
</div>
<br />
<div class="card" style="width: 300px;">
<img src="img/1.jpg" class="card-img-top" />
<div class="card-body">
卡片主体
<br />
<a href="#" class="card-link">超链接</a>
</div>
<div class="card-footer">
卡片页脚
</div>
</div>
<br />
<div class="card" style="width: 500px;">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li><a href="#" class="nav-link active">主页</a></li>
<li><a href="#" class="nav-link">内容</a></li>
<li><a href="#" class="nav-link disabled">其他</a></li>
</ul>
</div>
</div>
<br />
<div class="card" style="width: 500px;">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li><a href="#" class="nav-link active">主页</a></li>
<li><a href="#" class="nav-link">内容</a></li>
<li><a href="#" class="nav-link disabled">其他</a></li>
</ul>
</div>
</div>
<br />
<div class="card w-100 text-center text-dark">
<img src="img/1.jpg" class="card-img" />
<div class="card-img-overlay">
卡片主体
</div>
</div>
<br />
<div class="card w-100">
<div class="row">
<div class="col-sm-6">
<img src="img/1.jpg" class="card-img" />
</div>
<div class="col-sm-6">
<div class="card-title">
卡片标题
</div>
<div class="card-text">
卡片文本
</div>
</div>
</div>
</div>
<br />
<div class="card-deck">
<div class="card">
卡片1
</div>
<div class="card">
卡片2
</div>
</div>
