bootstrap卡片

卡片一种可伸缩可扩展的容器
##卡片的设置
div.card 容器 （div.card指 div 容器加上class 下面文章不在声明）

div.card-body   容器 父级是.card
 h*.card-title  卡片标签  可放在.card也可以放cark-body中 （h*  指  h1-h7） 

<div class="card">
        <div class="cark-body">简单的卡片</div>
    </div>

##card卡片
卡片是flex布局因此容易对齐和控制
下面是bootstrap对.cark 的设置

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

当需要往卡片中 填充可以使用
.card-body

.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
}

.card-img-top 设置图片在顶部
.card-text设置卡片文本
例子：

<div class="card" style="width: 18rem;">

    <img src="img/1.jpg" style="width:18rem;height:10rem;" alt="">
<!--    设置图片大小为18rem  1rem=16px-->
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

##卡片的列表
ol/ul.list-group 使用ol或者li 创建列表
li.list-group-item

 <div class="card" style="width:18rem;">
        <div class="card-header">featured</div>
        <ul class="list-group list-group-flush">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Cras justo odio</li>
        </ul>
    </div>

混合使用例子:

<div class="card" style="width:18rem">
        <img src="img/1.jpg" style="width: 100%;height:16rem;" alt="">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example tet to build on the card title and make up the bulk of the card's content</p>
        </div>
        <ul class="list-group list-group-flush">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Vestibulum at eros</li>
        </ul>
        <div class="card-body">
            <a href="#" class="card-link">Card link</a>
            <a href="#" class="card-link">Another link</a>
        </div>

    </div>

来源：CSDN

作者：lin1072368472

链接：https://blog.csdn.net/lin1072368472/article/details/104338825