背景着色

背景着色会更改元素的背景色和具备对比鲜明的文本颜色。

.primary
.secondary
.accent
.success
.danger
.warning
.info
.special
.important
.dark
.inverse
.green
.red
.yellow
.blue
.purple
.brown
.black
.primary-pale
.secondary-pale
.accent-pale
.success-pale
.danger-pale
.warning-pale
.info-pale
.special-pale
.important-pale
.green-pale
.red-pale
.yellow-pale
.blue-pale
.purple-pale
.brown-pale
.gray
.white

为元素应用 .clean 会充重置背景色为透明。

为元素应用 .highlight 来启用荧光笔高亮背景。

文本着色

文本着色会更改文本的颜色。

.text-primary
.text-secondary
.text-accent
.text-success
.text-danger
.text-warning
.text-info
.text-special
.text-important
.text-green
.text-red
.text-yellow
.text-blue
.text-purple
.text-brown
.text-black
.text-gray
.text-white

为浅色背景着色应用文本着色:.text-tint

.primary-pale.text-tint
.secondary-pale.text-tint
.accent-pale.text-tint
.green-pale.text-tint
.red-pale.text-tint
.yellow-pale.text-tint
.blue-pale.text-tint
.purple-pale.text-tint
.brown-pale.text-tint
长阴影

为外观元素添加 .long-shadow 类来启用长阴影外观选项。

.primary
.secondary
.accent
.success
.danger
.warning
.info
.special
.important
.green
.red
.yellow
.blue
.purple
.brown
.black
.primary-pale
.secondary-pale
.accent-pale
.success-pale
.danger-pale
.warning-pale
.info-pale
.special-pale
.important-pale
.green-pale
.red-pale
.yellow-pale
.blue-pale
.purple-pale
.brown-pale
.gray
.white
状态外观
触发状态:.state

为元素启用状态外观,针对 :hover:focus:active会获得不同的样式。

a.btn 默认启用状态外观。

.state:normal
.state:hover
.state:focus
.state:active

禁用:.disabled & [disabled]

为元素应用禁用外观,元素(即便是文本框、按钮或链接)将不再响应鼠标事件,包括外观变化和 JavaScript 事件。

  .disabled   .disabled
弱化:.muted

降低元素的透明度。

正常文本段落

.muted: 弱化显示的文本段落

.muted-light: 轻微弱化显示的文本段落

.muted-dark: 强力弱化显示的文本段落

轮廓外观

为背景着色的标签应用 .outline 来添加轮廓外观。

.outline 单独使用时仅仅为元素添加一个默认的边框样式。

.outline
.primary.outline
.success.outline
.danger.outline
.warning.outline
.info.outline
.special.outline
.important.outline
.dark.outline
.inverse.outline
.primary-pale.outline
.green-pale.outline
.red-pale.outline
.yellow-pale.outline
.blue-pale.outline
.purple-pale.outline
.brown-pale.outline
.gray.outline
.white.outline

.outline 元素添加 `.hover-solid` 类,可以实现鼠标悬停或着触摸时填充背景的效果。

.primary.outline
.success.outline
.danger.outline
.warning.outline
.info.outline
.special.outline
.important.outline
.dark.outline
.inverse.outline
.primary-pale.outline
.green-pale.outline
.red-pale.outline
.yellow-pale.outline
.blue-pale.outline
.purple-pale.outline
.brown-pale.outline
.gray.outline
.white.outline
容器
画布:.canvas

为标签应用主要背景色,通常为 #FFF

我在一个 .canvas 内。

盒子:.box

为标签应用画布背景,设置基本内边距,设置边框但边框颜色为透明。

我在一个 .box 内。
层:.layer

为标签应用画布背景,设置外阴影。

我在一个 .layer 内。

默认阴影深度为 .shadow-3,可以通过阴影辅助类来更改阴影深度。

我在一个 .layer.shadow-1 内。
我在一个 .layer.shadow-2 内。
我在一个 .layer.shadow-3 内。
分段:.section

为标签应用画布背景,设置较小的外阴影,增加下外边距。

我是在一个 .section 内。
坑:.well

为标签应用内阴影,设置基本内边距,使用轻微的半透明黑色背景。

我是在一个 .well 内。
提示当前页面使用的容器
形状
.circle 为元素应用 50% 的圆角样式
通常用在长宽相等的元素上来获得一个圆形外观。
部分控件会(例如按钮.btn)获得药丸外观。
.rounded 为元素应用基本的圆角样式。
.rounded-sm 为元素应用较小的圆角样式。
.rounded-lg 为元素应用较大的圆角样式。
.btn.circle
.rounded
.rounded-sm
.rounded-lg
分割线
.divider 在元素下方应用边框
.divider-top 在元素上方应用边框
.divider-right 在元素右侧应用边框
.divider-left 在元素左侧应用边框
.divider-all 在元素四周应用边框
.shadow-divider 使用内部阴影绘制下边框,对于一些没有设置边框的元素动态设置阴影比较友好。
.shadow-divider-outside 使用外部阴影绘制下边框。
边距
.space 在元素下方应用外边距
.space-sm 在元素下方应用较小的外边距
.space-xs 在元素下方应用更小的外边距
.space-lg 在元素下方应用较大的外边距
.space-xl 在元素下方应用更大的外边距
.no-margin 为元素移除外边距
.has-margin 为元素四个方向应用外边距
.has-margin-sm 为元素四个方向应用较小的外边距
.no-padding 为元素移除内边距
.has-padding 为元素四个方向应用内边距
.has-padding-xs 为元素四个方向应用超小的内边距
.has-padding-sm 为元素四个方向应用较小的内边距
.has-padding-lg 为元素四个方向应用大的内边距
.has-padding-xl 为元素四个方向应用超超大的内边距
.has-padding-v 为元素上下两个方向应用内边距
.has-padding-h 为元素左右两个方向应用内边距
加载指示器.loading

为元素应用加载指示器,并隐藏内部内容。

.loading-light 应用在浅色背景元素上,同时 .loading 不可省略。

点我加载 点我加载
变形
.rotate-90 顺时针旋转 90度
.rotate-180 顺时针旋转 180度
.rotate-270 顺时针旋转 270度
.flip-h 水平翻转
.flip-v 垂直翻转
阴影
.shadow-none 移除元素上的阴影设置
.shadow & .shadow-1 应用阴影
.shadow-2 应用较大深度的阴影
.shadow-3 应用更大深度的阴影
.text-shadow-white 为元素文本应用白色阴影
.text-shadow-black 为元素文本应用黑色阴影

.shadow-1

.shadow-2

.shadow-3

.text-shadow-white

.text-shadow-black

滤镜

模糊滤镜:.blur

.blur-lg 应用较大的模糊半径,.blur-sm 应用较小的模糊半径。

一个模糊的内容 一个模糊的内容 一个模糊的内容

灰度滤镜:.grayscale

元素以灰度色彩显示。

  我是一个 .primary 按钮
综合应用

除背景着色和文本着色外观类仅能同时存在一个,其他所有外观选项都可以搭配使用来获得更加复杂的外观效果。


Hello world!

这是使用 .box.danger.rounded.shadow 来实现浮现的消息框外观。