CSS 类

对于大多数角色/指令，建议优先使用可用的选项来样式化组件，例如，这样可以更好地进行跨输出格式的样式设置。

但对于自定义情况，这些角色/指令也提供了 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

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

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

文本

类可用于样式化和对齐

  • 对齐

    • sd-text-justify

    • sd-text-left

    • sd-text-right

    • sd-text-center

  • 尺寸（尺寸从 1 到 6 递减）

    • sd-fs-1

    • sd-fs-2

    • sd-fs-3

    • sd-fs-4

    • sd-fs-5

    • sd-fs-6

  • 粗细

    • sd-font-weight-light

    • sd-font-weight-lighter

    • sd-font-weight-normal

    • sd-font-weight-bold

    • sd-font-weight-bolder

  • 样式

    • sd-font-italic

    • sd-text-decoration-none

    • sd-text-lowercase

    • sd-text-uppercase

    • sd-text-capitalize

  • 换行

    • sd-text-wrap

    • sd-text-nowrap

    • sd-text-truncate (需要 display: inline-block 或 display: block)

  • 颜色

    • sd-text-{semantic color name} (使用 --sd-color-{semantic color name} CSS 变量)

    • sd-bg-text-{semantic color name} (使用 --sd-color-{semantic color name}-text CSS 变量)

显示

定义元素及其子元素的布局 (参见 display)

  • sd-d-none

  • sd-d-inline

  • sd-d-inline-block

  • sd-d-block

  • sd-d-grid

  • sd-d-flex-row (水平对齐项目)

  • sd-d-flex-column (垂直对齐项目)

  • sd-d-inline-flex

变体也适用于屏幕尺寸 (xs, sm, md, lg)，例如 sd-d-sm-none。

弹性盒子内的项目也可以沿主轴或副轴对齐，具体取决于 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 指南。

尺寸调整

按百分比调整对象宽度/高度

  • 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

间距

可以使用这些类来控制内边距 (p) 和外边距 (m)；(t) 顶部，(r) 右侧，(b) 底部，(l) 左侧，x (左右) 和 y (顶部和底部)。

间距以 0 到 5 的刻度定义，例如 sd-px-1 或 sd-mt-5。

注意，对于网格，特殊的 gutter 类 sd-g-{screen-size}-{spacing} 用于设置外边距，或者仅用于 x/y；sd-gx-{screen-size}-{spacing}。

颜色

可以使用 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

头像

头像可以代表用户或品牌，带有徽标或品牌图形 (请参阅 Material Design imagery)。

这些类使图像居中，设置其大小并添加圆形裁剪

  • 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。