注意
CSS辅助类样式做了全新的升级，请点击顶部的「样式」查看新版。旧版本可以继续，但将不再更新。
## 基本使用
例如，下面这个例子，我们内容区渲染了两个按钮，但是可以看到，两个按钮紧贴在一起，并不是很美观，于是我们想添加一定的间隔
```schema: scope="body"
[
{
"type": "button",
"label": "按钮1",
"actionType": "dialog",
"dialog": {
"title": "弹框",
"body": "Hello World!"
}
},
{
"type": "button",
"label": "按钮2",
"actionType": "dialog",
"dialog": {
"title": "弹框",
"body": "Hello World!"
}
}
]
```
1. 通过查阅按钮文档可知，按钮支持 className 配置项，也就是说可以在按钮上添加 CSS 类名；
2. 再查阅当前页面下面 [外边距部分](#%E5%A4%96%E8%BE%B9%E8%B7%9D) 可知，我们可以添加`m-l`类名实现`margin-left: 15px;`的 CSS 效果
3. 于是我们在`按钮2`的配置中添加`"className": "m-l"`，就能实现间距效果了
```schema: scope="body"
[
{
"type": "button",
"label": "按钮1",
"actionType": "dialog",
"dialog": {
"title": "弹框",
"body": "Hello World!"
}
},
{
"type": "button",
"label": "按钮2",
"className": "m-l",
"actionType": "dialog",
"dialog": {
"title": "弹框",
"body": "Hello World!"
}
}
]
```
绝大部分组件都支持各种形式的 CSS 类名自定义，然后搭配该文档中的各种类名可以实现各式各样的样式调整。具体请查阅组件文档；
> 你可能需要掌握一些基础的 CSS 知识
## 字体颜色
实际颜色取决于主题，下面示例是默认主题的颜色。
```css
.text-primary {
color: #7266ba;
}
.text-primary-lt {
color: #6254b2;
}
.text-primary-lter {
color: #564aa3;
}
.text-primary-dk {
color: #6254b2;
}
.text-primary-dker {
color: #564aa3;
}
.text-info {
color: #23b7e5;
}
.text-info-lt {
color: #19a9d5;
}
.text-info-lter {
color: #1797be;
}
.text-info-dk {
color: #19a9d5;
}
.text-info-dker {
color: #1797be;
}
.text-success {
color: #27c24c;
}
.text-success-lt {
color: #23ad44;
}
.text-success-lter {
color: #1e983b;
}
.text-success-dk {
color: #23ad44;
}
.text-success-dker {
color: #1e983b;
}
.text-warning {
color: #fad733;
}
.text-warning-lt {
color: #f9d21a;
}
.text-warning-lter {
color: #f4ca06;
}
.text-warning-dk {
color: #f9d21a;
}
.text-warning-dker {
color: #f4ca06;
}
.text-danger {
color: #f05050;
}
.text-danger-lt {
color: #ee3939;
}
.text-danger-lter {
color: #ec2121;
}
.text-danger-dk {
color: #ee3939;
}
.text-danger-dker {
color: #ec2121;
}
.text-dark {
color: #3a3f51;
}
.text-dark-lt {
color: #2f3342;
}
.text-dark-lter {
color: #252833;
}
.text-dark-dk {
color: #2f3342;
}
.text-dark-dker {
color: #252833;
}
.text-white {
color: #fff;
}
.text-white-lt {
color: #f2f2f2;
}
.text-white-lter {
color: #e6e6e6;
}
.text-white-dk {
color: #f2f2f2;
}
.text-white-dker {
color: #e6e6e6;
}
.text-black {
color: #1c2b36;
}
.text-black-lt {
color: #131e25;
}
.text-black-lter {
color: #0b1014;
}
.text-black-dk {
color: #131e25;
}
.text-black-dker {
color: #0b1014;
}
.text-muted {
color: var(--text--muted-color);
}
.text-loud {
color: var(--text--loud-color);
}
```
## 图标
amis 集成了 [fontawesome](http://fontawesome.io/icons/)，所以关于图标部分，请前往 [fontawesome](http://fontawesome.io/icons/) 查看。
## 布局
水平布局可以考虑用 Bootstrap 的 [Grids](http://getbootstrap.com/css/#grid) 或者用 `hbox` 加 `col`
```html