bootstrap 组件之卡片总结

card 在bootstrap3.x的版本是没有， 在bootstrap4.x里面才会有 card支持自动响应式
    使用类名card 来标记为card
    使用方法：
    <div class="container">
      <div class="row">
        <div class="col-lg-4">
            <div class="card">
                // 图片需要和card-body同一个级别
                <img class='card-img-top' src='xxx/>
                <div class="card-body">
                    //card-title 标记为卡片的标题
                    <h3 class="card-title">卡片的标签</h3>
                    // card-subtitle 标记为卡片的的副标题
                    <h4 class="card-subtitle">卡片的副标题</h4>
                    <p class="card-text">卡片的内容</p>
                    <a href="#" class="card-link">第1个链接</a>
                    <a href="#" class="card-link">第2个链接</a>
                </div>
            </div>
        </div>
      </div>
    </div>
    // 实现列表组， 页眉， 页脚 
    使用方法：
    <div class="col-lg-4">
      <div class="card">
        <div class="card-header">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 class="card-footer">card-footer是页脚</div>
      </div>
    </div> 
    // 组合模式 图片，标题，链接等组合 随便组合，但是要明白结构
    使用方法：
    <div class="row">
      <div class="col-lg-4">
        <div class="card">
            <div class="card-header">页眉</div>
            <img src="xxxx" alt="图片" class="card-img-top">
            <div class="card-body">
                <h5 class="card-title">卡片的标题</h5>
                <p class="card-text">卡片的文本</p>
                <a href="#" class="card-link btn btn-group btn-info">链接1</a>
                <a href="#" class="card-link btn btn-group btn-info">链接2</a>
            </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>
        <div class="card-footer">card-footer是页脚</div>
      </div>
    </div>
   // 卡片宽度设置 使用w-50 w-75等，也可以使用行间样式
   // 卡片的文本对齐
   默认左对齐 使用的是 text-left 给的card类名的后面
   右对齐 text-right
   居中对齐 text-center
   // 实现导航
   使用方法：
   <div class="row">
        <div class="card">
            <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">第三个个</a></li>
                </ul>
            </div>
        </div>
    </div>
   // 图像 
   图片的位置放在card 上面就使用 card-img-top  放在card下面 就使用card-img-bottom
   图片覆盖： 就是文字在图片的上面 使用类名 card-img-overlay 放在img下面的兄弟div上
   // 卡片 样式 背景色
    背景 总共8个颜色  在card所对应的div上 使用类名 bg-primary/success 等
    边框 总共8个颜色 在cad所对应的div上 使用类名  border-primary/success/info 等
    页眉页脚的边框 在对应的页眉 页脚加上对应的类名  border-primary/success 等 
  //卡片的排版 卡片组
    card-group 放在card的父级标签上
    card-deck 卡片组之间有间隙 
    card-columns 卡片column布局, 根据图片的大小来排版 ，不适合用作瀑布流