垦荒学园

简体中文

English

简体中文

English

切换主题

Bootstrap 卡片 ​

概述 ​

Bootstrap 卡片（Cards）是一个灵活且可扩展的内容容器，包含页眉、页脚、图像、标题、文本等多种选项。卡片是现代 Web 设计中最常用的组件之一。

基本卡片 ​

使用 .card 类创建基本卡片：

html
<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <h6 class="card-subtitle mb-2 text-muted">卡片副标题</h6>
        <p class="card-text">这是卡片的内容文本。可以包含任何你想要的内容。</p>
        <a href="#" class="card-link">卡片链接</a>
        <a href="#" class="card-link">另一个链接</a>
    </div>
</div>

内容类型 ​

卡片主体 ​

html
<div class="card">
    <div class="card-body">
        这是卡片主体的内容。
    </div>
</div>

标题、文本和链接 ​

html
<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <h6 class="card-subtitle mb-2 text-muted">卡片副标题</h6>
        <p class="card-text">卡片内容文本，支持多行显示。</p>
        <a href="#" class="card-link">链接 1</a>
        <a href="#" class="card-link">链接 2</a>
    </div>
</div>

图像 ​

html
<!-- 顶部图像 -->
<div class="card" style="width: 18rem;">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">卡片内容文本。</p>
        <a href="#" class="btn btn-primary">查看详情</a>
    </div>
</div>

<!-- 底部图像 -->
<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">卡片内容文本。</p>
        <a href="#" class="btn btn-primary">查看详情</a>
    </div>
    <img src="..." class="card-img-bottom" alt="...">
</div>

列表组 ​

html
<div class="card" style="width: 18rem;">
    <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>

页眉和页脚 ​

html
<div class="card">
    <div class="card-header">
        特色
    </div>
    <div class="card-body">
        <h5 class="card-title">特殊标题处理</h5>
        <p class="card-text">卡片内容文本。</p>
        <a href="#" class="btn btn-primary">查看详情</a>
    </div>
</div>

<div class="card">
    <div class="card-header">
        引用
    </div>
    <div class="card-body">
        <blockquote class="blockquote mb-0">
            <p>这是一段引用文本。</p>
            <footer class="blockquote-footer">来自 <cite title="来源标题">著名人物</cite></footer>
        </blockquote>
    </div>
</div>

<div class="card text-center">
    <div class="card-header">
        特色
    </div>
    <div class="card-body">
        <h5 class="card-title">特殊标题处理</h5>
        <p class="card-text">卡片内容文本。</p>
        <a href="#" class="btn btn-primary">查看详情</a>
    </div>
    <div class="card-footer text-muted">
        2 天前
    </div>
</div>

尺寸 ​

卡片默认没有固定宽度，可以使用网格系统或自定义样式：

html
<!-- 使用网格系统 -->
<div class="row">
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">特殊标题处理</h5>
                <p class="card-text">卡片内容文本。</p>
                <a href="#" class="btn btn-primary">查看详情</a>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">特殊标题处理</h5>
                <p class="card-text">卡片内容文本。</p>
                <a href="#" class="btn btn-primary">查看详情</a>
            </div>
        </div>
    </div>
</div>

<!-- 使用工具类 -->
<div class="card w-75">
    <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">75% 宽度的卡片。</p>
        <a href="#" class="btn btn-primary">按钮</a>
    </div>
</div>

<div class="card w-50">
    <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">50% 宽度的卡片。</p>
        <a href="#" class="btn btn-primary">按钮</a>
    </div>
</div>

文本对齐 ​

html
<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">特殊标题处理</h5>
        <p class="card-text">卡片内容文本。</p>
        <a href="#" class="btn btn-primary">查看详情</a>
    </div>
</div>

<div class="card text-center" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">特殊标题处理</h5>
        <p class="card-text">居中对齐的卡片内容。</p>
        <a href="#" class="btn btn-primary">查看详情</a>
    </div>
</div>

<div class="card text-end" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">特殊标题处理</h5>
        <p class="card-text">右对齐的卡片内容。</p>
        <a href="#" class="btn btn-primary">查看详情</a>
    </div>
</div>

导航 ​

在卡片页眉中添加导航：

html
<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" aria-current="true" href="#">活动</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">链接</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled">禁用</a>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <h5 class="card-title">特殊标题处理</h5>
        <p class="card-text">卡片内容文本。</p>
        <a href="#" class="btn btn-primary">查看详情</a>
    </div>
</div>

