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

基础样式和控件库

不使用基础样式

单独控件的样式

定义自己的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控件编写的学习中。