Bootstrap卡片组件

卡片是一个内容扩展管理器，可以包含图片、列表、文本、链接等多种组合;

• 先使用.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>