<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="#">活动</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">链接</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled">禁用</a>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <h5 class="card-title">特殊标题处理</h5>
        <p class="card-text">卡片内容文本。</p>
        <a href="#" class="btn btn-primary">查看详情</a>
    </div>
</div>

图像覆盖 ​

将图像转换为卡片背景并覆盖文本：

html
<div class="card bg-dark text-white">
    <img src="..." class="card-img" alt="...">
    <div class="card-img-overlay">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">这是一个更宽的卡片，支持下面的自然内容作为额外内容的引导。</p>
        <p class="card-text"><small>最后更新于 3 分钟前</small></p>
    </div>
</div>

水平卡片 ​

html
<div class="card mb-3" style="max-width: 540px;">
    <div class="row g-0">
        <div class="col-md-4">
            <img src="..." class="img-fluid rounded-start" alt="...">
        </div>
        <div class="col-md-8">
            <div class="card-body">
                <h5 class="card-title">卡片标题</h5>
                <p class="card-text">这是一个更宽的卡片，支持下面的自然内容。</p>
                <p class="card-text"><small class="text-muted">最后更新于 3 分钟前</small></p>
            </div>
        </div>
    </div>
</div>

卡片样式 ​

背景和颜色 ​

html
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
    <div class="card-header">页眉</div>
    <div class="card-body">
        <h5 class="card-title">Primary 卡片标题</h5>
        <p class="card-text">卡片内容文本。</p>
    </div>
</div>

<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
    <div class="card-header">页眉</div>
    <div class="card-body">
        <h5 class="card-title">Secondary 卡片标题</h5>
        <p class="card-text">卡片内容文本。</p>
    </div>
</div>

<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
    <div class="card-header">页眉</div>
    <div class="card-body">
        <h5 class="card-title">Success 卡片标题</h5>
        <p class="card-text">卡片内容文本。</p>
    </div>
</div>

<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
    <div class="card-header">页眉</div>
    <div class="card-body">
        <h5 class="card-title">Danger 卡片标题</h5>
        <p class="card-text">卡片内容文本。</p>
    </div>
</div>

<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
    <div class="card-header">页眉</div>
    <div class="card-body">
        <h5 class="card-title">Warning 卡片标题</h5>
        <p class="card-text">卡片内容文本。</p>
    </div>
</div>

<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
    <div class="card-header">页眉</div>
    <div class="card-body">
        <h5 class="card-title">Info 卡片标题</h5>
        <p class="card-text">卡片内容文本。</p>
    </div>
</div>

<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
    <div class="card-header">页眉</div>
    <div class="card-body">
        <h5 class="card-title">Light 卡片标题</h5>
        <p class="card-text">卡片内容文本。</p>
    </div>
</div>

<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
    <div class="card-header">页眉</div>
    <div class="card-body">
        <h5 class="card-title">Dark 卡片标题</h5>
        <p class="card-text">卡片内容文本。</p>
    </div>
</div>

边框 ​

html
<div class="card border-primary mb-3" style="max-width: 18rem;">
    <div class="card-header">页眉</div>
    <div class="card-body text-primary">
        <h5 class="card-title">Primary 边框卡片</h5>
        <p class="card-text">卡片内容文本。</p>
    </div>
</div>

<div class="card border-secondary mb-3" style="max-width: 18rem;">
    <div class="card-header">页眉</div>
    <div class="card-body text-secondary">
        <h5 class="card-title">Secondary 边框卡片</h5>
        <p class="card-text">卡片内容文本。</p>
    </div>
</div>

卡片布局 ​

卡片组 ​

html
<div class="card-group">
    <div class="card">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">卡片标题</h5>
            <p class="card-text">这是一个更宽的卡片。</p>
            <p class="card-text"><small class="text-muted">最后更新于 3 分钟前</small></p>
        </div>
    </div>
    <div class="card">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">卡片标题</h5>
            <p class="card-text">这张卡片的内容较短。</p>
            <p class="card-text"><small class="text-muted">最后更新于 3 分钟前</small></p>
        </div>
    </div>
    <div class="card">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">卡片标题</h5>
            <p class="card-text">这是一个更宽的卡片。</p>
            <p class="card-text"><small class="text-muted">最后更新于 3 分钟前</small></p>
        </div>
    </div>
</div>

网格卡片 ​

html
<div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
        <div class="card">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">卡片标题</h5>
                <p class="card-text">这是一个更长的卡片。</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">卡片标题</h5>
                <p class="card-text">这是一个更长的卡片。</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">卡片标题</h5>
                <p class="card-text">这是一个更长的卡片。</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">卡片标题</h5>
                <p class="card-text">这是一个更长的卡片。</p>
            </div>
        </div>
    </div>
