卡片#

卡片包含关于单个主题的内容和操作。卡片是一个灵活且可扩展的内容容器，可以使用组件进行格式化，包括页眉和页脚、标题和图像。

卡片标题

卡片内容

有关更多详细信息，请参阅 Material Design 和 Bootstrap card 的描述。

语法
:::{card} Card Title

Card content
:::

.. card:: Card Title

    Card content

首次出现三个或更多 ^^^ 之前的所有内容都被视为页眉，最后一次出现三个或更多 +++ 之后的所有内容都被视为页脚

页眉

卡片标题

卡片内容

页脚

语法
:::{card} Card Title
Header
^^^
Card content
+++
Footer
:::

.. card:: Card Title

    Header
    ^^^
    Card content
    +++
    Footer

在网格中使用卡片时（参见 grid-item-card），页脚可以对齐。

页眉

卡片标题

卡片内容

页脚

页眉

卡片标题

更长

卡片内容

页脚

卡片图像#

您还可以使用 img-background、img-top、img-bottom 选项将图像添加为卡片的背景或卡片的顶部/底部

your desired alt text
标题

文本

your desired alt text

页眉

标题

内容

页脚

页眉

标题

内容

页脚

your desired alt text
语法
:::::{grid} 2 3 3 4

::::{grid-item}

:::{card} Title
:img-background: images/particle_background.jpg
:class-card: sd-text-black
:img-alt: my text

Text
:::

::::

::::{grid-item-card} Title
:img-top: images/particle_background.jpg
:img-alt:

Header
^^^
Content
+++
Footer
::::

::::{grid-item-card} Title
:img-bottom: images/particle_background.jpg

Header
^^^
Content
+++
Footer
::::

:::::

.. grid:: 2 3 3 4

    .. grid-item::

        .. card:: Title
            :img-background: images/particle_background.jpg
            :class-card: sd-text-black
            :img-alt: my text

            Text

    .. grid-item-card:: Title
        :img-top: images/particle_background.jpg
        :img-alt:

        Header
        ^^^
        Content
        +++
        Footer

    .. grid-item-card:: Title
        :img-bottom: images/particle_background.jpg

        Header
        ^^^
        Content
        +++
        Footer

可点击的卡片#

使用 link 和 link-type 选项，您可以将整个卡片变成可点击的链接。尝试悬停然后点击下面的卡片

可点击的卡片 (外部链接)

整个卡片可以点击以导航到 https://example.com。

example.com
可点击的卡片 (内部链接)

整个卡片可以点击以导航到 cards-clickable 引用目标。

可点击的卡片
语法
(cards-clickable)=

## Clickable cards

Using the `link` and `link-type` options, you can turn an entire card into a clickable link. Try hovering over then clicking on the cards below:

:::{card} Clickable Card (external)
:link: https://example.com

The entire card can be clicked to navigate to <https://example.com>.
:::

:::{card} Clickable Card (external)
:link: https://example.com
:link-alt: example.com

The entire card can be clicked to navigate to <https://example.com>.
:::

:::{card} Clickable Card (internal)
:link: cards-clickable
:link-type: ref

The entire card can be clicked to navigate to the `cards-clickable` reference target.
:::

:::{card} Clickable Card (internal)
:link: cards-clickable
:link-type: ref
:link-alt: clickable cards

The entire card can be clicked to navigate to the `cards-clickable` reference target.
:::

.. _cards-clickable:

Clickable cards
...............

Using the ``link`` and ``link-type`` options, you can turn an entire card into a clickable link. Try hovering over then clicking on the cards below:

.. card:: Clickable Card (external)
    :link: https://example.com

    The entire card can be clicked to navigate to https://example.com.

.. card:: Clickable Card (external)
    :link: https://example.com
    :link-alt: example.com

    The entire card can be clicked to navigate to https://example.com.

.. card:: Clickable Card (internal)
    :link: cards-clickable
    :link-type: ref

    The entire card can be clicked to navigate to the ``cards-clickable`` reference target.

.. card:: Clickable Card (internal)
    :link: cards-clickable
    :link-type: ref
    :link-alt: clickable cards

    The entire card can be clicked to navigate to the ``cards-clickable`` reference target.

上面创建的 外部链接 等同于使用 <https://example.com> (https://example.com)，或者如果提供了 link-alt 选项，则等同于 [alt text](https://example.com) (alt text)。

提示

使用 URL 作为链接文本会使残疾人士和搜索引擎更难理解您的网页，因此最好通过 link-alt 选项提供链接文本。

上面创建的 内部链接 等同于使用 {ref}`cards-clickable` (Clickable cards)，或者如果提供了 link-alt 选项，则等同于 {ref}`alt text <cards-clickable>` (alt text)。

注意

您不能向可点击的卡片添加额外的链接，无论是在卡片标题还是卡片正文中。整个卡片都变成指向您指定的目标的单个链接，这将覆盖卡片内的任何其他链接。

对齐卡片#

您可以使用 text-align 选项来对齐卡片中的文本，也可以使用 auto 边距来水平对齐卡片。

居中对齐

内容

右对齐

内容

左对齐

内容

卡片轮播#

可以使用 card-carousel 指令来创建单行固定宽度、可滚动的卡片。参数应为 1 到 12 之间的数字，表示要显示的卡片数量。

当滚动轮播时，滚动将捕捉到最近卡片的开头

卡片 1

内容

卡片 2

更长

内容

卡片 3
卡片 4
卡片 5
卡片 6
语法
::::{card-carousel} 2

:::{card} card 1
content
:::
:::{card} card 2
Longer

content
:::
:::{card} card 3
:::
:::{card} card 4
:::
:::{card} card 5
:::
:::{card} card 6
:::
::::

.. card-carousel:: 2

    .. card:: card 1

        content

    .. card:: card 2

        Longer

        content

    .. card:: card 3

    .. card:: card 4

    .. card:: card 5

    .. card:: card 6

card 选项#

宽度

卡片应占用的宽度（以 % 为单位）：auto, 25%, 50%, 75%, 100%。

边距

网格的外边距。一个（全部）或四个（上 下 左 右）值，取自：0, 1, 2, 3, 4, 5, auto。

文本对齐

默认水平文本对齐方式：left, right, center 或 justify

img-background

要放置在内容下方的图像的 URI（相对文件路径或 URL）。

img-top

要放置在内容上方的图像的 URI（相对文件路径或 URL）。

img-bottom

要放置在内容下方的图像的 URI（相对文件路径或 URL）。

img-alt

图像的替代文本（将由屏幕阅读器使用）。

link

将整个卡片变成指向外部/内部目标的可点击链接。

link-type

链接类型：url (默认), ref, doc, any。

link-alt

链接的替代文本（将由屏幕阅读器使用）。

shadow

卡片下方阴影的大小：none, sm (默认), md, lg。

class-card

卡片容器元素的附加 CSS 类。

class-header

页眉元素的附加 CSS 类。

class-body

正文元素的附加 CSS 类。

class-title

标题元素的附加 CSS 类。

class-footer

页脚元素的附加 CSS 类。

class-img-top

顶部图像（如果存在）的附加 CSS 类。

class-img-bottom

底部图像（如果存在）的附加 CSS 类。

本页目录
显示源代码