BUI的css文件
BUI提供了以下css文件
| 种类 | 文件 | 内容 |
|---|---|---|
| 基础样式文件 | dpl.css | BUI提供的基于bootstrap兼容ie6,7的基础样式 |
| 控件样式文件 | bui.css | BUI控件库中的所有样式的css |
| 扩展的样式文件 | extend.css | 不使用基础样式文件（dpl.css）时，提供控件样式正常的扩展样式 |
| 各个控件的样式文件 | calendar.css,grid.css,menu.css,overlay.css,select.css,slider.css,tab.css | 各个控件对应的css |
样式的使用
使用BUI的样式，有下面几种方式：
- 同时引用dpl.css和bui.css，这也是BUI demo中提供的的css引用方式，可以使用BUI提供的html和基础样式
- 不引入基础样式，引入bui.css和extend.css，此时BUI的所有控件的样式都可以正常显示，但是无法使用BUI提供的html和基础样式
- 仅引入使用单个控件的css
基础样式和控件库
<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
<link href="https://s.tbcdn.cn/g/fi/bui/css/dpl-min.css" rel="stylesheet">
<link href="https://g.tbcdn.cn/g/bui/css/bui-min.css" rel="stylesheet">
<link href="https://s.tbcdn.cn/g/fi/bui/css/??dpl-min.css,bui-min.css" rel="stylesheet">
</pre>
不使用基础样式
<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
<link href="https://g.tbcdn.cn/g/bui/css/bui-min.css" rel="stylesheet">
<link href="https://s.tbcdn.cn/g/fi/bui/css/extend-min.css" rel="stylesheet">
<link href="https://s.tbcdn.cn/g/fi/bui/css/??bui-min.css,extend-min.css" rel="stylesheet">
</pre>
单独控件的样式
<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
<link href="https://s.tbcdn.cn/g/fi/bui/css/calendar-min.css" rel="stylesheet">
<link href="https://g.tbcdn.cn/g/bui/css/grid-min.css" rel="stylesheet">
<link href="https://s.tbcdn.cn/g/fi/bui/css/??grid-min.css,calendar-min.css" rel="stylesheet">
</pre>
定义自己的css样式
在BUI的源码中：assets/css/less中是上面的css生成的源码，有下面几个目录：
- base: 基础样式的less文件
- bui: BUI的所有控件的样式文件
- extend : 各个控件不使用基础样式时，需要附加的样式
- single : 各个控件单独编译成单个css文件的less文件，基本通过导入extend和bui目录中的less文件来实现
修改现有的less文件
你可以通过直接修改less文件中的样式或者修改base和bui目录中variables.less中的参数,重新编译后就可以生成自己的样式：
- 通过修改参数的方式对于替换皮肤颜色来说是最好的方式
- 修改具体less中的样式，一般来说不建议这样做，如果有覆盖样式的需求，可以增加样式或者编译出自己的文件
- 你可以修改less入口文件中引入的less文件，可以去掉不需要的或者增加自定义的less文件
下一步学习
不同的场景下你可以选择不同的引用方式，如果你想完全重置BUI的所有样式，你需要修改less文件后，使用less重新编译对应的less文件，接下来你可以查看一下工具类，然后进入到BUI控件编写的学习中。
