Bootstrap 卡片是组织和呈现 Web 项目中内容的重要工具。它们提供了一种简单而通用的方法来创建具有视觉吸引力的布局，并可无缝调整以适应不同的设备。在本文结束时，您将了解如何在项目中有效地使用 Bootstrap 卡片组件。
为什么选择 Bootstrap？
Bootstrap 仍然是构建响应式和移动优先的 Web 布局最受欢迎的框架之一。其主要优点包括：
快速简便的响应式设计：您只需要基本的 HTML 和 CSS 知识即可创建令人惊叹的布局。
移动优先方法：Bootstrap 从头开始优先考虑移动响应能力。
浏览器兼容性：它可以在所有主流浏览器上完美运行。
Flexbox 驱动的网格系统：简化对齐和间距任务。
广泛的组件：各种可重复使用的元素，如按钮、模式和卡片。
Bootstrap 的最新版本引入了重大改进，例如对 Flexbox 和多功能卡片组件的支持，它取代了面板和缩略图等旧组件。
关键要点
Bootstrap 卡片是用于创建有组织、响应式布局的多功能工具。它们允许您在时尚的容器内显示各种类型的内容，如文本、图像和多媒体。以下是一些使它们对开发人员不可或缺的关键功能：
易于使用：您可以通过组合诸如定义内容区域的 div class=”card-body” 和包含文本信息的 p class=”card-text” 等元素来快速创建卡片。
支持多种内容类型：添加卡片标题、图像或列表组以有效地构建您的内容。
响应能力：使用 Bootstrap 的网格和断点，卡片可以适应任何设备尺寸——从移动设备到台式机。
可定制的设计：实用程序类可让您调整外观，包括颜色、边框和文本对齐。
高级布局：卡片组、卡片组和砌体布局等功能可实现无缝对齐和组织。
什么是 Bootstrap Card 组件？
Bootstrap 引入了一种多功能的现代 UI 组件，称为卡片，它可作为显示各种类型内容的灵活而时尚的容器。使用最少的默认样式，Bootstrap 卡片可以使用其广泛的实用程序类轻松增强。
此组件建立在 Flexbox 之上，可实现精确的对齐和间距。开发人员可以使用Bootstrap 的间距实用程序来有效控制边距和填充。
卡片可以方便地容纳不同类型的内容，如标题、副标题、正文和图片等，以及可选的页眉和页脚部分。您还可以根据用途添加不同的部分（卡片块）来构建不同类型的卡片。
关键的 Bootstrap 卡片类
以下是主要的 Bootstrap 卡片实用程序类及其用途：
card：定义卡片组件的主容器类。
card-body：创建卡片内的主要内容区域。
card-title：设置卡片标题的样式，通常与 <h5> 等标题标签一起使用。
card-text：用于卡片内的标准文本内容。
card-header：在卡片顶部添加一个样式化的标题部分。
card-footer：在卡片底部添加一个样式化的页脚部分。
card-img-top：将图像放置在卡片顶部。
card-img-bottom：将图像放置在卡片底部。
list-group：在卡片内创建列表组。
list-group-item：设置列表组中各个项目的样式。
card-group：将多张卡片以相同的宽度和高度组合在一起。
card-deck：将多张卡片与间距对齐，在 Bootstrap 5 中已弃用。
text-*：用于文本颜色样式的实用程序类（例如，text-primary、text-success）。
bg-*：用于背景颜色样式的实用程序类（例如，bg-light，bg-dark）。
这个简明的概述列出了用于构建和定制 Bootstrap 卡的基本类。
如何在项目中包含 Bootstrap
你可以通过从内容分发网络 (CDN) 中包含 Bootstrap 或从getbootstrap.com下载必要的文件，轻松地在项目中开始使用 Bootstrap
在此示例中，我们将演示如何使用 CDN 设置一个简单的 HTML 页面来包含 Bootstrap 卡片组件。此方法允许您快速创建和设计卡片，而无需进行其他配置。
按照以下步骤创建 index.html 文件并包含 Bootstrap 5.3.3：
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <title>Bootstrap Card Example</title> </head> <body> <div class="container mt-5"> <div class="card" style="width: 18rem;"> <div class="card-header bg-primary text-white"> Example Card Header </div> <div class="card-body"> <h5 class="card-title">Example Card Title</h5> <p class="card-text">This is an example card created using Bootstrap 5. It includes styling for the header, title, and text.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <!-- Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html>
我们通过 CDN 包含了 Bootstrap 文件，确保始终提供最新的框架版本。我们添加了容器分区作为内容的基础，让您可以立即开始使用 Bootstrap 卡片组件进行构建。
创建基本 Bootstrap 卡片
要创建一张简单的卡片，请按照以下步骤操作：
使用带有<div>标签的.card类来创建外部容器。
将.card-body类添加到内部<div>标签来定义卡片主体。
使用带有标题标签（<h5>和<h6> ）的.card-title和.card-subtitle类来添加卡片标题和副标题。
使用带有<p>标签的.card-text 类来包含文本内容。
使用 .card -img-top类和 < img>标签在卡片顶部添加图像。
这些是基本卡片布局的基本构成要素。以下是示例：
<div class="card" style="width: 30rem;"> <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6> <p class="card-text">This is a simple card example created using Bootstrap 5.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div>
此代码生成一个带有图像、标题、副标题、文本和按钮的卡片，它将调整到其父容器的宽度，除非使用 style=”width: 30rem;” 属性另行指定。
这是结果的截图：
Bootstrap 中的横向卡片
横向卡片允许您以并排布局显示内容，非常适合紧凑且有条理的设计。您可以使用网格类创建它们以实现响应行为，确保卡片在所有设备上都看起来很棒。
<div class="card mb-3" style="max-width: 540px;"> <div class="row g-0"> <div class="col-md-4"> <img src="https://picsum.photos/id/0/800" class="img-fluid rounded-start" alt="Image"> </div> <div class="col-md-8"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">This is a card with text beside an image, perfect for showcasing content side-by-side. </p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div>
这是结果的截图：
在 Bootstrap 卡片中列出群组
Bootstrap 允许您通过添加列表组来增强卡片，从而更轻松地显示结构化和有组织的内容。list -group和list-group-flush类与卡片无缝集成，使开发人员能够创建具有视觉吸引力的列表。
以下是创建带有刷新列表组的卡片的方法：
<div class="card" style="width: 18rem;"> <ul class="list-group list-group-flush"> <li class="list-group-item">An item</li> <li class="list-group-item">A second item</li> <li class="list-group-item">A third item</li> </ul> </div>
增强卡片功能
添加页眉和页脚
您可以使用.card-header和.card-footer类添加页眉和页脚来增强卡片的效果。以下是示例：
<div class="row"> <div class="col-sm-3"> <div class="card"> <div class="card-header"> This is a header </div> <img class="card-img-top" src="https://source.unsplash.com/daily" alt="Card image top"> <div class="card-body"> <h3 class="card-title">Card title</h3> <h4 class="card-subtitle">Card subtitle</h4> <p class="card-text">This is a simple Card example</p> </div> <div class="card-footer"> This is a footer </div> </div> </div> </div>
这是结果的截图：
此布局通过样式化的页眉和页脚为卡片添加了更多内容。
在图像上叠加文本
使用.card-img-overlay将内容叠加在图片上。只需将card-body类替换为card-img-overlay类，我们就可以将图片用作叠加层：
<div class="card" style="width: 30rem;"> <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image"> <div class="card-img-overlay"> <h5 class="card-title">Card Title</h5> <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6> <p class="card-text">This is a simple card example created using Bootstrap 5.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div>
这是结果的截图：
添加卡片图片
使用.card-img-top或.card-img-bottom在卡片顶部或底部添加图像。
<div class="card" style="width: 18rem;"> <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top"> <div class="card-body"> <p class="card-text">This card has an image cap at both the top and bottom.</p> </div> <img src="https://picsum.photos/id/0/800" class="card-img-bottom" alt="Card image bottom"> </div>
这是结果的截图：
使用 Bootstrap 卡片进行响应式设计
响应式设计可确保您的卡片在所有设备上都看起来很棒。使用 Bootstrap 网格系统来控制布局。
示例代码
<div class="row row-cols-1 row-cols-md-3 g-4"> <div class="col"> <div class="card"> <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6> <p class="card-text">This is a simple card example created using Bootstrap 5.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col"> <div class="card"> <img src="https://picsum.photos/id/85/800" class="card-img-top" alt="Card image"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6> <p class="card-text">This is a simple card example created using Bootstrap 5.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div>
这是结果的截图：
调整 Bootstrap 卡片的高度和宽度
要为卡片设置特定宽度，您可以使用 style 属性或 Bootstrap 的实用程序类。以下是示例：
<div class="card" style="width: 10rem;"> <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">This is a simple card example with a custom width.</p> </div> </div>
这是结果的截图：
此卡片的宽度限制为10rem，可以根据您的设计需要进行调整。
通常情况下，卡片的高度会进行调整以垂直适应卡片的内容，但我们也可以使用自定义 CSS（例如，style=” height: 10rem;”）或 Bootstrap 的大小调整实用程序（例如，<div class=”card h-200″>）来控制它。
请注意，最新版本的 Bootstrap 已将 rem单位从px单位切换为rem单位，因为rem是可扩展的测量单位 — 因此它更适合用户设置，使文本更易于访问。结果是页面中的所有元素都将随屏幕尺寸缩放。
使用网格系统控制宽度
控制 Bootstrap 卡片组件宽度的另一种选择是使用Bootstrap 网格（行和列）：
<div class="row"> <div class="col-md-4"> <div class="card"> <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">This is an example card using the grid system.</p> </div> </div> </div> <div class="col-md-4"> <div class="card"> <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top"> <div class="card-body"> <h5 class="card-title">Another Card</h5> <p class="card-text">This card sits next to the first one.</p> </div> </div> </div> </div>
这是结果的截图：
在此示例中，两张卡片并排显示，每张卡片在中型和大型屏幕上占据四列（col-md-4）。
卡片样式
Bootstrap 提供了各种自定义卡片的选项，包括背景颜色、边框和文本样式。
背景和文本颜色
您可以使用实用程序类（例如.bg-primary或.text-white ）更改卡片的背景和文本颜色。
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;"> <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image"> <div class="card-body"> <h5 class="card-title">Primary Card Title</h5> <p class="card-text">Quick text to demonstrate card styling.</p> </div> </div>
边框颜色
使用.border-{color}类自定义卡片的边框颜色。卡片内的文本也可以使用.text-{color}进行样式设置。
<div class="card border-success mb-3" style="max-width: 18rem;"> <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image"> <div class="card-body text-success"> <h5 class="card-title">Success Card Title</h5> <p class="card-text">Simple content styled with a border.</p> </div> </div>
透明的页眉和页脚
使用.bg-transparent删除页眉和页脚的背景颜色并自定义其边框。
<div class="card border-info mb-3" style="max-width: 18rem;"> <div class="card-header bg-transparent border-info">Header</div> <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image"> <div class="card-body text-info"> <h5 class="card-title">Info Card Title</h5> <p class="card-text">Example content inside a card.</p> </div> <div class="card-footer bg-transparent border-info">Footer</div> </div>
混合背景和边框
结合背景和边框实用程序以获得独特的风格。
<div class="card bg-light border-dark mb-3" style="max-width: 18rem;"> <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image"> <div class="card-body text-dark"> <h5 class="card-title">Mixed Style Card</h5> <p class="card-text">Custom card combining background and border.</p> </div> </div>
以下是在单行布局中展示四种不同卡片样式的结果：
Bootstrap 允许您创建具有不同标题样式的卡片
主要部分的“标题主卡标题”
“header light card title” 适合精妙的设计
带有支持文本的卡片的“标题辅助卡片标题”。
“header dark card title” 带来大胆外观
“标题成功卡片标题”用于积极信息
“标题危险卡标题”用于警告。
通过这些多功能的卡片样式选项，您还可以创建独特的设计，如“标题警告卡片标题”、“标题信息卡片标题”，以强调关键信息或无缝地引起对特定细节的注意。
添加导航
Bootstrap 卡片组件的另一个不错的功能是可以向标题部分添加高级导航模式，例如选项卡和导航丸。
向卡片标题添加标签
要在卡片的标题中包含标签，请在无序列表 (<ul>) 上使用.nav-tabs和.card-header-tabs类。以下是示例：
<div class="card" style="width: 30rem;"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Tab 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Tab 2</a> </li> </ul> </div> <div class="card-body"> <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top"> <h5 class="card-title pt-3">Card with Tabs</h5> <p class="card-text">This card includes a tabbed navigation element in its header.</p> </div> </div>
这是结果的截图：
好啦，我们先介绍到这里，由于文章比较长，我们后面继续介绍第二篇：介绍下前端开发中用到的 Bootstrap 完整的卡片组件第二篇。大家期待下吧。
网友评论文明上网理性发言 已有0人参与
发表评论: