关于kendo ui的使用改变颜色方式
2016-02-29 11:00
756 查看
1、概述:
在网上kendo ui教程中示例在演示的时候引用的css样式为kendo.common.min.css与kendo.default.min.css这两个外部样式,大家有没有发现,这两个样式在选中的时候会出现一个黄色的选中条,很难看(当然排除配色需要用到的黄色的时候),多数情况下我们使用kendo ui是不会使用这个黄色的选中效果的,如何修改呢?
2、引入CSS样式:
以kendo ui中的panelbar为例,我们来看一下效果:
看到这个黄色的选中条了吧,是不是不太符合我们平时的审美呢?
3、如何改变选中样式:
其实kendo ui为我们提供了多种CSS样式选择的方案,在我们下载kendo ui的压缩包时,在styles这个文件夹内我们会看到很多CSS样式,初学者可能不知道它们都是做什么的,那么我来告诉大家,我们如果要改变这个选中样式,我们只需要改变我们引入的CSS文件就可以了,在styles文件夹下,找到kendo.silver.min.css这个文件,将引入kendo.default.min.css这条语句删除就可以了:
还是以panelbar为例,我们来看下效果:
是不是好看很多,其实kendo ui还给我们提供了很多种选择方案,这里就不做一一介绍了,下面附上几个效果图:
(1)、kendo.highcontrast.min.css
(2)、kendo.moonlight.min.css:
(3)、kendo.black.min.css:
4、总结:
关于kendo ui样式得介绍就先到这里,上面又演示了几个CSS样式,kendo ui的样式有很多,大家可以去试试各种样式,挑选一个满意的。
在网上kendo ui教程中示例在演示的时候引用的css样式为kendo.common.min.css与kendo.default.min.css这两个外部样式,大家有没有发现,这两个样式在选中的时候会出现一个黄色的选中条,很难看(当然排除配色需要用到的黄色的时候),多数情况下我们使用kendo ui是不会使用这个黄色的选中效果的,如何修改呢?
2、引入CSS样式:
<link href="css/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="css/kendo.default.min.css" rel="stylesheet" type="text/css">
以kendo ui中的panelbar为例,我们来看一下效果:
看到这个黄色的选中条了吧,是不是不太符合我们平时的审美呢?
3、如何改变选中样式:
其实kendo ui为我们提供了多种CSS样式选择的方案,在我们下载kendo ui的压缩包时,在styles这个文件夹内我们会看到很多CSS样式,初学者可能不知道它们都是做什么的,那么我来告诉大家,我们如果要改变这个选中样式,我们只需要改变我们引入的CSS文件就可以了,在styles文件夹下,找到kendo.silver.min.css这个文件,将引入kendo.default.min.css这条语句删除就可以了:
<link href="css/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="css/kendo.silver.min.css" rel="stylesheet" type="text/css">
还是以panelbar为例,我们来看下效果:
是不是好看很多,其实kendo ui还给我们提供了很多种选择方案,这里就不做一一介绍了,下面附上几个效果图:
(1)、kendo.highcontrast.min.css
(2)、kendo.moonlight.min.css:
(3)、kendo.black.min.css:
4、总结:
关于kendo ui样式得介绍就先到这里,上面又演示了几个CSS样式,kendo ui的样式有很多,大家可以去试试各种样式,挑选一个满意的。
相关文章推荐
- 限定UITextfield的输入字符的格式和字数
- UIBUtton 的两种图片设置
- UIBUtton 的两种图片设置
- 十八、UiAutomator 相关JAVA知识
- iOS蓝牙4.0 CoreBluetooth框架开发
- Android优化——UI优化(五) Listview 重用convertView
- UISwitch控件修改大小。设置颜色
- UIKit框架(6)控制器view的加载方式
- [转] DBCP 的validationQuery
- ueditor 配置和上传图片
- 别人的jqueyr解读
- UITableview里面对于分割线显示整个屏幕宽度的设置
- 【LeetCode】96. Unique Binary Search Trees
- Android优化——UI优化(四) 使用stytle
- Android优化——UI优化(三)使用ViewStub延迟加载
- Android优化——UI优化(二) 使用include标签复用布局
- Android优化——UI优化(一)优化布局层次
- UIKit框架(5)控制器的创建
- DicomIoException: Requested 132 bytes past end of fixed length stream.
- 显示队列内容