BootStrap 卡片

卡片
1. 卡片是一个内容扩展管理器，可以包含图片、列表、文本、链接等多种组合；
2. 先使用.card 来构建卡片，然后可以使用.card-body 建立卡片主体内容；
<div class="card" style=" 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=" 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=" 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=" 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=" 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=" 300px;">
    <div class="card-header">
        标题
    </div>
    <div class="card-body">
        <p class="card-text">这里是卡片的文本内容！...</p>
    </div>
</div>

17. 卡片可以定制自己的边框，直接使用之前的边框组件样式即可；

<div class="card border-info" style=" 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">