卡片一种可伸缩可扩展的容器
##卡片的设置
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>