CSS 类

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 框内的项目也可以沿主轴或副轴对齐，具体取决于 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 图像）。

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

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

目录