1、概述:
在網上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的樣式有很多,大家可以去試試各種樣式,挑選一個滿意的。