CSS 类

对于大多数角色/指令，优先建议使用可用的选项来设置组件的样式，因为例如，这样可以实现更好的 cross-output-format 样式。

但对于自定义情况，这些角色/指令还提供了 class 选项，用于直接向元素添加 CSS 类，或者您可以直接使用 div 指令。sphinx-design 中的所有 CSS 类均以 sd- 为前缀。

一些 CSS 样式文本

语法

MARKDOWN

:::{div} sd-text-center sd-font-italic sd-text-primary
Some CSS styled text
:::

RST

.. div:: sd-text-center sd-font-italic sd-text-primary

    Some CSS styled text

如果您发现自己经常使用某个（些）类，请考虑提出问题，以请求添加新的角色/指令或选项！

div 指令还具有 style 选项，允许您添加内联 CSS 样式，但在大多数情况下不建议使用此选项。

文本

可用于样式和对齐的类：

• Alignment:

  • sd-text-justify

  • sd-text-left

  • sd-text-right

  • sd-text-center

• Size (size decreases from 1 to 6):

  • sd-fs-1

  • sd-fs-2

  • sd-fs-3

  • sd-fs-4

  • sd-fs-5

  • sd-fs-6

• Weight:

  • sd-font-weight-light

  • sd-font-weight-lighter

  • sd-font-weight-normal

  • sd-font-weight-bold

  • sd-font-weight-bolder

• Style

  • sd-font-italic

  • sd-text-decoration-none

  • sd-text-lowercase

  • sd-text-uppercase

  • sd-text-capitalize

• Wrapping

  • sd-text-wrap

  • sd-text-nowrap

  • sd-text-truncate (requires display: inline-block or display: block)

• Color

  • sd-text-{semantic color name} (uses --sd-color-{semantic color name} CSS variable)

  • sd-bg-text-{semantic color name} (uses --sd-color-{semantic color name}-text CSS variable)

Display

定义元素及其子元素的布局（参见 display）：

• sd-d-none

• sd-d-inline

• sd-d-inline-block

• sd-d-block

• sd-d-grid

• sd-d-flex-row (align items horizontally)

• sd-d-flex-column (align items vertically)

• sd-d-inline-flex

还提供了针对屏幕尺寸（xs、sm、md、lg）的变体，例如 sd-d-sm-none。

Flex 容器中的项目也可以根据主轴或副轴进行对齐，具体取决于 flex-direction。例如，使用 sd-d-flex-column 和 sd-align-major-center 将使项目在垂直方向上居中对齐。

• sd-align-major-start

• sd-align-major-end

• sd-align-major-center

• sd-align-major-spaced（沿主轴均匀分布以填满整个轴）

• sd-align-major-justify （沿主轴均匀分布以填满整个轴，第一个/最后一个项目位于轴的边缘）

• sd-align-minor-start

• sd-align-minor-end

• sd-align-minor-center

更多信息，请参阅 Flexbox 指南。

Sizing

按百分比设置对象的宽度/高度：

• sd-width-25, sd-height-25

• sd-width-50, sd-height-50

• sd-width-75, sd-height-75

• sd-width-100, sd-height-100

• sd-width-auto, sd-height-auto

Spacing

可以使用这些类来控制内边距（p）和外边距（m）；方向包括 (t) 上、(r) 右、(b) 下、(l) 左、x（左右）和 y（上下）。

间距按 0 到 5 的等级定义，例如 sd-px-1 或 sd-mt-5。

请注意，对于网格，使用特殊的间距类 sd-g-{屏幕尺寸}-{间距} 来设置外边距，或仅针对 x/y 方向；sd-gx-{屏幕尺寸}-{间距}。

颜色

可以使用 CSS 变量 设置颜色，这些变量为语义颜色名称定义：primary、secondary、success、warning、danger、info、light、dark 和 muted，以及特定颜色 black 和 white。

• sd-bg-{name}

• sd-bg-text-{name}

• sd-text-{name}

• sd-outline-{name}

额外的透明颜色：

• sd-bg-transparent

• sd-outline-transparent

• sd-text-transparent

边框

可以为元素应用厚度为 0 到 5 的边框，适用于所有或特定的一侧：

• sd-border-{thickness}

• sd-border-top-{thickness}

• sd-border-bottom-{thickness}

• sd-border-right-{thickness}

• sd-border-left-{thickness}

sd-border-0

sd-border-1

sd-border-2

sd-border-3

sd-border-4

sd-border-5

可以使用以下方式为边框设置不同的圆角程度：

• sd-rounded-0

• sd-rounded-1

• sd-rounded-2

• sd-rounded-3

• sd-rounded-pill

• sd-rounded-circle

sd-rounded-0

sd-rounded-1

sd-rounded-2

sd-rounded-3

sd-rounded-pill

sd-rounded-circle

阴影

可以为盒子元素应用阴影（阴影的颜色使用 --sd-color-shadow CSS 变量定义）：

• sd-shadow-none

• sd-shadow-sm

• sd-shadow-md

• sd-shadow-lg

sd-shadow-none

sd-shadow-sm

sd-shadow-md

sd-shadow-lg

Avatars

头像可以代表用户或品牌，带有徽标或品牌图形（参见 Material Design 图像）。

这些类用于将图像居中、设置其大小并添加圆形裁剪：

• sd-avatar-xs

• sd-avatar-sm

• sd-avatar-md

• sd-avatar-lg

• sd-avatar-xl

• sd-avatar-inherit

• sd-avatar-initial

sd-avatar-xs

sd-avatar-sm

sd-avatar-md

sd-avatar-lg

sd-avatar-xl

加载动画

使用 sd-animate-{name} 类在加载元素时添加 CSS 动画：

• sd-animate-slide-from-left

• sd-animate-slide-from-right

• sd-animate-grow100

• sd-animate-grow50

• sd-animate-grow50-rot20

请参阅 uxdesign.cc 和 material.io 获取关于动画的优秀指南。