BootStrap 卡片
卡片
1. 卡片是一个内容扩展管理器，可以包含图片、列表、文本、链接等多种组合；
2. 先使用.card 来构建卡片，然后可以使用.card-body 建立卡片主体内容；
<div class="card" style="width: 300px;">
<div class="card-body">
卡片主体
</div>
</div>
3. 卡片主体标题可以使用.card-title(标题).card-subtitle(小标题)等；
<div class="card-body">
<h4 class="card-title">卡片标题</h4>
<h6 class="card-subtitle text-muted">小标题</h6>
</div>
4. 卡片主体使用.card-text 代表文本内容；
<div class="card-body">
<p class="card-text">这里是卡片的文本内容！...</p>
</div>
5. 卡片主体使用.card-link 代表超链接；
<div class="card-body">
<a href="#" class="card-link">注册</a>
<a href="#" class="card-link">登录</a>
</div>
6. 使用.card-img-top 可以设计一个带主题图片的内容管理器；
<div class="card" style="width: 300px">
<img class="card-img-top" src="img/bt.png" alt="bt">
<div class="card-body">
这里是介绍 Bootstrap4.x 课程内容的文本！
</div>
</div>
7. 使用.card-header 设置一个列表组的标头；
<div class="card" style="width: 300px;"> <div class="card-header"> 列表标题 </div> <ul class="list-group list-group-flush"> <li class="list-group-item">列表 1</li> <li class="list-group-item">列表 2</li> <li class="list-group-item">列表 3</li> </ul> </div>
8. 使用.card-footer 配合.card-header，负责页眉页脚；
<div class="card" style="width: 300px;"> <div class="card-header"> 页眉 </div> <div class="card-body"> 主体 </div> <div class="card-footer"> 页脚 </div> </div>
9. 卡片默认是 100%显示的，可以使用栅格系统嵌套来固定卡片的布局；
<div class="container-fluid"> <div class="row"> <div class="col-sm-4"> ... </div> </div> </div>
10. 也可以使用.w-25、.w-50、w-75、w-100 来设置卡片的显示百分比；
<div class="card w-25">
11. 卡片支持文本的整体对齐和局部的对齐方式，采用.text-center 等；
<div class="card text-right"> <div class="card-body text-left">
11. 卡片使用.card-header-tabs 可以配合列表 ul 实现导航功能；
<div class="card text-center" style="width: 500px;"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item"> <a href="#" class="nav-link active">主页</a> </li> <li class="nav-item"> <a href="#" class="nav-link">内容</a> </li> <li class="nav-item"> <a href="#" class="nav-link disabled">关于</a> </li> </ul> </div> <div class="card-body"> ... </div> </div>
12. 将 ul 中的文本改成按钮式：.nav-pills、.card-header-pills 实现按钮导航；
<ul class="nav nav-pills card-header-pills">
13. 卡片中.card-img 插入一个整体的图片，再配合.card-img-overlay 实现背景；
14. 这种做法并不是真的作为背景，而是通过定位，让文字浮动在图片上进行编辑；
<div class="card bg-info text-black w-75"> <img src="img/bt.png" alt="Bootstrap" class="card-img"> <div class="card-img-overlay"> <p>在图片上的文本</p> </div> </div>
15. 卡片通过内部栅格，也可以实现左右水平排列的图文显示；
<div class="card w-75"> <div class="row"> <div class="col-sm-6"> <img src="img/bt.png" alt="Bootstrap" class="card-img"> </div> <div class="col-sm-6"> <div class="card-title">图片标题</div> <div class="card-text">图片文本</div> </div> </div> </div>
16. 卡片可以定制自己的背景和颜色，这里并无组件样式，均为之前所配置；
<div class="card text-white bg-dark" style="width: 300px;"> <div class="card-header"> 标题 </div> <div class="card-body"> <p class="card-text">这里是卡片的文本内容！...</p> </div> </div>
17. 卡片可以定制自己的边框，直接使用之前的边框组件样式即可；
<div class="card border-info" style="width: 300px;"> <div class="card-header text-info"> 标题 </div> <div class="card-body text-info"> <p class="card-text">这里是卡片的文本内容！...</p> </div> </div>
18. 在.card 元素外层，构建一个.card-group 分组，可以紧紧将每个卡片贴在一起；
<div class="card-group"> <div class="card"> ...
19. .card-group 本身就具有栅格系统，但会紧贴；对应的.card-deck，提供间隙；
<div class="card-deck"> <div class="card"> ...
20. 有时，卡片的高度不一，上面两种会自动补全，换行也会留有巨大空隙；
21. 这时，采用.card-columns 可以自我进行填充，均分空隙；
<div class="card-columns">
