4 Bootstrap4组件——卡片
.card
卡片组件是BootStrap 4新增的一组重要样式,它是一个灵活的、可扩展的内容管理器,可以包含图片、列表、文本、链接等多种组合,卡片有可选的卡片头和卡片脚、一个大范围的内容、上下文背景色以及强大的显示选项。 使用.card构建卡片
<div class="card"></div>
1 卡片内容
1.1 卡片标题
使用.card-title(标题)和.card-subtitle(小标题)构建卡片标题
<div class="card">
<h1 class="card-title">卡片标题</h1>
<h5 class="card-subtitle text-muted">小标题</h5>
<div class="card-body">卡片主体</div>
</div>
1.2卡片主体
使用.card-body构建卡片主体内容
<div class="card">
<div class="card-body">卡片主体</div>
</div>
1.2.1 文本
卡片主体使用.card-text代表文本内容
<div class="container">
<div class="card">
<h1 class="card-title">卡片标题</h1>
<h5 class="card-subtitle text-muted">小标题</h5>
<div class="card-body">
<p class="card-text">卡片主体</p>
</div>
</div>
</div>
1.2.2 超链接
卡片主体使用.card-link代表超链接
<div class="container">
<div class="card">
<h1 class="card-title">卡片标题</h1>
<h5 class="card-subtitle text-muted">小标题</h5>
<div class="card-body">
<p class="card-text">卡片主体</p>
<a href="#" class="card-link">注册</a>
<a href="#" class="card-link">登录</a>
</div>
</div>
</div>
1.3 图片
使用.card-img-top定义一张图片在卡片的顶部
<div class="container">
<div class="card">
<img src="#" class="card-img-top">
<h1 class="card-title">卡片标题</h1>
<h5 class="card-subtitle text-muted">小标题</h5>
<div class="card-body">
<p class="card-text"