CSS 类

CSS 类#

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

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

一些 CSS 样式文本

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

.. 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
_images/ebp-logo.png
sd-avatar-sm
_images/ebp-logo.png
sd-avatar-md
_images/ebp-logo.png
sd-avatar-lg
_images/ebp-logo.png
sd-avatar-xl
_images/ebp-logo.png

加载动画#

使用 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 获取关于动画的优秀指南。

目录