设为首页收藏本站
开启辅助访问

第21节 Bootstrap5 Card卡片组件用法

 您所在的位置：网站首页 › 页面设置对话框中有什么标签卡片 › 第21节 Bootstrap5 Card卡片组件用法

第21节 Bootstrap5 Card卡片组件用法

2024-07-11 04:43| 来源: 网络整理| 查看: 265

21.1 bootstrap 卡片介绍

Bootstrap的卡提供了一个灵活的、可扩展的内容容器，其中包含多种变体和选项。卡片被设计成尽可能的少用一些标记和样式，它们可以更方便的对齐，并与其它的Bootstrap元件良好混合。预设中它并没有margin，所以可以依需求加入spacing通用类别。

以下是一个具有混合内容和固定宽度的基本卡片示例。卡片如果没有固定的宽度，那么它们将自然填充其父元素的全部宽度。这可以透过我们的各种缩放选项轻松调整。下面是一个简单的例子。

卡片标题 卡片的内容可以使用文本、列表、表格、表单、图片等各种html元素 这是一个按钮 复制代码

1.png

21.2 卡片的结构 21.2.1 完整的卡片结构示例

一般情况下，我们无须完整的卡片结构就可以很好的使用一个卡片组件，如上例所示，一个完整的卡片包括页眉、页脚、图片（此处指的是页眉下面的图片，与卡片同宽度）、主体、列表群组五部分，其中主体可包含标题和文本。 下面是一个内容俱全的示例，事实上，一般情况下我们根据需要使用卡片的一两个元素就够用了，下面示例仅是演示，后面我们会逐一讲解各个部分功能。

卡片页眉 卡片标题 卡片的内容可以使用文本、列表、表格、表单、图片等各种html元素 这是一个按钮 列表元素 列表元素 列表元素 卡片页脚 复制代码

2.1.png

21.2.1 卡片的页眉和页脚

页眉和页脚不是必要的，与其他内容相比，页眉和页脚文字颜色较浅，字体略小。另外还可以通过通用类来调整其对齐方式，灵活使用可以达到很多特殊的效果。

21.2.1.1 简单卡片 通知 中秋节放假通知 下周中秋节放假7天，给大家乐活以下......... 了解详情 复制代码

2.1.1.png

21.2.1.2 使用引用用于名人名言 名言 只有诗人同圣徒才会坚信，在沥青路面上辛勤浇水会培植出百合花来。 威廉· 萨默赛特·毛姆的 《月亮和六便士》 复制代码

2.1.2.png

21.2.1.3 页眉页脚一起使用 名著推荐 《红楼梦》 《红楼梦》是一部具有世界影响力的人情小说作品，举世公认的中国古典小说巅峰之作， 中国封建社会的百科全书，传统文化的集大成者。小说以贾、史、王、薛四大家族的兴衰为背景， 以贾府的家庭琐事、闺阁闲情为脉络，以贾宝玉、林黛玉、薛宝钗的爱情婚姻故事为主线， 刻画了以贾宝玉和金陵十二钗为中心的正邪两赋有情人的人性美和悲剧美。 通过家族悲剧、女儿悲剧及主人公的人生悲剧，揭示出封建末世危机。 马上阅读 2 days ago 复制代码

2.1.3.png

21.2.2 图像的使用 21.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.1.png

21.2.2.2 图像作为卡片背景

将图片转换为卡片背景，并叠加卡片的文字。根据图片，你可以选择是否需要额外的样式或通用类别。

卡片 ... 微软发布 Win11

微软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。

Last updated 3 mins ago

复制代码

注意，我们通过bg-dark给卡片添加了一个黑色背景，text-white设置字体为白色，在card-body中设置card-img-overlay为背景色。也可以不要card-body，直接用card-img-overlay"如上。

2.2.2.png

21.2.2.3 图像在左侧

结合使用网格以及通用类，可以让卡片以响应式的方法呈现水平状态。在下面的示例中，我们使用g-0移除网格的间隙，并使用col-md-*类别让卡片在md断点之后呈现水平。根据卡片内容，将可能会需要一些额外的调整。

春夏秋冬皆自然 春夏秋冬皆自然,明月清风共我闲,有春风拂面的温柔,也有美好故事的发生,又一个春天如约而至,温柔的朝阳里布谷鸟声声呼唤,愿普天同安康,迎接春天到来的简... Last updated 3 mins ago 复制代码

3.2.4.png

当然，你最好设置一下图片宽度，否则容易发生溢出。

21.2.3 卡片的主体 21.2.3.1 标题和副标题

卡片的构造块是.card-body。当你需要卡片中的填充部分时就使用它。

在标签中添加card-title以使用卡片标题。 在标签中加入card-subtitle以使用副标题。

如果card-title以及card-subtitle元件被放在card-body里面，它们将会对齐良好。

21.2.3.2 文本内容和链接

文本内容可以放置任何html元素和bootstrap的组件，如按钮等，在a标签中加入card-link并使连接彼此相邻。

微软发布 Win11 科技动态 微软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。 了解详情 下载试用 复制代码

2.2.5.png

21.2.4 列表群組

列表群组使用非常简单

晚会活动 歌舞 男生独唱 小品 复制代码

3.2.6.png

21.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 Card link Another link 复制代码

3.2.7.png

21.3 卡片的排版及宽度

卡片预设没有特定的起始width，除非另有声明，否则它们的宽度将是100%。

21.3.1 使用网格

使用网格，根据需要在列和行中包装卡片。需要注意的是卡片默认是每个卡片一行的，要想一行中显示多个卡片，必须把几个卡片放在一个div容器中且每行中的卡片总宽度不能超过屏幕宽度。网格中的row-cols-*同样适用卡片。另外卡片默认是宽度相同，高度根据内容自动调整的，但是如果卡片拥有页脚，则高度会自动调整到相同。 下面给出一个完整例子。

卡片 微软发布 Win11

软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。

了解详情 飞利浦推出4K显示器

飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万

了解详情 复制代码

3.1.png

21.3.2 使用通用类

使用可调整宽度大小的通用类来快速设置卡片的宽度。

使用网格 使用网格，根据需要在列和行中包装卡片。 卡片 微软发布 Win11

软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。

了解详情 飞利浦推出4K显示器

飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万

了解详情 复制代码

3.2.png

需要注意的是，这里的宽度值必须是预定的，预设包含25%，50%，75%，100%和auto，而不是随意写的。 详情见 Bootstrap5中文手册 通用类 尺寸（Sizing）一节。

21.3.3 使用自定义CSS

在样式表中使用自定义的CSS或使用行内样式设置宽度，这种方式比较灵活，可以使用rem、px、百分比。

使用网格 使用网格，根据需要在列和行中包装卡片。 卡片 微软发布 Win11

软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。

了解详情 飞利浦推出4K显示器

飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万

了解详情 复制代码

3.3.png

21.3.4 卡片中的文本对齐

可以透过文字对齐类别更改任何卡片的整体或特定部分的文本对齐方式。默认全部是局左（text-start）对齐的，可以用card-text、text-end通用类使之居中对齐或居右对齐。通用类可用在card容器，也可以单独以用在标题、页眉页脚、主体等任意部分，如果同时使用，则单独的覆盖整体的。

卡片 整体居中 微软发布 Win11

软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。

了解详情


【本文地址】


今日新闻

推荐新闻

CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3