Bootstrap 的卡片提供了具有多种变体和选项的灵活且可扩展的内容容器。
关于
卡片是一种灵活且可扩展的内容容器。它包括页眉和页脚选项、各种内容、上下文背景颜色和强大的显示选项。如果您熟悉 Bootstrap 3,卡片将取代我们的旧面板、孔和缩略图。与这些组件类似的功能可用作卡片的修饰符类。
例子
卡片是用尽可能少的标记和样式构建的,但仍然设法提供大量的控制和定制。使用 flexbox 构建,它们可以轻松对齐并与其他 Bootstrap 组件很好地混合。默认情况下它们没有margin
,因此根据需要使用间距实用程序。
下面是一个包含混合内容和固定宽度的基本卡片的示例。卡片开始时没有固定宽度,因此它们自然会填满其父元素的整个宽度。这很容易通过我们的各种尺寸选项进行定制。
卡片标题
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
去一个地方
内容类型
卡片支持多种内容,包括图像、文本、列表组、链接等。以下是支持的示例。
身体
卡片的组成部分是.card-body
. 每当您需要卡片中的填充部分时使用它。
标题、文本和链接
.card-title
通过添加到<h*>
标签来使用卡片标题。.card-link
同样,通过添加到<a>
标签来添加链接并彼此相邻放置。
.card-subtitle
通过将 a 添加到<h*>
标签来使用字幕。如果将.card-title
和.card-subtitle
项目放在一个.card-body
项目中,则卡片标题和副标题很好地对齐。
卡片标题
卡片字幕
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
卡链接
另一个链接
图片
.card-img-top
将图像置于卡片顶部。使用.card-text
,可以将文本添加到卡片中。其中的文本.card-text
也可以使用标准 HTML 标记进行样式设置。
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
列出组
在具有刷新列表组的卡片中创建内容列表。
- Cras justo odio
- Dapibus ac facilisis in
- 爱神前庭
- Cras justo odio
- Dapibus ac facilisis in
- 爱神前庭
- Cras justo odio
- Dapibus ac facilisis in
- 爱神前庭
厨房水槽
混合和匹配多种内容类型以创建您需要的卡片,或将所有内容放入其中。下面显示的是图像样式、块、文本样式和列表组——所有这些都包含在一个固定宽度的卡片中。
卡片标题
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
- Cras justo odio
- Dapibus ac facilisis in
- 爱神前庭
在卡片中添加可选的页眉和/或页脚。
特殊职称处理
下面的支持文本作为附加内容的自然引导。
去一个地方
卡片标题可以通过添加元素.card-header
来设置样式。<h*>
特殊职称处理
下面的支持文本作为附加内容的自然引导。
去一个地方
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。
特殊职称处理
下面的支持文本作为附加内容的自然引导。
去一个地方
浆纱
卡片假定没有特定width
的开始,因此除非另有说明,否则它们将是 100% 宽。您可以根据需要使用自定义 CSS、网格类、网格 Sass 混合程序或实用程序进行更改。
使用网格标记
使用网格,根据需要将卡片包装在列和行中。
特殊职称处理
下面的支持文本作为附加内容的自然引导。
去一个地方
特殊职称处理
下面的支持文本作为附加内容的自然引导。
去一个地方
使用实用程序
使用我们少数可用的尺寸调整实用程序来快速设置卡片的宽度。
卡片标题
下面的支持文本作为附加内容的自然引导。
按钮
卡片标题
下面的支持文本作为附加内容的自然引导。
按钮
使用自定义 CSS
在样式表中使用自定义 CSS 或作为内联样式设置宽度。
特殊职称处理
下面的支持文本作为附加内容的自然引导。
去一个地方
文本对齐
您可以使用我们的文本对齐类快速更改任何卡片的整体或特定部分的文本对齐方式。
特殊职称处理
下面的支持文本作为附加内容的自然引导。
去一个地方
特殊职称处理
下面的支持文本作为附加内容的自然引导。
去一个地方
特殊职称处理
下面的支持文本作为附加内容的自然引导。
去一个地方
导航
使用 Bootstrap 的导航组件向卡片的标题(或块)添加一些导航。
特殊职称处理
下面的支持文本作为附加内容的自然引导。
去一个地方
特殊职称处理
下面的支持文本作为附加内容的自然引导。
去一个地方
图片
卡片包括一些处理图像的选项。选择在卡片的任一端附加“图像大写”、使用卡片内容覆盖图像或简单地将图像嵌入卡片中。
图片上限
与页眉和页脚类似,卡片可以包含顶部和底部的“图像大写”——卡片顶部或底部的图像。
卡片标题
这是一张更宽的卡片,下面有支持文本,作为附加内容的自然引导。这个内容有点长。
最后更新 3 分钟前
卡片标题
这是一张更宽的卡片,下面有支持文本,作为附加内容的自然引导。这个内容有点长。
最后更新 3 分钟前
图像叠加
将图像变成卡片背景并覆盖卡片的文字。根据图像,您可能需要也可能不需要其他样式或实用程序。
卡片标题
这是一张更宽的卡片,下面有支持文本,作为附加内容的自然引导。这个内容有点长。
最后更新 3 分钟前
请注意,内容不应大于图像的高度。如果内容大于图像,则内容将显示在图像之外。
水平的
使用网格和实用程序类的组合,可以以移动友好和响应式的方式将卡片制作成水平的。在下面的示例中,我们删除了网格排水沟.no-gutters
并使用.col-md-*
类使卡片在md
断点处保持水平。根据您的卡片内容,可能需要进一步调整。
卡片标题
这是一张更宽的卡片,下面有支持文本,作为附加内容的自然引导。这个内容有点长。
最后更新 3 分钟前
卡片样式
卡片包括用于自定义背景、边框和颜色的各种选项。
背景和颜色
使用文本和背景实用程序来更改卡片的外观。
主卡标题
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
副牌标题
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
成功卡标题
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
危险卡标题
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
警告卡标题
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
信息卡标题
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
光卡标题
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
暗卡标题
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
向辅助技术传达意义
使用颜色来添加含义仅提供视觉指示,不会传达给辅助技术的用户 - 例如屏幕阅读器。确保由颜色表示的信息在内容本身(例如可见文本)中是显而易见的,或者通过替代方式包含在内,例如隐藏在.sr-only
类中的附加文本。
边界
使用边界实用程序仅更改border-color
卡的。请注意,您可以将.text-{color}
类放在卡片内容的父级.card
或子集上,如下所示。
主卡标题
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
副牌标题
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
成功卡标题
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
危险卡标题
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
警告卡标题
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
信息卡标题
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
光卡标题
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
暗卡标题
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
Mixins 实用程序
您还可以根据需要更改卡片页眉和页脚的边框,甚至可以background-color
使用.bg-transparent
.
成功卡标题
一些快速的示例文本以卡片标题为基础,并构成卡片的大部分内容。
卡片布局
除了设置卡片内容的样式外,Bootstrap 还包括一些用于布置卡片系列的选项。目前,这些布局选项还没有响应式。
卡组
使用卡片组将卡片呈现为具有相同宽度和高度列的单个附加元素。卡组开始堆叠并用于从断点display: flex;
开始以统一尺寸连接。sm
卡片标题
这是一张更宽的卡片,下面有支持文本,作为附加内容的自然引导。这个内容有点长。
最后更新 3 分钟前
卡片标题
此卡片在下面有支持文本,作为附加内容的自然引导。
最后更新 3 分钟前
卡片标题
这是一张更宽的卡片,下面有支持文本,作为附加内容的自然引导。这张卡片的内容比第一个显示等高动作的卡片还要长。
最后更新 3 分钟前
使用带页脚的卡片组时,其内容将自动排列。
卡片标题
这是一张更宽的卡片,下面有支持文本,作为附加内容的自然引导。这个内容有点长。
卡片标题
此卡片在下面有支持文本,作为附加内容的自然引导。
卡片标题
这是一张更宽的卡片,下面有支持文本,作为附加内容的自然引导。这张卡片的内容比第一个显示等高动作的卡片还要长。
卡片组
需要一组不相互连接的相同宽度和高度的卡片吗?使用卡片组。
卡片标题
这是一张较长的卡片,下面有支持文本,作为附加内容的自然引导。这个内容有点长。
最后更新 3 分钟前
卡片标题
此卡片在下面有支持文本,作为附加内容的自然引导。
最后更新 3 分钟前
卡片标题
这是一张更宽的卡片,下面有支持文本,作为附加内容的自然引导。这张卡片的内容比第一个显示等高动作的卡片还要长。
最后更新 3 分钟前
就像卡片组一样,卡片组中的卡片页脚会自动排列。
卡片标题
这是一张更宽的卡片,下面有支持文本,作为附加内容的自然引导。这个内容有点长。
卡片标题
此卡片在下面有支持文本,作为附加内容的自然引导。
卡片标题
这是一张更宽的卡片,下面有支持文本,作为附加内容的自然引导。这张卡片的内容比第一个显示等高动作的卡片还要长。
网格卡
使用 Bootstrap 网格系统及其.row-cols
类来控制每行显示的网格列数(环绕在卡片周围)。例如,这里.row-cols-1
将卡片放在一列上.row-cols-md-2
,从中间断点开始,将四张卡片分成多行等宽。
卡片标题
这是一张较长的卡片,下面有支持文本,作为附加内容的自然引导。这个内容有点长。
卡片标题
这是一张较长的卡片,下面有支持文本,作为附加内容的自然引导。这个内容有点长。
卡片标题
这是一张较长的卡片,下面有支持文本,作为附加内容的自然引导。
卡片标题
这是一张较长的卡片,下面有支持文本,作为附加内容的自然引导。这个内容有点长。
将其更改为.row-cols-3
,您将看到第四张卡片包装。
卡片标题
这是一张较长的卡片,下面有支持文本,作为附加内容的自然引导。这个内容有点长。
卡片标题
这是一张较长的卡片,下面有支持文本,作为附加内容的自然引导。这个内容有点长。
卡片标题
这是一张较长的卡片,下面有支持文本,作为附加内容的自然引导。
卡片标题
这是一张较长的卡片,下面有支持文本,作为附加内容的自然引导。这个内容有点长。
当您需要相等的高度时,添加.h-100
到卡片中。如果你想要默认相等的高度,你可以$card-height: 100%
在 Sass 中设置。
卡片标题
这是一张较长的卡片,下面有支持文本,作为附加内容的自然引导。这个内容有点长。
卡片标题
这是一张较长的卡片,下面有支持文本,作为附加内容的自然引导。
卡片标题
这是一张较长的卡片,下面有支持文本,作为附加内容的自然引导。这个内容有点长。
卡片栏
卡片可以通过将它们包裹在.card-columns
. 卡片是用 CSScolumn
属性而不是 flexbox 构建的,以便于对齐。卡片的顺序是从上到下,从左到右。
小心!您的卡列里程可能会有所不同。为了防止卡片跨越列,我们必须将它们设置display: inline-block
为column-break-inside: avoid
还不是防弹解决方案。
换行的卡片标题
这是一张较长的卡片,下面有支持文本,作为附加内容的自然引导。这个内容有点长。
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。
卡片标题
此卡片在下面有支持文本,作为附加内容的自然引导。
最后更新 3 分钟前
Lorem ipsum dolor sit amet, consectetur adipiscing elit。整数值。
卡片标题
这张卡片有一个常规的标题和下面的一小段文字。
最后更新 3 分钟前
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。
卡片标题
这是另一张卡片,下面有标题和支持文字。这张卡片有一些额外的内容,使其整体略高。
最后更新 3 分钟前
卡片列也可以通过一些额外的代码进行扩展和定制。下面显示的是.card-columns
该类的扩展,它使用我们使用的相同 CSS(CSS 列)来生成一组用于更改列数的响应层。