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)op、(r)ight、(b)ottom、(l)eft、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。