Bootstrap中如何使用Card卡片组件
本篇内容介绍了"Bootstrap中如何使用Card卡片组件"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
1 bootstrap 卡片介绍
Bootstrap的卡提供了一个灵活的、可扩展的内容容器，其中包含多种变体和选项。卡片被设计成尽可能的少用一些标记和样式，它们可以更方便的对齐，并与其它的Bootstrap元件良好混合。预设中它并没有margin，所以可以依需求加入spacing通用类别。
以下是一个具有混合内容和固定宽度的基本卡片示例。卡片如果没有固定的宽度，那么它们将自然填充其父元素的全部宽度。这可以透过我们的各种缩放选项轻松调整。下面是一个简单的例子。
2 卡片的结构
2.1 完整的卡片结构示例
一般情况下，我们无须完整的卡片结构就可以很好的使用一个卡片组件，如上例所示，一个完整的卡片包括页眉、页脚、图片（此处指的是页眉下面的图片，与卡片同宽度）、主体、列表群组五部分，其中主体可包含标题和文本。 下面是一个内容俱全的示例，事实上，一般情况下我们根据需要使用卡片的一两个元素就够用了，下面示例仅是演示，后面我们会逐一讲解各个部分功能。
2.1 卡片的页眉和页脚
页眉和页脚不是必要的，与其他内容相比，页眉和页脚文字颜色较浅，字体略小。另外还可以通过通用类来调整其对齐方式，灵活使用可以达到很多特殊的效果。
2.1.1 简单卡片
通知
2.1.2 使用引用用于名人名言
名言只有诗人同圣徒才会坚信，在沥青路面上辛勤浇水会培植出百合花来。
2.1.3 页眉页脚一起使用
名著推荐《红楼梦》
《红楼梦》是一部具有世界影响力的人情小说作品，举世公认的中国古典小说巅峰之作， 中国封建社会的百科全书，传统文化的集大成者。小说以贾、史、王、薛四大家族的兴衰为背景， 以贾府的家庭琐事、闺阁闲情为脉络，以贾宝玉、林黛玉、薛宝钗的爱情婚姻故事为主线， 刻画了以贾宝玉和金陵十二钗为中心的正邪两赋有情人的人性美和悲剧美。 通过家族悲剧、女儿悲剧及主人公的人生悲剧，揭示出封建末世危机。
马上阅读
2.2 图像的使用
2.2.1 图像在顶部或在底部
图像通过类card-img-top或card-img-bottom，设置显示在卡片的顶部还是底部，下面是两个卡片，一个图片在上，一个图片在下。
卡片
软发布 Win11
T 微软已宣布将于 6 月 24 日举行"What's next for Windows"活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
Last updated 3 mins ago
飞利浦推出4K显示器
飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万
Last updated 3 mins ago
2.2.2 图像作为卡片背景
将图片转换为卡片背景，并叠加卡片的文字。根据图片，你可以选择是否需要额外的样式或通用类别。
卡片
注意，我们通过bg-dark给卡片添加了一个黑色背景，text-white设置字体为白色，在card-body中设置card-img-overlay为背景色。也可以不要card-body，直接用card-img-overlay"如上。
2.2.3 图像在左侧
结合使用网格以及通用类，可以让卡片以响应式的方法呈现水平状态。在下面的示例中，我们使用g-0移除网格的间隙，并使用col-md-*类别让卡片在md断点之后呈现水平。根据卡片内容，将可能会需要一些额外的调整。
春夏秋冬皆自然
春夏秋冬皆自然,明月清风共我闲,有春风拂面的温柔,也有美好故事的发生,又一个春天如约而至,温柔的朝阳里布谷鸟声声呼唤,愿普天同安康,迎接春天到来的简...
Last updated 3 mins ago
当然，你最好设置一下图片宽度，否则容易发生溢出。
2.3 卡片的主体
2.3.1 标题和副标题
卡片的构造块是.card-body。当你需要卡片中的填充部分时就使用它。
在
card-title以使用卡片标题。在
card-subtitle以使用副标题。
如果card-title以及card-subtitle元件被放在card-body里面，它们将会对齐良好。
2.3.2 文本内容和链接
文本内容可以放置任何html元素和bootstrap的组件，如按钮等，在a标签中加入card-link并使连接彼此相邻。
2.4 列表群組
列表群组使用非常简单
晚会活动
- 歌舞
- 男生独唱
- 小品
2.5 混合样式
混合并搭配多个内容形式，用来创建你所需要的卡片。以下示例将图片样式、块、文字样式以及列表群组全部包装在一个固定宽度的卡片中。
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- An item
- A second item
- A third item
3 卡片的排版及宽度
卡片预设没有特定的起始width，除非另有声明，否则它们的宽度将是100%。
3.1 使用网格
使用网格，根据需要在列和行中包装卡片。需要注意的是卡片默认是每个卡片一行的，要想一行中显示多个卡片，必须把几个卡片放在一个div容器中且每行中的卡片总宽度不能超过屏幕宽度。网格中的row-cols-*同样适用卡片。另外卡片默认是宽度相同，高度根据内容自动调整的，但是如果卡片拥有页脚，则高度会自动调整到相同。 下面给出一个完整例子。
卡片
3.2 使用通用类
使用可调整宽度大小的通用类来快速设置卡片的宽度。
使用网格
使用网格，根据需要在列和行中包装卡片。
卡片
需要注意的是，这里的宽度值必须是预定的，预设包含25%，50%，75%，100%和auto，而不是随意写的。 详情见 Bootstrap5中文手册 通用类 尺寸（Sizing）一节。
3.3 使用自定义CSS
在样式表中使用自定义的CSS或使用行内样式设置宽度，这种方式比较灵活，可以使用rem、px、百分比。
卡片
3.4 卡片中的文本对齐
可以透过文字对齐类别更改任何卡片的整体或特定部分的文本对齐方式。默认全部是局左（text-start）对齐的，可以用card-text、text-end通用类使之居中对齐或居右对齐。通用类可用在card容器，也可以单独以用在标题、页眉页脚、主体等任意部分，如果同时使用，则单独的覆盖整体的。
卡片
整体居中页眉、标题居中整体居中中标题居左
4 带选项卡的卡片
使用Bootstrap的导航组件在卡片的页首（或块）添加一些导航，获得选项卡效果。
卡片
对于上面的代码，只需经过两处替换，就可以换为胶囊导航
data-bs-toggle="tab"
替换为
data-bs-toggle="pill"
5 卡片样式
卡片包含许多用来自定义背景、边框、颜色的选项。
5.1 背景和颜色
使用文字和背景通用类别来改变卡片的外观。
卡片
HeaderPrimary
颜色直接作用于card容器上
HeaderSecondary
颜色直接作用于card容器上
HeaderSuccess
颜色直接作用于card容器上
HeaderDanger
颜色直接作用于card容器上
HeaderWarning
颜色直接作用于card容器上
HeaderInfo
颜色直接作用于card容器上
HeaderLight
颜色直接作用于card容器上
HeaderDark
颜色直接作用于card容器上
5.2 边框和颜色
页眉Primary 卡片标题
card-text 卡片文字内容
页眉Secondary 卡片标题
card-text 卡片文字内容
页眉Success 卡片标题
card-text 卡片文字内容
页眉Danger 卡片标题
card-text 卡片文字内容
页眉Warning 卡片标题
card-text 卡片文字内容
页眉Info 卡片标题
card-text 卡片文字内容
页眉Light 卡片标题
card-text 卡片文字内容
页眉Dark 卡片标题
card-text 卡片文字内容
限于篇幅，仅展示前面一部分边框图片。
5.2 Mixin通用类
也可以依照需求更改卡片页首、页尾的边框，并能使用bg-transparent来移除它们的background-color。
页眉Success卡片标题
注意card-body使用了 text-success"，页脚使用了bg-transparent border-success
"Bootstrap中如何使用Card卡片组件"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！
