Bootstrap4 卡片组件

卡片组件的重要性

卡片是Bootstrap 4中最重要的组件之一，用于：

展示各种类型的内容（文本、图片、链接等）
创建灵活的布局和内容容器
替代Bootstrap 3中的面板、缩略图和wells
提供一致的视觉设计

基本卡片

Bootstrap 4 提供了简单易用的卡片组件，使用 .card 类创建卡片容器。

基本卡片示例

简单卡片

卡片标题

卡片副标题

这是一个简单卡片的示例文本。卡片是Bootstrap 4中用于显示内容的灵活容器。

卡片链接另一个链接

带图片的卡片

这是一个带有图片的卡片示例。图片位于卡片顶部。

了解更多

                                    
                                        <!-- 简单卡片 -->

                                        <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>

                                        <!-- 带图片的卡片 -->

                                        <div class="card" style="width: 18rem;">

                                          <img src="image.jpg" 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>

卡片内容类型

卡片可以包含多种类型的内容，包括标题、文本、图片、列表组等。

卡片内容类型示例

带列表组的卡片

功能列表

功能一
功能二
功能三

了解更多

带页眉页脚的卡片

特色

特别优惠

享受我们的特别优惠，限时有效。

立即购买

2天前更新

图片覆盖卡片

图片覆盖标题

这是一个图片覆盖卡片的示例文本。

最后更新 3 分钟前

                                    
                                        <!-- 带列表组的卡片 -->

                                        <div class="card" style="width: 18rem;">

                                          <div class="card-header">

                                            功能列表

                                          </div>

                                          <ul class="list-group list-group-flush">

                                            <li class="list-group-item">功能一</li>

                                            <li class="list-group-item">功能二</li>

                                            <li class="list-group-item">功能三</li>

                                          </ul>

                                          <div class="card-body">

                                            <a href="#" class="card-link">了解更多</a>

                                          </div>

                                        </div>

                                        <!-- 图片覆盖卡片 -->

                                        <div class="card text-white" style="width: 18rem;">

                                          <img src="image.jpg" class="card-img" alt="卡片图片">

                                          <div class="card-img-overlay">

                                            <h5 class="card-title">图片覆盖标题</h5>

                                            <p class="card-text">这是一个图片覆盖卡片的示例文本。</p>

                                            <p class="card-text">最后更新 3 分钟前</p>

                                          </div>

                                        </div>

卡片样式

Bootstrap 4 提供了多种卡片样式，包括背景颜色、边框颜色等。

卡片样式示例

Header