BUI基础-使用样式文件

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的样式，有下面几种方式：

1. 同时引用dpl.css和bui.css，这也是BUI demo中提供的的css引用方式，可以使用BUI提供的html和基础样式
2. 不引入基础样式，引入bui.css和extend.css，此时BUI的所有控件的样式都可以正常显示，但是无法使用BUI提供的html和基础样式
3. 仅引入使用单个控件的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;">

1. <link href="https://s.tbcdn.cn/g/fi/bui/css/dpl-min.css" rel="stylesheet">

2. <link href="https://g.tbcdn.cn/g/bui/css/bui-min.css" rel="stylesheet">

4. <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;">

1. <link href="https://g.tbcdn.cn/g/bui/css/bui-min.css" rel="stylesheet">

2. <link href="https://s.tbcdn.cn/g/fi/bui/css/extend-min.css" rel="stylesheet">

4. <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;">

2. <link href="https://s.tbcdn.cn/g/fi/bui/css/calendar-min.css" rel="stylesheet">

4. <link href="https://g.tbcdn.cn/g/bui/css/grid-min.css" rel="stylesheet">

6. <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控件编写的学习中。