Module 02 · Intermediate BootstrapBootstrap 进阶

Cards and Grid System in BootstrapBootstrap 卡片与网格系统指南

Coursera ↗

学习目标

观看本视频后，您将能够：

描述 Bootstrap 网格系统 的关键特点。
解释与 Bootstrap 卡片 相关的核心概念。
了解如何利用 Bootstrap 提升卡片和网格的功能和视觉效果。

Bootstrap 网格系统概述

1 什么是网格系统？

核心结构：基于 12列布局，允许开发者将页面内容划分为行（rows）和列（columns）。
灵活性：可通过预定义的 CSS 类 创建响应式布局，适配不同屏幕尺寸。
关键类：
- col-xs、col-sm、col-md、col-lg：定义在不同屏幕尺寸下的列宽。
优势：
- 自动调整和重新排列布局，提供最佳的用户观看体验。

Bootstrap 卡片概述

1 什么是卡片？

定义：卡片是一个 小型矩形容器，用于展示特定信息或功能。
常见用途：
- 展示文章、产品信息或用户资料。
设计特点：
- 模块化设计，内容清晰易读。
- 提供一致的视觉层次，改善用户体验。

如何创建Bootstrap卡片？

1 基础卡片结构

创建包含 card 类的 <div> 元素：

<div class="card">
    <img src="image.jpg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">标题</h5>
        <p class="card-text">主要内容</p>
    </div>
</div>

关键组件：

标题：card-title
文本：card-text
图片：card-img-top

2 卡片布局选项

布局类型	描述
叠放卡片	卡片垂直堆叠，适用于单列布局。
卡片组（Deck）	卡片水平排列，保持等高，适合展示关联内容。
卡片列（Columns）	类似报纸或杂志布局，适合展示大量卡片，充分利用空间。

如何自定义卡片外观？

1 更改颜色和边框

使用 bg-primary、border-secondary 等类设置背景和边框样式。

<div class="card bg-primary text-white">
    <div class="card-body">
        <h5 class="card-title">蓝色卡片</h5>
    </div>
</div>

2 添加按钮或徽章

在卡片中添加按钮和徽章：

<div class="card">
    <div class="card-body">
        <h5 class="card-title">标题</h5>
        <a href="#" class="btn btn-primary">按钮</a>
    </div>
</div>

3 响应式卡片

应用网格类调整卡片布局：

<div class="row">
    <div class="col-md-4">
        <div class="card">卡片内容</div>
    </div>
    <div class="col-md-4">
        <div class="card">卡片内容</div>
    </div>
</div>

高级卡片功能

1 卡片组

用于将相关卡片分组：

<div class="card-group">
    <div class="card">卡片 1</div>
    <div class="card">卡片 2</div>
</div>

2 卡片轮播

使用轮播图展示多张卡片：

<div id="carouselExample" class="carousel slide">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="card">卡片 1</div>
        </div>
        <div class="carousel-item">
            <div class="card">卡片 2</div>
        </div>
    </div>
</div>

3 动态交互

使用 JavaScript 插件（如工具提示、模态框）增强交互性。

最佳实践

内容简洁：

确保卡片内容清晰易读，避免冗长。

视觉吸引力：

使用高质量图片或图标吸引用户注意。

一致的样式：

保持卡片间的一致性，提升整体设计效果。

响应式设计：

利用网格系统优化卡片在不同屏幕上的布局。

性能优化：

减少不必要的动画或复杂交互，提升加载速度。

现实应用场景

应用场景	示例
电商网站	使用卡片展示产品信息，包括图片、价格和购买按钮。
新闻网站	使用卡片布局展示文章标题、摘要和发布日期。
社交媒体平台	使用卡片显示用户资料或帖子内容。

总结

Bootstrap 网格系统 提供灵活且响应式的布局结构，适配不同屏幕尺寸。
卡片是一种常用的小型容器，用于展示精简内容，提升网页的视觉效果和用户体验。
提供多种布局选项（如堆叠卡片、卡片组、卡片列），适应不同设计需求。
通过 组件与插件，进一步提升卡片的功能性和视觉吸引力。

🎉 恭喜完成学习！快将卡片与网格系统运用到您的项目中，创造专业且响应式的网页设计吧！