Card

基础布局

基于 Bootstrap 5 的卡片组件，提供灵活且可扩展的内容容器，支持页眉页脚、图片、覆盖层、导航与多种配色样式

Component Demo

Basic usage and examples of the Card component

基础卡片

卡片标题

这是一段示例文本，用于展示卡片的基本结构：卡片、主体、标题与正文。

卡片主体

使用 body 属性

开启 body 属性后，子元素会自动包裹在 CardBody 中。

标题、文本与链接

卡片标题

卡片副标题

这是一段示例文本，展示标题、副标题、正文与链接的组合方式。

卡片链接另一个链接

图片

顶部图片

使用 variant="top" 将图片置于卡片顶部，并自动匹配卡片圆角。

底部图片

使用 variant="bottom" 将图片置于卡片底部。

图片覆盖

图片覆盖标题

文字直接叠加在图片上方，适合深色背景的图片。

最后更新于 3 分钟前

横向卡片

配合网格工具类，图片与内容并排展示，适合中大型宽度布局。

最后更新于 3 分钟前

页眉与页脚

特色

特殊标题处理

使用页眉与页脚扩展卡片内容，页脚常用于展示次要信息。

2 天前

引用

一个被版面分散注意力的读者，将无法专注于排版本身。
出自某位名人

页眉导航

页眉中的标签导航

通过 card-header-tabs 类让导航与页眉无缝衔接。

页眉中的胶囊导航

使用 card-header-pills 类将胶囊导航嵌入页眉。

列表组

列表项 1
列表项 2
列表项 3

激活的列表项
普通列表项
禁用的列表项

组合示例

将图片、正文、列表组、链接与页脚组合为一张完整卡片。

列表项 1
列表项 2
列表项 3

卡片链接另一个链接

2 天前

背景与文字颜色

页眉

主要样式

使用 bg 与 text 属性快速设置卡片配色。

页眉

成功样式

背景色与文字颜色均可通过属性单独控制。

页眉

危险样式

也可以直接传入 className="text-bg-danger" 等工具类。

边框颜色

页眉

主要边框

使用 border 属性为卡片设置主题色边框。

页眉

成功边框

边框颜色独立于背景色，可以自由组合。

页眉

危险边框

边框仅改变描边颜色，不影响卡片内部样式。

页眉

警告边框

支持 Bootstrap 的全部主题色。

文字颜色

页眉

主要文字

使用 text 属性单独设置文字颜色，并可搭配边框。

页眉

危险文字

文字颜色同样支持全部主题色以及 white、muted 等。

网格布局

主要卡片

使用网格系统让卡片等宽排列，并为多张卡片提供统一间距。

次要卡片

使用网格系统让卡片等宽排列，并为多张卡片提供统一间距。

成功卡片

使用网格系统让卡片等宽排列，并为多张卡片提供统一间距。

卡片组

卡片组标题 1

卡片组将卡片并排展示，并让它们等高对齐、无间距相连。

页脚内容同样对齐

卡片组标题 2

当内容高度不一致时，同一组内的卡片自动等高。

页脚内容同样对齐

卡片组标题 3

适合展示内容量相近的并列信息，例如对比或分类。

页脚内容同样对齐

API Documentation

Complete API reference for the Card component

Props

Card

属性名	类型	默认值	描述
`bg`	`CardColor`	-	设置卡片背景色，渲染为 `bg-*` 类
`body`	`boolean`	`false`	为 `true` 时自动将子元素包裹在 `CardBody` 中
`border`	`CardColor`	-	设置卡片边框颜色，渲染为 `border-*` 类
`text`	`CardTextColor`	-	设置卡片文字颜色，渲染为 `text-*` 类

CardImg

属性名	类型	默认值	描述
`variant`	`CardImgVariant`	-	图片位置，`top` 置于卡片顶部、`bottom` 置于卡片底部，不设置则使用 `card-img` 类

CardLink

属性名	类型	默认值	描述
`href`	`string`	`'#'`	链接地址

Common Props

属性名	类型	默认值	描述
`children`	`ReactNode`	-	卡片内容，CardTitle 渲染为 `div.card-title.h5`，CardSubtitle 渲染为 `div.card-subtitle.h6`
`className`	`string`	-	自定义类名
`...rest`	`HTMLAttributes \| ImgHTMLAttributes \| AnchorHTMLAttributes`	-	透传原生元素属性：Card 及分区组件为 `HTMLAttributes`，CardImg 为 `ImgHTMLAttributes`（如 `src`、`alt`），CardLink 为 `AnchorHTMLAttributes`

Type Definitions

CardColor

卡片背景色与边框色类型

export type CardColor =
  'danger' | 'dark' | 'info' | 'light' | 'primary' | 'secondary' | 'success' | 'warning';

CardTextColor

卡片文字颜色类型

export type CardTextColor = 'black' | 'body' | 'muted' | 'white' | CardColor;

CardImgVariant

卡片图片位置类型

export type CardImgVariant = 'bottom' | 'top';

CardProps

卡片组件属性接口

export interface CardProps extends HTMLAttributes<HTMLDivElement> {
  bg?: CardColor;
  body?: boolean;
  border?: CardColor;
  children?: ReactNode;
  className?: string;
  text?: CardTextColor;
}

CardImgProps

卡片图片组件属性接口

export interface CardImgProps extends ImgHTMLAttributes<HTMLImageElement> {
  className?: string;
  variant?: CardImgVariant;
}

CardLinkProps

卡片链接组件属性接口

export interface CardLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
  children?: ReactNode;
  className?: string;
  href?: string;
}

CardContentProps

卡片内容分区组件属性接口（CardBody、CardTitle、CardSubtitle、CardText）

export interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
  children?: ReactNode;
  className?: string;
}

export interface CardTitleProps extends HTMLAttributes<HTMLDivElement> {
  children?: ReactNode;
  className?: string;
}

export interface CardSubtitleProps extends HTMLAttributes<HTMLDivElement> {
  children?: ReactNode;
  className?: string;
}

export interface CardTextProps extends HTMLAttributes<HTMLParagraphElement> {
  children?: ReactNode;
  className?: string;
}

CardPanelProps

卡片面板组件属性接口（CardImgOverlay、CardHeader、CardFooter、CardGroup）

export interface CardImgOverlayProps extends HTMLAttributes<HTMLDivElement> {
  children?: ReactNode;
  className?: string;
}

export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
  children?: ReactNode;
  className?: string;
}

export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
  children?: ReactNode;
  className?: string;
}

export interface CardGroupProps extends HTMLAttributes<HTMLDivElement> {
  children?: ReactNode;
  className?: string;
}