</div>

实际示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 卡片示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-5">
        <h1>Bootstrap 卡片示例</h1>
        
        <!-- 产品卡片 -->
        <h2>产品卡片</h2>
        <div class="row row-cols-1 row-cols-md-3 g-4 mb-5">
            <div class="col">
                <div class="card h-100">
                    <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="产品1">
                    <div class="card-body">
                        <h5 class="card-title">产品名称 1</h5>
                        <p class="card-text">这是产品的简要描述信息。</p>
                        <p class="text-primary fw-bold">¥99.00</p>
                    </div>
                    <div class="card-footer">
                        <button class="btn btn-primary w-100">加入购物车</button>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="产品2">
                    <div class="card-body">
                        <h5 class="card-title">产品名称 2</h5>
                        <p class="card-text">这是产品的简要描述信息。</p>
                        <p class="text-primary fw-bold">¥149.00</p>
                    </div>
                    <div class="card-footer">
                        <button class="btn btn-primary w-100">加入购物车</button>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="产品3">
                    <div class="card-body">
                        <h5 class="card-title">产品名称 3</h5>
                        <p class="card-text">这是产品的简要描述信息。</p>
                        <p class="text-primary fw-bold">¥199.00</p>
                    </div>
                    <div class="card-footer">
                        <button class="btn btn-primary w-100">加入购物车</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 用户资料卡片 -->
        <h2>用户资料卡片</h2>
        <div class="row mb-5">
            <div class="col-md-4">
                <div class="card">
                    <img src="https://via.placeholder.com/300x300" class="card-img-top" alt="用户头像">
                    <div class="card-body text-center">
                        <h5 class="card-title">张三</h5>
                        <p class="card-text text-muted">前端开发工程师</p>
                        <p class="card-text">
                            <small>北京 · 5年经验</small>
                        </p>
                        <div class="d-grid gap-2">
                            <button class="btn btn-primary">关注</button>
                            <button class="btn btn-outline-secondary">发消息</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 文章卡片 -->
        <h2>文章卡片</h2>
        <div class="card mb-5">
            <div class="row g-0">
                <div class="col-md-4">
                    <img src="https://via.placeholder.com/400x300" class="img-fluid rounded-start" alt="文章封面">
                </div>
                <div class="col-md-8">
                    <div class="card-body">
                        <h5 class="card-title">文章标题</h5>
                        <p class="card-text">这是文章的摘要内容，简要介绍文章的主要内容和要点。</p>
                        <p class="card-text">
                            <small class="text-muted">发布于 2024-01-15 · 阅读时间 5 分钟</small>
                        </p>
                        <a href="#" class="btn btn-primary">阅读全文</a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 统计卡片 -->
        <h2>统计卡片</h2>
        <div class="row mb-5">
            <div class="col-md-3">
                <div class="card text-white bg-primary">
                    <div class="card-body">
                        <h5 class="card-title">总用户数</h5>
                        <p class="card-text display-4">1,234</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-white bg-success">
                    <div class="card-body">
                        <h5 class="card-title">今日订单</h5>
                        <p class="card-text display-4">56</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-white bg-warning">
                    <div class="card-body">
                        <h5 class="card-title">待处理</h5>
                        <p class="card-text display-4">12</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-white bg-danger">
                    <div class="card-body">
                        <h5 class="card-title">异常订单</h5>
                        <p class="card-text display-4">3</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

最佳实践 ​

1. 保持一致性 ​

html
<!-- 在同一页面使用相同的卡片样式 -->
<div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
        <div class="card h-100">
            <!-- 内容 -->
        </div>
    </div>
    <!-- 更多卡片... -->
</div>

2. 使用合适的图像比例 ​

html
<!-- 保持图像比例一致 -->
<div class="card">
    <img src="..." class="card-img-top" alt="..." style="aspect-ratio: 16/9; object-fit: cover;">
    <div class="card-body">
        <!-- 内容 -->
    </div>
</div>

3. 响应式设计 ​

html
<!-- 使用响应式网格 -->
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
    <div class="col">
        <div class="card">
            <!-- 内容 -->
        </div>
    </div>
</div>

下一步 ​

现在你已经掌握了 Bootstrap 卡片的使用方法，接下来我们将学习下拉菜单。

下一章：Bootstrap 下拉菜单 →