背景着色会更改元素的背景色和具备对比鲜明的文本颜色。
为元素应用 .clean
会充重置背景色为透明。
为元素应用 .highlight 来启用荧光笔高亮背景。
文本着色会更改文本的颜色。
为浅色背景着色应用文本着色:.text-tint
为外观元素添加 .long-shadow
类来启用长阴影外观选项。
.state
为元素启用状态外观,针对 :hover
、:focus
、:active
会获得不同的样式。
a
和 .btn
默认启用状态外观。
.disabled
& [disabled]
为元素应用禁用外观,元素(即便是文本框、按钮或链接)将不再响应鼠标事件,包括外观变化和 JavaScript 事件。
.disabled .disabled.muted
降低元素的透明度。
正常文本段落
.muted: 弱化显示的文本段落
.muted-light: 轻微弱化显示的文本段落
.muted-dark: 强力弱化显示的文本段落
为背景着色的标签应用 .outline
来添加轮廓外观。
当 .outline
单独使用时仅仅为元素添加一个默认的边框样式。
为 .outline
元素添加 `.hover-solid` 类,可以实现鼠标悬停或着触摸时填充背景的效果。
.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 |
为元素应用较大的圆角样式。 |
.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 |
为元素左右两个方向应用内边距 |
.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 来实现浮现的消息框外观。