Bootstrap 5 卡片

在 Bootstrap 5 中，卡片是一个带有边框和内边距的框，用于包裹其文本。 它提供头部、尾部、内容和颜色等选项。卡片通常用于包含 Web 应用程序功能，例如表单、表格和其他用户交互功能。

基本卡片

“card” 类用于构建基本卡片，“card-body” 类用于卡片内容。card 函数创建一个基本卡片，card body 包含应用程序所需的必要信息。

语法

以下语法帮助在网页上创建基本卡片。

示例

以下示例展示了使用 Bootstrap 5 类创建的 card 函数。

输出

下图展示了基本 Bootstrap 5 card 函数。

带有头部和尾部的卡片

“card” 类创建一个基本卡片，“card-body” 包含应用程序所需的必要信息。“card-header” 包含并显示卡片信息的标题。“card-footer” 显示页面或功能的页脚信息。

语法

以下语法帮助在网页上创建带有头部和尾部的 Bootstrap 5 卡片。

示例

以下示例展示了使用 Bootstrap 5 类创建的 card 函数。 我们可以将 card header、body 和 footer 类放置在 "card" 类中。

输出

下图展示了带有头部和尾部的基本 Bootstrap 5 card 函数。

情境卡片函数

“card” 类使用 “bg-primary” 情境类创建具有不同背景颜色的卡片。“card-body” 和其他卡片类包含在 card 类中。 情境卡片显示不同的背景颜色和卡片的含义。“bg-info” 类显示有关卡片的通知性信息。

语法

以下语法帮助在网页上创建 Bootstrap 5 情境卡片。

示例

以下示例展示了使用 Bootstrap 5 类创建的情境卡片函数。 我们可以为卡片使用不同的背景颜色。

输出

下图展示了 Bootstrap 5 情境卡片函数。

带有标题、链接和文本的卡片

卡片分别使用 “card-text”、“card-title” 和 “card-link” 类包含文本、标题和链接。 该类在 “card-body” 类中使用以显示功能数据。 卡片标题显示卡片功能的标题，链接显示页面上的另一个来源。 卡片文本显示有关该功能的核心和详细信息。

语法

以下语法帮助在网页上创建带有标题、链接和文本的 Bootstrap 5 卡片。

示例

以下示例展示了使用 Bootstrap 5 类创建的带有其他功能的卡片函数。 我们可以将链接和其他卡片信息放置在 “card-body” 类中。

输出

下图展示了带有标题、链接和信息的 Bootstrap 5 卡片函数。

带有图片的卡片

卡片分别使用 “card-img-top” 和 “card-img-bottom” 类在功能的顶部和底部包含图像。 该类在 <card> 类中的 <img> 标记中使用。 <img> 标签需要在 CSS 样式中设置具有所需宽度的卡片上的图像。

语法

以下语法帮助在网页上创建带有图片的 Bootstrap 5 卡片。

示例

以下示例展示了使用 Bootstrap 5 类创建的带有图像的卡片函数。 我们可以将图像放置在卡片的顶部。 <img> 标签在 "card" 类中使用。

输出

下图展示了带有图像和其他信息的 Bootstrap 5 卡片函数。

带有图像叠加的卡片

卡片包含功能的顶部、底部和中心对齐的图像。 使用 “card-img-overlay” 类将图像设置为卡片的背景。 <img> 标签需要在卡片上设置图像。 给定图像的宽度需要在 CSS 样式中为 100%。

语法

以下语法帮助在网页上创建带有图片的 Bootstrap 5 卡片。

示例

以下示例展示了使用 Bootstrap 5 类创建的带有图像的卡片函数。 我们可以将图像放置在卡片的顶部。 <img> 标签在 "card" 类中使用。

输出

下图展示了带有背景图像和其他信息的 Bootstrap 5 卡片函数。

结论

Bootstrap 5 卡片用于包含网页上的交互式用户功能。 此卡片简单、有吸引力并且使用交互式功能。 它有助于以最小的空间以结构化格式显示信息。