上篇以文章，我们介绍了“介绍下前端开发中用到的 Bootstrap 完整的卡片组件第一篇”我们介绍继续往下介绍。
在卡片标题中添加元素
以同样的方式，我们可以通过在 <ul> 列表标签上将.nav-tabs替换为.nav-pills、将.card-header-tabs替换为 .card -header-pill来添加导航丸：
<div class="card" style="width: 30rem;"> <div class="card-header"> <ul class="nav nav-pills card-header-pill"> <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 pill-style navigation element in its header.</p> </div> </div>
这是结果的截图：
向 Bootstrap 卡片组件添加链接
我们可以使用带有.card-link类的 <a> 标签在卡片内快速添加链接：
<div class="card"> <div class="card-body"> <h3 class="card-title">Adding Links</h3> <p class="card-text">These are simple links</p> <a href="#" class="card-link">Link 1</a> <a href="#" class="card-link">Link 2</a> </div> <div class="card-footer"> This is a footer </div> </div>
这是结果的截图：
在 Bootstrap 卡片组件中对齐和转换文本
Bootstrap 提供了文本实用程序类来对齐和转换卡片组件内的文本。对于文本对齐，您可以使用以下类：
.text-start 用于卡片文本左对齐
.text-end 用于卡片文本右对齐
.text-center 用于卡片文本居中对齐
.text-justify 用于卡片文本对齐（适用于旧版本，在 Bootstrap 5 中已弃用）
.text-nowrap 防止文本换行
您还可以使用以下类转换文本：
.text-lowercase 将文本转换为小写
.text-uppercase 将文本转换为大写
.text-capitalize 将每个单词的首字母大写
自定义 Bootstrap 卡片组件背景、前景色和边框颜色
您可以使用文本和背景实用程序类自定义 Bootstrap 卡片的背景、文本和边框颜色。以下是一些示例：
文本颜色：使用 .text-primary、.text-success、.text-danger、.text-warning、.text-info、.text-light、.text-dark 或 .text-white 来更改文本颜色。
背景颜色：使用 .bg-primary、.bg-success、.bg-danger、.bg-warning、.bg-info、.bg-light、.bg-dark 或 .bg-white 来更改背景颜色。
边框颜色：使用 .border-primary、.border-success、.border-danger、.border-warning、.border-info、.border-light、.border-dark 或 .border-white 来设置边框颜色。
使用 Bootstrap 卡片组件创建高级布局
Bootstrap 卡片是一种多功能 UI 组件，广泛用于现代网页布局，以将混合内容类型（如文本和图像）显示为单个实体或分组集合。
卡片对于响应式设计特别有用，并且通常在诸如Masonry 布局（也称为类似 Pinterest 的布局）之类的布局中实现。
卡片可用于创建图库、博客文章或电子商务产品的布局。Google 和 Facebook 等主要平台广泛利用卡片来组织和显示其 Web 应用程序上的内容。
以前，构建此类高级布局需要对 CSS 和 HTML 有深入的了解。但是，借助 Bootstrap 的最新功能，开发人员可以轻松创建响应迅速且外观精美的卡片式布局。
.card-group、.card-deck 和 .card-columns 等类简化了通过一致的样式和对齐来组织卡片的过程。
分组/嵌套卡
Bootstrap 中的卡片组是一种有效的方式，将多个卡片组件显示为具有统一宽度和高度的单个附加实体。
此布局使用 display: flex; 属性实现，确保所有卡片完美对齐。它对于响应式设计和现代网页布局特别有用，因为一致的卡片尺寸至关重要。
要创建一组卡片，请使用.card-group类作为包含单个卡片的包装器 div。
以下是展示一组三张卡片的示例：
<div class="card-group"> <div class="card text-white"> <img class="card-img-top" src="https://source.unsplash.com/featured/" alt="Card image top"> <div class="card-img-overlay"> <div class="card-group"> <div class="card text-white"> <img class="card-img-top" src="https://picsum.photos/id/475/800" alt="Card image top"> <div class="card-img-overlay"> <h3 class="card-title">Card Title 1</h3> <h4 class="card-subtitle">Card Subtitle</h4> <p class="card-text">This is an example of a grouped card.</p> </div> </div> <div class="card text-white"> <img class="card-img-top" src="https://picsum.photos/id/58/800" alt="Card image top"> <div class="card-img-overlay"> <h3 class="card-title">Card Title 2</h3> <h4 class="card-subtitle">Card Subtitle</h4> <p class="card-text">Grouped cards ensure uniform styling.</p> </div> </div> <div class="card text-white"> <img class="card-img-top" src="https://picsum.photos/id/75/800" alt="Card image top"> <div class="card-img-overlay"> <h3 class="card-title">Card Title 3</h3> <h4 class="card-subtitle">Card Subtitle</h4> <p class="card-text">They are responsive and visually appealing.</p> </div> </div> </div>
这是结果的截图：
可以看出，三张卡片连在一起，且宽度和高度相同。
卡牌组
在 Bootstrap 的早期版本中，.card-deck用于创建卡片布局，其中卡片具有相同的宽度和高度，但彼此不相连。然而，在 Bootstrap 5 中，建议使用网格系统来实现此目的。这种方法提供了更大的灵活性和响应能力。
要实现类似的布局，请使用 .row 类和 .col 来控制卡片间距和对齐方式。以下是示例：
<div class="row row-cols-1 row-cols-md-3 g-4">
我们可以看到，卡片大小相同，并且彼此之间有一定的余量。
卡片列
在 Bootstrap 的早期版本中，.card-columns 类用于创建类似 Masonry 的布局，其中卡片从上到下、从左到右添加。然而，在 Bootstrap 5 中，此功能已被删除。
为了实现类似的布局，您可以将网格系统与 CSS Masonry 布局或 JavaScript 插件（如 Masonry.js）结合使用，以实现更复杂的行为。
优化性能
高效的性能对于创建快速加载和无缝适应的 Bootstrap 卡片至关重要。以下是集成 Bootstrap 卡片组件（如 div 类卡片主体和 h5 类卡片标题）时增强性能的实用技巧。
延迟加载图像
延迟加载会延迟加载图像，直到它们在视口中可见，从而优化页面速度。使用带有 card img top 的 loading=”lazy” 属性可获得有效的解决方案。
<img src="https://picsum.photos/300/200" loading="lazy" class="card-img-top" alt="Lazy Loaded Image">
优化图像大小
调整图像大小以适应其容器尺寸，确保更快的加载时间。使用 img-fluid 和 div class card img 来自动缩放图像。
<img src="https://picsum.photos/300/200" class="card-img-top img-fluid" alt="Resized Image">
无论父元素的宽度如何，这都可以确保卡片图像顶部完全适合。
压缩 CSS 和 JavaScript
压缩样式和脚本以减少文件大小。合并多个 div 类卡片标题元素并最小化自定义 CSS 以加快渲染速度。
优化示例
不要应用这样的重复或自定义样式：
<div class="card" style="border: 1px solid blue; text-align: center; padding: 20px;"> <div class="card-body"> <h5 style="font-size: 1.5rem; font-weight: bold;">Custom CSS Header</h5> <p style="font-size: 1rem; color: #555;">This card uses inline styles, which are inefficient.</p> </div> </div>
使用 Bootstrap 的实用程序类来获得更清晰、更易于维护的结构：
<div class="card border-primary text-center p-3"> <div class="card-body"> <h5 class="card-title text-uppercase fw-bold">Utility Classes Header</h5> <p class="card-text text-secondary">Using Bootstrap's utility classes ensures better performance and maintainability.</p> </div> </div>
使用 SVG 作为图标
SVG 轻量且可扩展，非常适合用作卡片标题和装饰元素。它们加载速度更快，并且在各种设备上都能保持清晰度。
例子
<div class="card text-center"> <div class="card-header bg-success text-white"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi bi-check-circle" fill="currentColor"> <path d="M16 8.98l.686-.688L7.733.011 6.023 1.72 14.98 10.676z"/> </svg> <h5 class="card-title">SVG Optimized Header</h5> </div> <div class="card-body"> <p class="card-text">SVGs provide clear visuals with minimal overhead.</p> </div> </div>
预加载和预取资源
使用 rel=”preload” 加载关键资源，使用 rel=”prefetch” 预测未来需求。这对于重度卡片内容尤其有用。
例子
<link rel="preload" href="https://example.com/styles.css" as="style"> <link rel="prefetch" href="https://example.com/next-page.html">
降低 DOM 复杂性
避免使用过多嵌套的 div 类卡片结构，因为这可能会降低渲染速度。简化布局以优化性能。
优化前
<div class="card"> <div class="card-body"> <div> <div> <p>Nested Content</p> </div> </div> </div> </div>
优化后
<div class="card"> <div class="card-body"> <p class="card-text">Optimized Content</p> </div> </div>
优化字体
预加载自定义字体或使用系统字体以减少延迟。简洁的 div 类卡片主体可以进一步凸显卡片的视觉吸引力。
例子
<div class="card"> <div class="card-body" style="font-family: 'Roboto', sans-serif;"> <h5 class="card-title">Optimized Font</h5> <p class="card-text">Preloading ensures faster rendering for card content.</p> </div> </div>
结论
Bootstrap 卡片组件是 Bootstrap 框架的一个强大补充，它允许开发人员创建现代风格的网页，而无需深入了解 CSS 的工作原理。您可以通过添加 CSS 类来添加卡片布局来表示图片库、仪表板小部件，以及显示电子商务网站的博客文章或产品。
由于新的特性和组件，Bootstrap 继续成为一个可供所有人使用的强大的 CSS 框架，特别是对于那些需要创建自己的响应式和现代风格布局但缺乏足够时间和预算或缺乏编写自定义代码所需的 CSS 深度知识的开发人员。
掌握 Bootstrap 卡片组件以实现响应式设计的常见问题解答
什么是 Bootstrap Card 组件？
Bootstrap 卡片组件是一种现代而灵活的内容容器，可让您为文本、图片和多媒体创建具有视觉吸引力的布局。卡片是 Bootstrap 框架的一部分，旨在帮助开发人员以响应式和适合移动设备的方式组织信息。
如何创建 Bootstrap 卡片组件？
创建 Bootstrap 卡片组件非常简单。您可以使用带有卡片类的 div 作为容器，并在其中添加标题、文本和图像等内容。以下是示例：
<div class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">This is an example of a Bootstrap card body.</p> </div> </div>
如何在 Bootstrap 中设置卡片的高度和宽度？
您可以使用内联样式或 Bootstrap 的实用程序类自定义 Bootstrap 卡片的宽度和高度。例如：
<div class="card" style="width: 20rem; height: 15rem;"> <div class="card-body"> <h5 class="card-title">Custom Card</h5> <p class="card-text">This card has a custom height and width.</p> </div> </div>
或者，您也可以使用卡片高度引导实用程序类（例如 w-50 或 h-100）来响应地设置卡片尺寸。
如何在 Bootstrap 中调整卡片大小？
要调整卡片大小，您可以使用卡片大小引导实用程序类，例如 w-25、w-50 或 w-75 来调整宽度，h-auto 或 h-100 来调整高度。这可确保您的卡片适应布局，而无需添加额外的 CSS。以下是示例：
<div class="card w-50"> <div class="card-body"> <h5 class="card-title">Responsive Card</h5> <p class="card-text">This card resizes based on its parent container.</p> </div> </div>
如何在 Bootstrap 中创建卡片标题？
要向卡片添加标题，请使用带有 class=”card-title” 的 <h5> 元素。此类可确保标题的样式与 Bootstrap 的设计标准一致。
<div class="card"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">This is an example of a Bootstrap card with a title.</p> </div> </div>
如何在 Bootstrap 中使用 card-body 类？
card-body 类是一个实用程序类，它提供填充并组织 Bootstrap 卡片中的内容。它是卡片内容的主要容器。
<div class="card"> <div class="card-body"> <h5 class="card-title">Using card-body</h5> <p class="card-text">This is the content inside the card-body section.</p> </div> </div>
如何修复 Bootstrap 卡片尺寸？
要固定卡片的尺寸，请使用内联样式或实用程序类应用特定的宽度和高度。例如：
<div class="card" style="width: 250px; height: 300px;"> <img src="https://picsum.photos/250/150" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Fixed Size Card</h5> <p class="card-text">This card has a fixed size for consistency.</p> </div> </div>
如何在 Bootstrap 中调整卡片尺寸？
可以使用 Bootstrap 的实用程序类或 CSS Grid 动态调整卡片尺寸。以下是响应式卡片尺寸的示例：
<div class="row row-cols-1 row-cols-md-3 g-4"> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card 1</h5> <p class="card-text">Adjustable size based on parent grid.</p> </div> </div> </div> </div>
我可以自定义 Bootstrap 卡片背景和边框吗？
是的，Bootstrap 提供了广泛的自定义实用程序类。使用 bg-primary 来设置背景颜色，使用 border-success 来设置边框样式。示例：
<div class="card bg-info border-danger"> <div class="card-body"> <h5 class="card-title">Custom Background</h5> <p class="card-text">This card has a custom background and border.</p> </div> </div>
如何在卡片中使用图像？
Bootstrap 使用 card-img-top 或 card-img-bottom 支持卡片内的图像。示例：
<div class="card"> <img src="https://picsum.photos/300/200" class="card-img-top" alt="Card image"> <div class="card-body"> <h5 class="card-title">Card with Image</h5> <p class="card-text">This card includes a top image.</p> </div> </div>
如何在 Bootstrap 中使用 div 类卡片主体？
Bootstrap 中的 div 类卡片主体定义卡片内的主要内容区域。它提供填充并确保卡片内文本、图像和其他元素的间距一致。
<div class="card"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">This is some text within a card body.</p> </div> </div>
Bootstrap 中的 p 类卡片文本是什么？
Bootstrap 中的 p 类卡片文本用于设置卡片主体内的文本内容的样式。它应用默认的排版样式，使文本看起来干净、专业。
<div class="card"> <div class="card-body"> <p class="card-text">This is an example of styled text inside a Bootstrap card.</p> </div> </div>
如何在 Bootstrap 中增加卡片尺寸？
要增加卡片尺寸，请使用 w-100 调整其宽度和高度以获得全宽或使用样式指定尺寸。示例：
<div class="card w-75"> <div class="card-body"> <h5 class="card-title">Large Card</h5> <p class="card-text">This card has an increased size for visibility.</p> </div> </div>
如何让卡片高度相同？
使用.d-flex 和.align-items-stretch：
<div class="row g-3"> <div class="col-md-4 d-flex"> <div class="card flex-fill"> <h5 class="card-title">Card 1</h5> <p class="card-text">Aligned with others.</p> </div> </div> </div>
网友评论文明上网理性发言 已有0人参与
发表评论: