组件和UI元素

组件和UI元素#

除了特殊类型的内容外，Jupyter Book还提供了一些扩展，用于灵活地组织内容块。

网格#

网格允许你在类似网格的系统中结构化任意内容块。你还可以控制列的宽度、列之间的“间距”等。

要生成网格，请使用```{grid}包装指令，并在内部使用```{grid-item}指令。

例如：

::::{grid}
:gutter: 2

:::{grid-item}
:outline:
A
:::
:::{grid-item}
:outline:
B
:::
:::{grid-item}
:outline:
C
:::
:::{grid-item}
:outline:
D
:::

::::

A

B

C

D

控制网格的列数#

你可以使用:columns:选项控制每个网格项中的列数。网格被分为12个单位的长度，这可以用来根据需要分割项目。例如：

::::{grid}

:::{grid-item}
:outline:
:columns: 3
A
:::
:::{grid-item}
:outline:
:columns: 9
B
:::
:::{grid-item}
:outline:
:columns: 6
C
:::
:::{grid-item}
:outline:
:columns: 6
D
:::

::::

A

B

C

D

创建卡片网格#

通过使用{grid-item-card}指令，可以简化为由卡片组成的网格。例如：

::::{grid}
:gutter: 3

:::{grid-item-card} 一！
这是第一张卡片。
:::

:::{grid-item-card} 二！
这是第二张卡片。
:::

:::{grid-item-card} 三！
这是第三张卡片。
:::
::::

一！

这是第一张卡片。

二！

这是第二张卡片。

三！

这是第三张卡片。

有关卡片样式的更多信息，请参见cards。

了解更多关于网格的信息#

更多关于网格的信息，请参见Sphinx Design文档。

卡片#

卡片提供了一种将内容放入标准“标题”、“正文”、“页脚”结构中的简单方法，这些结构具有相似的对齐方式和视觉风格。创建图库或高可见性的链接和信息集合时非常有用。卡片使用了sphinx-design扩展，并基于Bootstrap CSS。

卡片有四个主要部分，并使用特殊字符分隔某些部分：

卡片标题：指令的参数。
卡片页眉：位于带有^^^的行之前的任何内容。
卡片页脚：位于带有+++的行之后的任何内容。
卡片正文：位于^^^和+++之间的任何内容。

以下是一个示例卡片（注意使用^^^和+++分隔页眉、正文和页脚）：

````{card} 卡片1标题

卡片页眉1
^^^
卡片正文1
+++
卡片页脚1
````

卡片页眉1

卡片1标题

卡片正文1

卡片页脚1

Note

卡片页眉和页脚是可选的。如果你不在卡片中包含^^^或+++，它们将不会显示。

你可以在卡片中嵌入各种内容。例如：

````{card}
顶部卡片的内容。

{bdg-primary}`示例徽章`

````

````{card}

```{button-ref} content/cards
:class: stretched-link

可点击的底部卡片
```

````

顶部卡片的内容。

示例徽章

可点击的底部卡片

了解更多关于卡片的信息#

更多信息请参见Sphinx Design卡片样式文档。

下拉菜单#

下拉菜单允许你将内容隐藏在标题和按钮后面。 Jupyter Book中有两种下拉菜单：

下拉提示框#

你还可以隐藏提示框的正文，以便用户必须点击按钮才能显示其内容。如果你希望包含一些对用户不立即可见的文本，这很有帮助。

要将提示框变成下拉菜单，请为其添加dropdown类。例如：

```{note}
:class: dropdown
提示框正文将会被隐藏！
```

Note

提示框正文将会被隐藏！

你可以将此与 {admonition} 指令结合使用，以包含你自己的标题和样式。例如：

```{admonition} 点击这里！
:class: tip, dropdown
这是里面的内容！
```

点击这里！

这是里面的内容！

Important

注释下拉菜单需要浏览器启用 JavaScript 才能查看。相比之下，下面的下拉菜单指令仅通过 HTML+CSS 工作。

选项卡内容#

你还可以生成 选项卡内容。这允许你展示用户可以点击的各种选项卡内容块。

为此，请创建一个 {tab-set} 包装指令，并在其中放置 {tab-item} 指令。

例如：

````{tab-set}
```{tab-item} 选项卡 1 标题
我的第一个选项卡
```

```{tab-item} 选项卡 2 标题
我的第二个选项卡带有 `一些代码`！
```
````

选项卡 1 标题

我的第一个选项卡

选项卡 2 标题

我的第二个选项卡带有 一些代码！

这可以用于展示同一内容的许多不同视图，例如提供多种语言的示例。例如：

c++

int main(const int argc, const char **argv) {
  return 0;
}

python

def main():
    return

java

class Main {
    public static void main(String[] args) {
    }
}

julia

function main()
end

fortran

PROGRAM main
END PROGRAM main

了解更多关于选项卡的信息#

有关如何使用此功能的更多信息，请参阅 sphinx-design 选项卡文档。

自定义 `<div>` 块#

你可以使用 {div} 指令添加带有你喜欢的任何类的自定义 div 块。{div} 指令将使用你提供的类将内部所有内容包装在一个 <div> 中。例如：

```{div} my-class
**一些内容。**
```

当你的书构建时，将生成以下 HTML：

<div class="my-class">
  <strong>一些内容。</strong>
</div>

如果你想用自定义 CSS 或 JavaScript 来设计你的书，这可能会很有用。

组件和UI元素

Contents