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">卡片主体</p>
<a href="#" class="card-link">注册</a>
<a href="#" class="card-link">登录</a>
</div>
</div>
</div>
1.4 列表组
1.4.1 基本结构
使用.list-group构建列表组
<div class="container">
<div class="card">
<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>
1.4.2 列表标题
使用.card-header定义列表组标题
<div class="container">
<div class="card">
<div class="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>
</div>
1.4.3 列表页眉页脚
使用.card-footer配合.card-header构建页眉页脚
<div class="container">
<div class="card">
<div class="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">页脚</div>
</div>
</div>
2 缩放
卡片没有特定的宽度width定义，除非另有定义声明，否则它们的真实宽度将是100%，您可以根据需要使用自定义CSS，引入栅格系统。
2.1 使用栅格系统
使用栅格系统，根据需求按行与列来装载卡片。
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-6">
<div class="card">
<div class="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">页脚</div>
</div>
</div>
<div class="col-sm-4 col-md-6">
<div class="card">
<div class="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">页脚</div>
</div>
</div>
</div>
</div>
2.2 使用全局样式
使用.w-25，.w-50，.w-75，.w-100来设置卡片显示的百分比
<div class="container">
<div class="card w-50 float-left">
<div class="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">页脚</div>
</div>
<div class="card w-50 float-left">
<div class="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">页脚</div>
</div>
</div>
2.3 文本对齐方式
使用我们的文本对齐类来更改或特定部份的文本对齐。
使用.text-left,.text-center,.text-right可以设置文本特定部分的文本对齐。
2.4 导航
卡片使用.card-header-tabs可以配合列表ul实现导航
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
将ul添加.nav-pills和.card-header-pills实再按钮导航
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
2.5 图片
2.5.1 图片覆盖
卡片中包含一些选项来搭配图像，选择在卡片的任何一端附加.cad-img-*，用卡片内容覆盖图像（如同背景），或者只是将图像置入到卡片当中。
<div class="container">
<div class="card mb-3">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">卡片标题</h5>
<p class="card-text">文本内容</p>
<p class="card-text"><small class="text-muted">注释文本</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">卡片标题</h5>
<p class="card-text">文本内容</p>
<p class="card-text"><small class="text-muted">注释文本</small></p>
</div>
<img class="card-img-bottom" src="..." alt="Card image cap">
</div>
</div>
2.5.2图片叠加覆盖
使用.card-img-overlay可以实现图片作为背景，这种做并不是真的做为背景，而是通过定位让文字浮动在图片上。
<div class="card mb-3">
<img class="card-img-overlay" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">卡片标题</h5>
<p class="card-text">文本内容</p>
<p class="card-text"><small class="text-muted">注释文本</small></p>
</div>
</div>
类似资料：