Bootstrap 4 基础教程Bootstrap 4 安装Bootstrap 4 基本框架Bootstrap 4 网格系统Bootstrap 4 文字排版Bootstrap 4 文本颜色Bootstrap 4 背景颜色Bootstrap 4 表格Bootstrap4 图像效果Bootstrap 4 超大屏幕 ( Jumbotron )Bootstrap 4 信息提示框Bootstrap 4 按钮Bootstrap 4 按钮组Bootstrap4 徽章 ( Badges )Bootstrap4 进度条Bootstrap 4 分页Bootstrap 4 面包屑导航Bootstrap 4 列表组Bootstrap 4 卡片组件Bootstrap 4 下拉菜单Bootstrap 4 折叠组件Bootstrap 4 手风琴Bootstrap 4 导航组件Bootstrap 4 导航栏Bootstrap 4 选项卡组件Bootstrap 4 胶囊导航组件Bootstrap 4 表单Bootstrap 4 表单控件Bootstrap4 轮播组件Bootstrap 4 模态框Bootstrap 4 提示框Bootstrap 4 弹出框Bootstrap 4 自动更新导航插件Bootstrap 4 小工具
Bootstrap 4 卡片组件
Bootstrap 4 提供了 .card 和 .card-body css 类用于创建卡片组件
<div class="card">
<div class="card-body">简单的卡片</div>
</div>
卡片组件的头部和底部
.card-header CSS 类用于创建卡片的头部样式
.card-footer CSS 类用于创建卡片的底部样式
<div class="card">
<div class="card-header">卡片头部</div>
<div class="card-body">卡片内容</div>
<div class="card-footer">卡片底部</div>
</div>
多种颜色卡片
可以在 .card 元素上添加以下 CSS 类来设置卡片的颜色
.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.bg-light
<div class="card">
<div class="card-body">Basic card</div>
</div>
<br>
<div class="card bg-primary text-white">
<div class="card-body">Primary card</div>
</div>
<br>
<div class="card bg-success text-white">
<div class="card-body">Success card</div>
</div>
<br>
<div class="card bg-info text-white">
<div class="card-body">Info card</div>
</div>
<br>
<div class="card bg-warning text-white">
<div class="card-body">Warning card</div>
</div>
<br>
<div class="card bg-danger text-white">
<div class="card-body">Danger card</div>
</div>
<br>
<div class="card bg-secondary text-white">
<div class="card-body">Secondary card</div>
</div>
<br>
<div class="card bg-dark text-white">
<div class="card-body">Dark card</div>
</div>
<br>
<div class="card bg-light text-dark">
<div class="card-body">Light card</div>
</div>
标题、文本和链接
可以在头部元素上使用 .card-title 来设置卡片的标题
添加 .card-text 用于设置卡片正文的内容
添加 .card-link 用于给链接设置颜色
<div class="card">
<div class="card-body">
<h4 class="card-title">卡片标题</h4>
<p class="card-text">这是卡片的正文</p>
<a href="#" class="card-link">一个链接</a>
<a href="#" class="card-link">另一个链接</a>
</div>
</div>
图文卡片
可以给 <img> 元素添加 .card-image-top (图片在文字上方) 或 .card-image-bottom (图片在文字下方) 来创建一个图文卡片
<div class="card" style="width:300px">
<img class="card-img-top" src="/static/i/img3.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">李白</h4>
<p class="card-text">唐朝诗先</p>
<a href="#" class="btn btn-primary">详情</a>
</div>
</div>
图文卡片-图片为背景
如果图片要设置为背景，可以使用 .card-img-overlay 代替 .card-body
<div class="card" style="width:300px">
<img class="card-img-top" src="/static/i/img3.jpg" alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">李白</h4>
<p class="card-text">唐朝诗先</p>
<a href="#" class="btn btn-primary">详情</a>
</div>
</div>