开始使用

如何获得VusUI

1、Git 仓库下载(推荐)

你可以通过 GitHub 或者 码云 来下载VusUI完整源码包。

2、npm 安装

$ npm install vusui

目录结构:

Vusui
  ├─css //css目录
  │  │─vusui.css //常规版
  │  │─vusui-all.css //完整版
  │  │─vusui-lite.css //精简版
  │  └─vusui-ie9.css //支持IE9插件
  ├─fonts  //字体图标目录
  ├─js  //JS插件目录
  └─scss //SCSS目录

快速上手

使用方式:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>VusUI使用方式</title>
<!-- 引入vusui.css -->
<link rel="stylesheet" href="./css/vusui-all.css">
<!-- 引入支持IE9 css -->
<link rel="stylesheet" href="./css/vusui-ie9.css">
</head>
<body>
<!-- 你的HTML代码 -->

<!-- 引入vusui.js插件 -->
<script src="./js/vusui.js"></script>
<script>
function(){
  document.getElementById("button").addEventListener('click', function() {
    vus.alert('初体验Vusui.js');
  });
}();
</script>
</body>
</html>

布局

布局容器

VusUI 需要一个容器元素来包裹网站的内容。
我们可以使用以下两个容器类:
.vus-container类,用于固定宽度并支持响应式布局的容器。
.vus-container-fluid类,用于 100% 宽度,占据全部视口(viewport)的容器。

<div class="vus-container">
  ...
</div>
<div class="vus-container-fluid">
  ...
</div>

媒体查询

VusUI 使用以下媒体查询(media query)来创建关键的分界点阈值。

/*小型设备 (手机, 大于等于560px)*/
@media (min-width: 560px) { -xs-... }

/*媒体设备(平板,大于等于 768px)*/
@media (min-width: 768px) { -sm-... }

/*大型设备(桌面显示器,大于等于 1002px)*/
@media (min-width: 1002px) { -md-... }

/*超大型设备(大桌面显示器,大于等于 1280px)*/
@media (min-width: 1280px) { -lg-... }

网格系统

使用.vus-box类,作为网格的容器样式。在容器内添加.vus-col-1.vus-col-12作为网格的类。

实例:
1
1
1
1
1
1
1
1
1
1
1
1
1
11
2
2
2
2
2
2
2
10
3
3
3
3
3
9
4
4
4
4
8
5
7
6
6
12
<div class="vus-box">
  <div class="vus-col-2">2</div>
  <div class="vus-col-10">10</div>
</div>

网格列偏移

.vus-col-(1-12).vus-flex-(1-10)类中添加.vus-offset-(1-12)类作为网格偏移的样式。

实例:
1
10
4
4
2
4
2
<div class="vus-box">
  <div class="vus-col-1 vus-offset-1">1</div>
  <div class="vus-col-10">10</div>
</div>

网格列排序(不支持小于IE10)

.vus-col-(1-12).vus-flex-(1-10)类中添加.vus-order-(0-12/first/last)类作为网格列排序的样式。

实例:
1
2
3
4
1
2
3
1
2
3
4
5
6
<div class="vus-box">
  <div class="vus-flex-4 vus-order-4">
    <div class="vus-bg--light vus-text-center">1</div>
  </div>
  <div class="vus-flex-4 vus-order-3">
    <div class="vus-bg--light vus-text-center">2</div>
  </div>
  <div class="vus-flex-4 vus-order-1">
    <div class="vus-bg--light vus-text-center">3</div>
  </div>
  <div class="vus-flex-4 vus-order-2">
    <div class="vus-bg--light vus-text-center">4</div>
  </div>
</div>

弹性盒子(Flex Box)

使用.vus-box类,作为弹性盒子的容器样式。在容器内添加.vus-flex-1.vus-flex-10作为Flex的类。

实例:
1
2
2
3
3
3
4
4
4
4
5
5
5
5
5
6
6
6
6
6
6
7
7
7
7
7
7
7
8
8
8
8
8
8
8
8
9
9
9
9
9
9
9
9
9
10
10
10
10
10
10
10
10
10
10
<div class="vus-box">
  <div class="vus-flex-3">3</div>
  <div class="vus-flex-3">3</div>
  <div class="vus-flex-3">3</div>
</div>

网格与盒子间距

.vus-box默认左右外边距(margin)为-5px.vus-flex-(1-10).vus-col-(1-12)左右内边距(padding)为5px,所有上下内外边距(padding)为0px

  • .vus-box类添加.v-nm-lr使左右外边距(margin)为0px、添加.v-np-lr使左右内边距(padding)为0px
  • 通过添加.v-lr-(1-10)赋予.vus-box类不同的左右间距。
  • 或者通过添加.v-tb-(1-10)赋予.vus-box类不同的上下间距。
实例:
4
4
4
3
3
3
3
6
6
3
3
3
3
4
4
4
4
6
6
6
6
3
3
3
3
3
3
3
3
去除.vus-box外边间距(.v-nm-lr):
<div class="vus-box v-nm-lr">
  <div class="vus-col-6">6</div>
  <div class="vus-col-6">6</div>
</div>

去除.vus-box外边间距(.v-nm-lr)与.vus-col-(*)、.vus-flex-(*)内边间距(.v-np-lr):
<div class="vus-box v-nm-lr v-np-lr">
  <div class="vus-col-6">6</div>
  <div class="vus-col-6">6</div>
</div>
<div class="vus-box v-nm-lr v-np-lr">
  <div class="vus-flex-2">2</div>
  <div class="vus-flex-2">2</div>
</div>

间距(.v-lr-1、.v-tb-5):
<div class="vus-box v-lr-1 v-tb-5">
  <div class="vus-col-6">6</div>
  <div class="vus-col-6">6</div>
  <div class="vus-col-6">6</div>
  <div class="vus-col-6">6</div>
</div>

间距(.v-lr-10、.v-tb-10):
<div class="vus-box v-lr-10 v-tb-10">
  <div class="vus-col-6">6</div>
  <div class="vus-col-6">6</div>
  <div class="vus-col-6">6</div>
  <div class="vus-col-6">6</div>
</div>

响应式网格与盒子参数

通过下表可以详细查看跨屏响应网格系统是如何在多种屏幕设备上工作的。

小型设备 (手机 ≥560px) 媒体设备 (平板 ≥768px) 大型设备 (桌面显示器 ≥1002px) 超大型设备 (大桌面显示器 ≥1280px)
网格类前缀 .vus-col-xs- .vus-col-sm- .vus-col-md- .vus-col-lg-
弹性盒子类前缀 .vus-flex-xs- .vus-flex-sm- .vus-flex-md- .vus-flex-lg-
偏移类前缀 .vus-offset-xs- .vus-offset-sm- .vus-offset-md- .vus-offset-lg-
排序类前缀 .vus-order-xs- .vus-order-sm- .vus-order-md- .vus-order-lg-
间距(左右)类前缀 .v-lr-xs- .v-lr-sm- .v-lr-md- .v-lr-lg-
间距(上下)类前缀 .v-tb-xs- .v-tb-sm- .v-tb-md- .v-tb-lg-

排版

标题

使用.vus-h1.vus-h6类,作为标题的样式。在标题内还可以添加.v-small类,作为<small>标签样式,可以用来标记副标题。

实例:

h1.标题示例 h1.副标题示例

h2.标题示例 h2.副标题示例

h3.标题示例 h3.副标题示例

h4.标题示例 h4.副标题示例

h5.标题示例 h5.副标题示例
h6.标题示例 h6.副标题示例
<h1 class="vus-h1">
  h1.标题示例 <small class="v-small">h1.副标题示例</small>
</h1>
<h2 class="vus-h2">
  h2.标题示例 <small class="v-small">h2.副标题示例</small>
</h2>
<h3 class="vus-h3">
  h3.标题示例 <small class="v-small">h3.副标题示例</small>
</h3>
<h4 class="vus-h4">
  h4.标题示例 <small class="v-small">h4.副标题示例</small>
</h4>
<h5 class="vus-h5">
  h5.标题示例 <small class="v-small">h5.副标题示例</small>
</h5>
<h6 class="vus-h6">
  h6.标题示例 <small class="v-small">h6.副标题示例</small>
</h6>

页面主体

已将全局 font-size 设置为 14pxline-height 设置为 1.5。这些属性直接赋予 <body> 元素和所有段落元素。另外可使用.vus-p类,作为<p>的样式。

实例:

山不在高,有仙则名。水不在深,有龙则灵。斯是陋室,惟吾德馨。苔痕上阶绿,草色入帘青。谈笑有鸿儒,往来无白丁。可以调素琴,阅金经。无丝竹之乱耳,无案牍之劳形。南阳诸葛庐,西蜀子云亭。孔子云:何陋之有?

译文:山不在于高,有了神仙就出名。水不在于深,有了龙就显得有了灵气。这是简陋的房子,只是我(住屋的人)品德好(就感觉不到简陋了)。长到台阶上的苔痕颜色碧绿;草色青葱,映入帘中。到这里谈笑的都是知识渊博的大学者,交往的没有知识浅薄的人,可以弹奏不加装饰的古琴,阅读佛经。没有奏乐的声音扰乱双耳,没有官府的公文使身体劳累。南阳有诸葛亮的草庐,西蜀有扬子云的亭子。孔子说:有什么简陋的呢?

中心内容
<p class="vus-lead">山不在高,有仙则名。水不在深,有龙则灵...</p>
常规内容
<p class="vus-p">译文:山不在于高,有了神仙就出名。水不在于深,有了龙就显得有了灵气...</p>
内联文本元素

使用.vus-mark类,作为<mark>标签样式。

<p>
  山不在高,<mark class="vus-mark">有仙则名</mark>。水不在深,<mark class="vus-mark">有龙则灵</mark>...
</p>

删除文本/无用文本

实例: 这里是带删除线的文本。
这里是无用的文本。
<del>这里是带删除线的文本。</del>
<s>这里是无用的文本。</s>

插入文本/下划线文本

实例: 这里是插入的文本。
这里是带下划线的文本。
<ins>这里是插入的文本。</ins>
<u>这里是带下划线的文本。</u>

小号文本

对于不需要强调的inline或block类型的文本,使用.vus-small类,作为<small>标签样式,包裹在内的文本将被设置为父容器字体大小的75%

实例: 明月几时有?把酒问青天。不知天上宫阙,今夕是何年。我欲乘风归去,又恐琼楼玉宇,高处不胜寒。起舞弄清影,何似在人间?
转朱阁,低绮户,照无眠。不应有恨,何事长向别时圆?人有悲欢离合,月有阴晴圆缺,此事古难全。但愿人长久,千里共婵娟。
<small class="vus-small">明月几时有?把酒问青天。不知天上宫阙,今夕是何年。我欲乘风归去,又恐琼楼玉宇,高处不胜寒。起舞弄清影,何似在人间?...</small>

着重

通过增加 font-weight 值强调一段文本。也可以通过.vus-text-bold类来强调一段文本。

实例: 桃之夭夭,灼灼其华。之子于归,宜其室家。
桃之夭夭,有蕡其实。之子于归,宜其家室。

桃之夭夭,其叶蓁蓁。之子于归,宜其家人。

<strong>桃之夭夭,灼灼其华。之子于归,宜其室家。</strong>
<b>桃之夭夭,有蕡其实。之子于归,宜其家室。</b>
<span class="vus-text-bold">桃之夭夭,其叶蓁蓁。之子于归,宜其家人。</span>

斜体

使用.vus-text-italic类来强调一段文本斜体。

实例:

邹孟轲母,号孟母。其舍近墓。孟子之少时,嬉游为墓间之事。孟母曰:“此非吾所以居处子。”乃去,舍市旁。其嬉游为贾人炫卖之事。孟母又曰:“此非吾所以处吾子也。”复徙居学宫之旁。其嬉游乃设俎豆,揖让进退。孟母曰:“真可以处居子矣。”遂居。及孟子长,学六艺,卒成大儒之名。君子谓孟母善以渐化。

译文:孟子的母亲,世人称她孟母。过去孟子小时候,居住的地方离墓地很近,孟子学了些祭拜之类的事。他的母亲说:“这个地方不适合孩子居住。”于是将家搬到集市旁,孟子学了些做买卖和屠杀的东西。母亲又想:“这个地方还是不适合孩子居住。”又将家搬到学宫旁边。孟子学习会了在朝廷上鞠躬行礼及进退的礼节。孟母说:“这才是孩子居住的地方。”就在这里定居下来了。

<em class="vus-text-italic">邹孟轲母,号孟母。其舍近墓。孟子之少时,嬉游为墓间之事。...</em>
<i class="vus-text-italic">译文:孟子的母亲,世人称她孟母。过去孟子小时候,居住的地方离墓地很近...</i>

文本对齐

通过文本对齐类,可以简单方便的将文字重新对齐。

实例:

文本左对齐。

文本居中对齐。

文本右对齐。

文本首行缩进
初,权谓吕蒙曰:“卿今当涂掌事,不可不学!”蒙辞以军中多务。权曰:“孤岂欲卿治经为博士邪?但当涉猎,见往事耳。卿言多务,孰若孤?孤常读书,自以为大有所益。”蒙乃始就学。及鲁肃过寻阳,与蒙论议,大惊曰:“卿今者才略,非复吴下阿蒙!”蒙曰:“士别三日,即更刮目相待,大兄何见事之晚乎!”肃遂拜蒙母,结友而别。
文本两端对齐
初,权谓吕蒙曰:“卿今当涂掌事,不可不学!”蒙辞以军中多务。权曰:“孤岂欲卿治经为博士邪?但当涉猎,见往事耳。卿言多务,孰若孤?孤常读书,自以为大有所益。”蒙乃始就学。及鲁肃过寻阳,与蒙论议,大惊曰:“卿今者才略,非复吴下阿蒙!”蒙曰:“士别三日,即更刮目相待,大兄何见事之晚乎!”肃遂拜蒙母,结友而别。
加大文本间距
初,权谓吕蒙曰:“卿今当涂掌事,不可不学!”蒙辞以军中多务。权曰:“孤岂欲卿治经为博士邪?但当涉猎,见往事耳。卿言多务,孰若孤?孤常读书,自以为大有所益。”蒙乃始就学。及鲁肃过寻阳,与蒙论议,大惊曰:“卿今者才略,非复吴下阿蒙!”蒙曰:“士别三日,即更刮目相待,大兄何见事之晚乎!”肃遂拜蒙母,结友而别。
<p class="vus-text-left">文本左对齐。</p>
<p class="vus-text-center">文本居中对齐。</p>
<p class="vus-text-right">文本右对齐。</p>
<p class="vus-text-indent">文本首行缩进。</p>
<p class="vus-text-justify">文本两端对齐。</p>
<p class="vus-text-spacing">文本加大间距。</p>

文本截断

文本溢出显示省略号。

实例:

这段文字是非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长

<p class="vus-text-ellipsis">文本溢出显示省略号。</p>

改变大小写

通过这几个类可以改变文本的大小写。

实例: Vus UI 全部字母小写
vus ui 全部字母大写
vus ui 首字母大写
<p class="vus-text-lowercase">全部字母小写。</p>
<p class="vus-text-uppercase">全部字母大写。</p>
<p class="vus-text-capitalize">首字母大写。</p>

文本字号

使用.vus-fs-(12/14/16/18/20/30/40/50)类,可设置不同大小的文本字号。

实例: 文本字号示例 50px
文本字号示例 20px
文本字号示例 12px
<p class="vus-fs-50">文本字号示例 50px</p>
<p class="vus-fs-20">文本字号示例 20px</p>
<p class="vus-fs-12">文本字号示例 12px</p>

文本颜色

一些有代表意义的文本颜色类。

实例:

VusUI 首选 成功 警告 危险 信息 尊贵 黑色 灰色 白色 纯黑色 红色 黄色 绿色 粉红色 橙色 青色 棕色 紫色

<span class="vus-text--vusui">VusUI</span>
<span class="vus-text--primary">首选</span>
<span class="vus-text--success">成功</span>
<span class="vus-text--warning">警告</span>
<span class="vus-text--danger">危险</span>
<span class="vus-text--info">信息</span>
<span class="vus-text--noble">尊贵</span>
<span class="vus-text--dark">黑色</span>
<span class="vus-text--light">灰色</span>
<span class="vus-text--white">白色</span>
<span class="vus-text--black">纯黑色</span>
<span class="vus-text--red">红色</span>
<span class="vus-text--yellow">黄色</span>
<span class="vus-text--green">绿色</span>
<span class="vus-text--pink">粉红色</span>
<span class="vus-text--orange">橙色</span>
<span class="vus-text--cyan">青色</span>
<span class="vus-text--brown">棕色</span>
<span class="vus-text--violet">紫色</span>

背景颜色

一些有代表意义的背景颜色类。

实例:

VusUI 首选 成功 警告 危险 信息 尊贵 黑色 灰色 白色 纯黑色 红色 黄色 绿色 粉红色 橙色 青色 棕色 紫色

<span class="vus-bg--vusui">VusUI</span>
<span class="vus-bg--primary">首选</span>
<span class="vus-bg--success">成功</span>
<span class="vus-bg--warning">警告</span>
<span class="vus-bg--danger">危险</span>
<span class="vus-bg--info">信息</span>
<span class="vus-bg--noble">尊贵</span>
<span class="vus-bg--dark">黑色</span>
<span class="vus-bg--light">灰色</span>
<span class="vus-bg--white">白色</span>
<span class="vus-bg--black">纯黑色</span>
<span class="vus-bg--red">红色</span>
<span class="vus-bg--yellow">黄色</span>
<span class="vus-bg--green">绿色</span>
<span class="vus-bg--pink">粉红色</span>
<span class="vus-bg--orange">橙色</span>
<span class="vus-bg--cyan">青色</span>
<span class="vus-bg--brown">棕色</span>
<span class="vus-bg--violet">紫色</span>

缩略语、首字母缩略语

使用.vus-abbr.vus-acronym类,作为<abbr><acronym>标签样式,当鼠标悬停在缩写和缩写词上时就会显示完整内容,但需要包含 title 属性。

实例:

CSS是一种层叠样式表。

HTML是一种超文本标记语言。

<abbr class="vus-abbr" title="Cascading Style Sheets">CSS是一种层叠样式表。</abbr>
<acronym class="vus-acronym" title="HyperText Markup Language">HTML是一种超文本标记语言。</acronym>

地址

使用.vus-address类,作为<address>标签样式。在每行结尾添加<br>可以保留需要的样式。

实例:
地址:中国·广东省阳春市
邮箱:adwvus@gmail.com
官方网站:
http://vusui.com
<address class="vus-address">
    地址:中国·广东省阳春市 <br>
    邮箱:adwvus@gmail.com
</address>
<address class="vus-address">
    <strong>官方网站:</strong> <br>
    <a href="http://vusui.com">http://vusui.com</a>
</address>

引用

使用.vus-blockquote类,作为<blockquote>标签样式,通过赋予.v-reverse类可以让引用呈现内容右对齐的效果。也可以使用.v-small类,作为<small>标签样式,用于标明引用来源。

实例:

人生若只如初见,何事秋风悲画扇。

问世间,情为何物,直教生死相许?

元好问《摸鱼儿·雁丘词 / 迈陂塘》

终南阴岭秀,积雪浮云端。林表明霁色,城中增暮寒。

终南望余雪--唐代:祖咏
<blockquote class="vus-blockquote">人生若只如初见,何事秋风悲画扇。</blockquote>
<blockquote class="vus-blockquote v-reverse">
  <p>终南阴岭秀,积雪浮云端。林表明霁色,城中增暮寒。</p>
  <small class="v-small">终南望余雪--唐代:祖咏</small>
</blockquote>

水平线

基本实例

使用.vus-hr类,作为<hr>标签样式。

实例:

<hr class="vus-hr" />

水平线颜色

一些有代表意义的水平线颜色类。详细代码请参阅背景颜色

实例:









<hr class="vus-hr vus-bg--vusui" /> //VusUI
<hr class="vus-hr vus-bg--primary" /> //首选
<hr class="vus-hr vus-bg--success" /> //成功
<hr class="vus-hr vus-bg--warning" /> //警告
<hr class="vus-hr vus-bg--danger" /> //危险
<hr class="vus-hr vus-bg--info" /> //信息
<hr class="vus-hr vus-bg--noble" /> //尊贵
<hr class="vus-hr vus-bg--dark" /> //黑色
<hr class="vus-hr vus-bg--light" /> //灰色

列表

无序列表

使用.vus-ul类,作为<ul>标签样式。可添加的类有:实心圆点.v-disc,空心圆点.v-circle,正方形.v-square

实例:
  • 国破山河在,城春草木深。
    • 感时花溅泪,恨别鸟惊心。
  • 烽火连三月,家书抵万金。
    • 白头搔更短,浑欲不胜簪。
  • 花非花,雾非雾。
    • 夜半来,天明去。
  • 来如春梦几多时?
    • 去似朝云无觅处。
  • 美人卷珠帘,深坐颦蛾眉。
  • 但见泪痕湿,不知心恨谁。
<ul class="vus-ul v-disc">
  <li>实心圆点。</li>
</ul>
<ul class="vus-ul v-circle">
  <li>空心圆点。</li>
</ul>
<ul class="vus-ul v-square">
  <li>正方形。</li>
</ul>

有序列表

使用.vus-ol类,作为<ol>标签样式。可添加的类有:常规数字.v-number,十进制数字.v-decimal,小写罗马文字.v-lower-roman,大写罗马文字.v-upper-roman,小写拉丁文字.v-lower-latin,大写拉丁文字.v-upper-latin

实例:
  1. 君问归期未有期,
  2. 巴山夜雨涨秋池。
  3. 何当共剪西窗烛,
  4. 却话巴山夜雨时。
  1. 绿杨芳草长亭路,年少抛人容易去。
  2. 楼头残梦五更钟,花底离愁三月雨。
  3. 无情不似多情苦,一寸还成千万缕。
  4. 天涯地角有穷时,只有相思无尽处。
  1. 野有蔓草,零露漙兮。
  2. 有美一人,清扬婉兮。
  3. 邂逅相遇,适我愿兮。
  1. 野有蔓草,零露瀼瀼。
  2. 有美一人,婉如清扬。
  3. 邂逅相遇,与子偕臧。
  1. 别梦依依到谢家,
  2. 小廊回合曲阑斜。
  1. 多情只有春庭月,
  2. 犹为离人照落花。
<ol class="vus-ol v-number">
  <li>1.常规数字列表。</li>
  <li>2.常规数字列表。</li>
</ol>
<ol class="vus-ol v-decimal">
  <li>01.十进制数字列表。</li>
  <li>02.十进制数字列表。</li>
</ol>
<ol class="vus-ol v-lower-roman">
  <li>i.小写罗马文字列表。</li>
  <li>ii.小写罗马文字列表。</li>
</ol>
<ol class="vus-ol v-upper-roman">
  <li>I.大写罗马文字列表。</li>
  <li>II.大写罗马文字列表。</li>
</ol>
<ol class="vus-ol v-lower-latin">
  <li>a.小写拉丁文字列表。</li>
  <li>b.小写拉丁文字列表。</li>
</ol>
<ol class="vus-ol v-upper-latin">
  <li>A.大写拉丁文字列表。</li>
  <li>B.大写拉丁文字列表。</li>
</ol>

无样式列表

添加.v-none类,为.vus-ul.vus-ol移除list-style样式。。

实例:
  • 春日
    1. 胜日寻芳泗水滨,
    2. 无边光景一时新。
    3. 等闲识得东风面,
    4. 万紫千红总是春。
<ul class="vus-ul v-none">
  <li>
    鹿柴
    <ol class="vus-ol v-none">
      <li>空山不见人,</li>
      ...
    </ol>
  </li>
</ul>

内联列表

添加.v-inline类,为.vus-ul.vus-ol样式设置display: inline-block;并添加少量的内补(padding),将所有元素放置于同一行。

实例:
  • 清明
    1. 清明时节雨纷纷
    2. 路上行人欲断魂
    3. 借问酒家何处有
    4. 牧童遥指杏花村
<ul class="vus-ul v-inline">
  <li>内联列表。</li>
  ...
</ul>
<ol class="vus-ol v-inline">
  <li>内联列表。</li>
  ...
</ol>

描述

使用.vus-dl类,作为<dl>标签样式。

实例:
送别 / 山中送别
山中相送罢,日暮掩柴扉。
春草明年绿,王孙归不归?
<dl class="vus-dl">
  <dt>送别 / 山中送别</dt>
  <dd>山中相送罢,日暮掩柴扉。</dd>
</dl>

水平排列的描述

为描述添加.v-horizontal类。

实例:
泰州海陵县主簿许君墓志铭
君讳平,字秉之,姓许氏。余尝谱其世家,所谓今泰州海陵县主簿者也。君既与兄元相友爱称天下,而自少卓荦不羁,善辩说,与其兄俱以智略为当世大人所器。
山无陵,江水为竭。冬雷震震,夏雨雪。天地合,乃敢与君绝。
上天呀!我渴望与你相知相惜,长存此心永不褪减。除非巍巍群山消逝不见,除非滔滔江水干涸枯竭。除非凛凛寒冬雷声翻滚,除非炎炎酷暑白雪纷飞,除非天地相交聚合连接,直到这样的事情全都发生时,我才敢将对你的情意抛弃决绝!
人生自是有情痴,此恨不关风与月。
尊前拟把归期说,欲语春容先惨咽。人生自是有情痴,此恨不关风与月。 离歌且莫翻新阕,一曲能教肠寸结。直须看尽洛城花,始共春风容易别。
<dl class="vus-dl v-horizontal">
  <dt class="vus-text-ellipsis">泰州海陵县主簿许君墓志铭</dt>
  <dd>君讳平,字秉之,姓许氏。余尝谱其世家...</dd>
</dl>

代码

内联代码

使用.vus-code类,作为<code>标签样式,包裹内联样式的代码片段。

实例: 高亮<body></body>代码。
<code class="vus-code"><body></body></code>

代码主题颜色

一些有代表意义的代码颜色类。

实例: .v--vusui .v--primary .v--success .v--warning .v--danger .v--info .v--noble .v--dark .v--light
<code class="vus-code v--vusui">VusUI</code>
<code class="vus-code v--primary">首选</code>
<code class="vus-code v--success">成功</code>
<code class="vus-code v--warning">警告</code>
<code class="vus-code v--danger">危险</code>
<code class="vus-code v--info">信息</code>
<code class="vus-code v--noble">尊贵</code>
<code class="vus-code v--dark">黑色</code>
<code class="vus-code v--light">灰色</code>

用户输入

使用<kbd>标签标记用户通过键盘输入的内容。

实例: 使用Ctrl + c复制,并通过Ctrl + v粘贴。
<kbd>Ctrl + c</kbd>,<kbd><kbd>Ctrl</kbd> + <kbd>v</kbd></kbd>

代码块

使用.vus-pre类,作为<pre>标签样式。添加主题颜色.v--vusui.v--primary.v--success.v--warning.v--danger.v--info.v--noble.v--dark.v--light类。如需保留默认边框颜色,需要添加.v-default类。为了正确的展示代码,注意将尖括号做转义处理。

实例:
<p>默认</p>
<p>VusUI</p>
<p>首选</p>
<p>成功</p>
<p>警告</p>
<p>危险</p>
<p>信息</p>
<p>尊贵</p>
<p>黑色</p>
<p>灰色</p>
<pre class="vus-pre"><p>默认</p></pre>
<pre class="vus-pre v--primary"><p>首选</p></pre>
<pre class="vus-pre v--primary v-default"><p>首选(默认边框颜色)</p></pre>
<pre class="vus-pre v--success"><p>成功</p></pre>
<pre class="vus-pre v--warning"><p>警告</p></pre>
<pre class="vus-pre v--danger"><p>危险</p></pre>
<pre class="vus-pre v--info"><p>信息</p></pre>
<pre class="vus-pre v--noble"><p>尊贵</p></pre>
<pre class="vus-pre v--dark"><p>黑色</p></pre>
<pre class="vus-pre v--light"><p>灰色</p></pre>

表格

基本实例

使用.vus-table类,作为<table>标签样式。

实例:
可选表标题。
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
<table class="vus-table"></table>

响应式表格

将任何.vus-table类包裹在.vus-table-responsive类内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。

实例:
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
<div class="vus-table-responsive">
  <table class="vus-table"></table>
</div>

条纹状表格

添加.v-striped类可以给<tbody>之内的每一行增加斑马条纹样式。

实例:
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
<table class="vus-table v-striped"></table>

带边框的表格

添加.v-border类,为表格和其中的每个单元格增加边框。

实例:
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
<table class="vus-table v-border"></table>

鼠标悬停

通过添加 .v-hover类,可以让<tbody>中的每一行对鼠标悬停状态作出响应。

实例:
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
<table class="vus-table v-hover"></table>

表头颜色

通过添加 .v-thead--vusui.v-thead--primary.v-thead--success.v-thead--warning.v-thead--danger.v-thead--info.v-thead--noble.v-thead--dark.v-thead--light类,为<thead>标签表头添加背景颜色样式。

实例:
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
<table class="vus-table">
  <thead class="v-thead--vusui">VusUI</thead>
</table>
<table class="vus-table">
  <thead class="v-thead--primary">首选</thead>
</table>
<table class="vus-table">
  <thead class="v-thead--success">成功</thead>
</table>
<table class="vus-table">
  <thead class="v-thead--warning">警告</thead>
</table>
<table class="vus-table">
  <thead class="v-thead--danger">危险</thead>
</table>
<table class="vus-table">
  <thead class="v-thead--info">信息</thead>
</table>
<table class="vus-table">
  <thead class="v-thead--noble">尊贵</thead>
</table>
<table class="vus-table">
  <thead class="v-thead--dark">黑色</thead>
</table>
<table class="vus-table">
  <thead class="v-thead--light">灰色</thead>
</table>

表格背景颜色

通过添加 .v--vusui.v--primary.v--success.v--warning.v--danger.v--info.v--noble.v--dark.v--light类,为类名为.vus-table<table>标签添加背景颜色样式。

实例:
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
<table class="vus-table v--vusui">VusUI</table>
<table class="vus-table v--primary">首选</table>
<table class="vus-table v--success">成功</table>
<table class="vus-table v--warning">警告</table>
<table class="vus-table v--danger">危险</table>
<table class="vus-table v--info">信息</table>
<table class="vus-table v--noble">尊贵</table>
<table class="vus-table v--dark">黑色</table>
<table class="vus-table v--light">灰色</table>

紧缩表格

通过添加.v-small类可以让表格更加紧凑,单元格中的内补(padding)均会减半。

实例:
可选表标题。
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
<table class="vus-table v-small"></table>

文本居中表格

通过添加.v-text-center类可以让表格文本居中。

实例:
可选表标题。
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
编号 标题 时间 用户
1 示例标题 2018年1月24日 @张三
2 示例标题 2018年1月24日 @李四
3 示例标题 2018年1月24日 @王五
<table class="vus-table v-text-center"></table>

表单

基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了.vus-input类的 <input><textarea><select>元素都将被默认设置宽度属性为width: 100%;。 将类名为.vus-labellabel元素和前面提到的控件包裹在.vus-form中可以获得最好的排列。

实例:
<div class="vus-form">
  <label class="vus-label">默认:</label>
  <input class="vus-input" />
</div>

文本域

支持多行文本的表单控件。可根据需要改变rows属性。

实例:
<div class="vus-form">
  <label class="vus-label">描述:</label>
  <textarea rows="3" class="vus-input"></textarea>
</div>

下拉列表(select)

注意:很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的。

实例:
<div class="vus-form">
  <label class="vus-label">类别:</label>
  <select class="vus-input">
    <option>请选择类别</option>
  </select>
</div>

多选下拉列表

对于标记了 multiple 属性的<select>控件来说,默认显示多选项。

实例:
<div class="vus-form">
  <label class="vus-label">多选:</label>
  <select class="vus-input" multiple>
    <option>一</option>
    <option>二</option>
    <option>...</option>
  </select>
</div>

控件尺寸

通过.v-small.v-large类可以为控件设置高度。

实例:
<div class="vus-form">
  <label class="vus-label">小尺寸:</label>
  <input class="vus-input v-small" />
  <label class="vus-label">大尺寸:</label>
  <input class="vus-input v-large" />
</div>

控件颜色

通过添加 .v--vusui.v--primary.v--success.v--warning.v--danger.v--info.v--noble.v--dark.v--light类,为类名为.vus-input<input><textarea><select>标签添加颜色样式。如需保留默认边框颜色,需要添加.v-default类。

实例:
<input class="vus-input v--vusui"  value="VusUI" />
<input class="vus-input v--primary" value="首选" />
<input class="vus-input v--success" value="成功" />
<input class="vus-input v--warning" value="警告" />
<input class="vus-input v--danger" value="危险" />
<input class="vus-input v--info" value="信息" />
<input class="vus-input v--noble" value="尊贵" />
<input class="vus-input v--dark" value="黑色" />
<input class="vus-input v--light" value="灰色" />
<input class="vus-input v--white" value="白色" />

默认边框颜色:
<input class="vus-input v--primary v-default" value="首选" />

内联表单

.vus-form类添加.vus-form-inline类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。

实例:
<form class="vus-form-inline">
  <div class="vus-form">
    <label class="vus-label">用户名:</label>
    <input type="text" class="vus-input" />
  </div>
  <div class="vus-form">
    <label class="vus-label">密码:</label>
    <input type="password" class="vus-input" />
  </div>
  <div class="vus-form">
    <input type="submit" class="vus-btn" value="登录" />
  </div>
</form>

单选框

使用类名为.vus-radiolabel元素,将单选框(radio)控件包裹。radio元素将被隐藏,使用<i class="icon"></i>代替radio控件。文本使用<span class="text">radio</span>包裹。

实例:
<label class="vus-radio">
  <input type="radio" />
  <i class="icon"></i>
  <span class="text">单选</span>
</label>
<label class="vus-radio">
  <input type="radio" checked />
  <i class="icon"></i>
  <span class="text">单选 Checked</span>
</label>
<label class="vus-radio">
  <input type="radio" disabled />
  <i class="icon"></i>
  <span class="text">单选 Disabled</span>
</label>
<label class="vus-radio">
  <input type="radio" disabled checked />
  <i class="icon"></i>
  <span class="text">单选 Disabled Checked</span>
</label>

多种单选样式

通过添加.v-tick.v-tick-o类来改变.vus-radio的另一种展示风格。

实例:
<label class="vus-radio v-tick">
  <input type="radio" />
  <i class="icon"></i>
  <span class="text">单选(勾)</span>
</label>
<label class="vus-radio v-tick-o">
  <input type="radio" />
  <i class="icon"></i>
  <span class="text">单选(勾-线条)</span>
</label>

单选框尺寸

通过添加.v-large类,可以获得大尺寸的单选框。

实例:
<label class="vus-radio v-large">
  <input type="radio" />
  <i class="icon"></i>
  <span class="text">单选(加大)</span>
</label>
<label class="vus-radio v-large v-tick">
  <input type="radio" />
  <i class="icon"></i>
  <span class="text">单选(勾-加大)</span>
</label>
<label class="vus-radio v-large v-tick-o">
  <input type="radio" />
  <i class="icon"></i>
  <span class="text">单选(勾-线条-加大)</span>
</label>

单选框颜色

通过添加.v--vusui.v--primary.v--success.v--warning.v--danger.v--info.v--noble.v--dark.v--light类,为类名为.vus-radio<label>单选框(radio)控件添加颜色样式,如果想保留默认未选中的边框颜色,需要添加.v-default类实现。

实例:
<label class="vus-radio v--vusui">
  <input type="radio" />
  <i class="icon"></i>
  <span class="text">VusUI</span>
</label>
<label class="vus-radio v--primary">
  <input type="radio" />
  <i class="icon"></i>
  <span class="text">首选</span>
</label>
<label class="vus-radio v--success">
  <input type="radio" />
  <i class="icon"></i>
  <span class="text">成功</span>
</label>
<label class="vus-radio v--warning">
  <input type="radio" />
  <i class="icon"></i>
  <span class="text">警告</span>
</label>
<label class="vus-radio v--danger">
  <input type="radio" />
  <i class="icon"></i>
  <span class="text">危险</span>
</label>
<label class="vus-radio v--info">
  <input type="radio" />
  <i class="icon"></i>
  <span class="text">信息</span>
</label>
<label class="vus-radio v--noble">
  <input type="radio" />
  <i class="icon"></i>
  <span class="text">尊贵</span>
</label>
<label class="vus-radio v--dark">
  <input type="radio" />
  <i class="icon"></i>
  <span class="text">黑色</span>
</label>
<label class="vus-radio v--light">
  <input type="radio" />
  <i class="icon"></i>
  <span class="text">灰色</span>
</label>

默认边框颜色:
<label class="vus-radio v--primary v-default">
  <input type="radio" />
  <i class="icon"></i>
  <span class="text">首选(默认边框颜色)</span>
</label>

复选框

使用类名为.vus-checkboxlabel元素,将复选框(checkbox)控件包裹。checkbox元素将被隐藏,使用<i class="icon"></i>代替checkbox控件。文本使用<span class="text">checkbox</span>包裹。

实例:
<label class="vus-checkbox">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">复选</span>
</label>
<label class="vus-checkbox">
  <input type="checkbox" checked />
  <i class="icon"></i>
  <span class="text">复选 Checked</span>
</label>
<label class="vus-checkbox">
  <input type="checkbox" disabled />
  <i class="icon"></i>
  <span class="text">复选 Disabled</span>
</label>
<label class="vus-checkbox">
  <input type="checkbox" disabled checked />
  <i class="icon"></i>
  <span class="text">复选 Disabled Checked</span>
</label>

多种复选样式

通过添加.v-bedye.v-square类来改变.vus-checkbox的另一种展示风格。

实例:
<label class="vus-checkbox v-bedye">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">复选(着色)</span>
</label>
<label class="vus-checkbox v-square">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">复选(方块)</span>
</label>

复选框尺寸

通过添加.v-large类,可以获得大尺寸的复选框。

实例:
<label class="vus-checkbox v-large">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">复选(加大)</span>
</label>
<label class="vus-checkbox v-large v-bedye">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">复选(着色-加大)</span>
</label>
<label class="vus-checkbox v-large v-square">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">复选(方块-加大)</span>
</label>

复选框颜色

通过添加 .v--vusui.v--primary.v--success.v--warning.v--danger.v--info.v--noble.v--dark.v--light类,为类名为.vus-checkbox<label>复选框(checkbox)控件添加颜色样式,如果想保留默认未选中的边框颜色,需要添加.v-default类实现。

实例:
<label class="vus-checkbox v--vusui">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">VusUI</span>
</label>
<label class="vus-checkbox v--success">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">成功</span>
</label>
<label class="vus-checkbox v--warning">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">警告</span>
</label>
<label class="vus-checkbox v--danger">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">危险</span>
</label>
<label class="vus-checkbox v--info">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">信息</span>
</label>
<label class="vus-checkbox v--noble">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">尊贵</span>
</label>
<label class="vus-checkbox v--dark">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">黑色</span>
</label>
<label class="vus-checkbox v--light">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">灰色</span>
</label>

默认边框颜色:
<label class="vus-checkbox v--primary v-default">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">首选</span>
</label>

滑动开关

使用类名为.vus-switchlabel元素,将复选框(checkbox)控件包裹。checkbox元素将被隐藏,使用<i class="icon"></i>代替checkbox控件。文本使用<span class="text">switch</span>包裹。

实例:
<label class="vus-switch">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text" vus-off="否" vus-on="是"></span>
</label>
<label class="vus-switch">
  <input type="checkbox" checked />
  <i class="icon"></i>
  <span class="text">开关</span>
</label>
<label class="vus-switch">
  <input type="checkbox" disabled />
  <i class="icon"></i>
  <span class="text" vus-off="Off" vus-on="On"></span>
</label>
<label class="vus-switch">
  <input type="checkbox" disabled checked />
  <i class="icon"></i>
  <span class="text">开关</span>
</label>

多种开关样式

通过添加.v-square类来改变.vus-switch的另一种展示风格。使用内部文字方式:最长2个汉字或3个字母。

实例:
<label class="vus-switch v-square">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text" vus-off="关闭" vus-on="打开"></span> // 方块
</label>
<label class="vus-switch v-square v-square-text">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text" vus-off="OFF" vus-on="ON"></span> // 方块(内部文字)
</label>

滑动开关尺寸

通过添加.v-small.v-large类,就可以获得不同尺寸的滑动开关。

实例:
小尺寸:
<label class="vus-switch v-small">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text" vus-off="否" vus-on="是"></span>
</label>
<label class="vus-switch v-small v-square">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text" vus-off="打开" vus-on="关闭"></span>
</label>
<label class="vus-switch v-small v-square v-square-text">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text" vus-off="OFF" vus-on="ON"></span>
</label>

大尺寸:
<label class="vus-switch v-large">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text" vus-off="否" vus-on="是"></span>
</label>
<label class="vus-switch v-large v-square">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text" vus-off="结束" vus-on="开始"></span>
</label>
<label class="vus-switch v-large v-square v-square-text">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text" vus-off="NO" vus-on="YES"></span>
</label>

滑动开关颜色

通过添加 .v--vusui.v--primary.v--success.v--warning.v--danger.v--info.v--noble.v--dark.v--light类,为类名为.vus-switch<label>复选框(checkbox)控件添加颜色样式,如果想保留默认未选中的边框颜色,需要添加.v-default类实现。

实例:
<label class="vus-switch v--vusui">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">VusUI</span>
</label>
<label class="vus-switch v--success">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">成功</span>
</label>
<label class="vus-switch v--warning">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">警告</span>
</label>
<label class="vus-switch v--danger">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">危险</span>
</label>
<label class="vus-switch v--info">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">信息</span>
</label>
<label class="vus-switch v--noble">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">尊贵</span>
</label>
<label class="vus-switch v--dark">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">黑色</span>
</label>
<label class="vus-switch v--light">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">灰色</span>
</label>

默认边框颜色:
<label class="vus-switch v--primary v-default">
  <input type="checkbox" />
  <i class="icon"></i>
  <span class="text">首选</span>
</label>

按钮

基本实例

使用类名为.vus-btn<a><input><button>标签或元素可作为按钮使用。

实例:
默认(Link) 默认-禁用(Link)
<a class="vus-btn">默认(Link)</a>
<input type="button" class="vus-btn" value="默认(Input)" />
<input type="submit" class="vus-btn" value="默认(Submit)" />
<button type="button" class="vus-btn">默认(Button)</button>

禁用:
<a class="vus-btn disabled">默认-禁用(Link)</a>
<input type="button" class="vus-btn" value="默认-禁用(Input)" disabled />
<input type="submit" class="vus-btn" value="默认-禁用(Submit)" disabled />
<button type="button" class="vus-btn" disabled>默认-禁用(Button)</button>

按钮颜色样式

使用下面列出的类可以快速创建一个带有预定义样式的按钮。

实例:
<input type="button" class="vus-btn" value="默认样式" />
<input type="button" class="vus-btn v--vusui" value="VusUI" />
<input type="button" class="vus-btn v--primary" value="首选" />
<input type="button" class="vus-btn v--success" value="成功" />
<input type="button" class="vus-btn v--warning" value="警告" />
<input type="button" class="vus-btn v--danger" value="危险" />
<input type="button" class="vus-btn v--info" value="信息" />
<input type="button" class="vus-btn v--noble" value="尊贵" />
<input type="button" class="vus-btn v--dark" value="黑色" />
<input type="button" class="vus-btn v--light" value="灰色" />

轮廓线按钮

通过添加.v-outline类可以使按钮以轮廓线展示。

实例:
<input type="button" class="vus-btn" value="默认样式" />
<input type="button" class="vus-btn v-outline v--vusui" value="VusUI" />
<input type="button" class="vus-btn v-outline v--primary" value="首选" />
<input type="button" class="vus-btn v-outline v--success" value="成功" />
<input type="button" class="vus-btn v-outline v--warning" value="警告" />
<input type="button" class="vus-btn v-outline v--danger" value="危险" />
<input type="button" class="vus-btn v-outline v--info" value="信息" />
<input type="button" class="vus-btn v-outline v--noble" value="尊贵" />
<input type="button" class="vus-btn v-outline v--dark" value="黑色" />
<input type="button" class="vus-btn v-outline v--light" value="灰色" />

通过添加.v-link类,可以为<a>元素创建按钮。

实例:
<a class="vus-btn v-link">默认样式</a>
<a class="vus-btn v-link v--vusui">VusUI</a>
<a class="vus-btn v-link v--primary">首选</a>
<a class="vus-btn v-link v--success">成功</a>
<a class="vus-btn v-link v--warning">警告</a>
<a class="vus-btn v-link v--danger">危险</a>
<a class="vus-btn v-link v--info">信息</a>
<a class="vus-btn v-link v--noble">尊贵</a>
<a class="vus-btn v-link v--dark">黑色</a>
<a class="vus-btn v-link v--light">灰色</a>
<a class="vus-btn v-link v--white">白色</a>

按钮尺寸

通过添加.v-tiny.v-small.v-large类,就可以获得不同尺寸的按钮。

实例:
<button type="button" class="vus-btn v-tiny">默认(.v-tiny)</button>
<button type="button" class="vus-btn v-small">默认(.v-small)</button>
<button type="button" class="vus-btn v-large">默认(.v-large)</button>

块级按钮

通过添加.vus-fluid类,可以将按钮拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。

实例:
<button type="button" class="vus-btn vus-fluid">默认</button>

边框

基本实例

使用.vus-border.v-nt.v-nr.v-nb.v-nl.v-none类可以添加或移除边框。

实例:
默认边框 移除顶部边框 移除右部边框 移除底部边框 移除左部边框 移除所有边框
<div class="vus-border">默认边框</div>
<div class="vus-border v-nt">移除顶部边框</div>
<div class="vus-border v-nr">移除右部边框</div>
<div class="vus-border v-nb">移除底部边框</div>
<div class="vus-border v-nl">移除左部边框</div>
<div class="vus-border v-none">移除所有边框</div>

边框大小

通过添加.v-w(2-10)类改变边框大小。

实例:
.v-w2 .v-w5 .v-w10
<div class="vus-border v-w2">.v-w2</div>
<div class="vus-border v-w5">.v-w5</div>
<div class="vus-border v-w10">.v-w10</div>

边框类型

通过添加.v-solid.v-dashed.v-dotted.v-double类改变边框类型。

实例:
.v-solid .v-dashed .v-dotted .v-double
<div class="vus-border v-solid">.v-solid</div>
<div class="vus-border v-dashed">.v-dashed</div>
<div class="vus-border v-dotted">.v-dotted</div>
<div class="vus-border v-double">.v-double</div>

边框颜色

通过添加.vus-border--vusui.vus-border--primary.vus-border--success.vus-border--warning.vus-border--danger.vus-border--info.vus-border--noble.vus-border--dark.vus-border--light.vus-border--white类改变边框颜色。

实例:
VusUI 首选 成功 警告 危险 信息 尊贵 黑色 灰色 白色
<div class="vus-border vus-border--vusui">.v--vusui(VusUI)</div>
<div class="vus-border vus-border--primary">.v--primary(首选)</div>
<div class="vus-border vus-border--success">.v--success(成功)</div>
<div class="vus-border vus-border--warning">.v--warning(警告)</div>
<div class="vus-border vus-border--danger">.v--danger(危险)</div>
<div class="vus-border vus-border--info">.v--info(信息)</div>
<div class="vus-border vus-border--noble">.v--noble(尊贵)</div>
<div class="vus-border vus-border--dark">.v--dark(黑色)</div>
<div class="vus-border vus-border--light">.v--light(灰色)</div>
<div class="vus-border vus-border--white">.v--white(白色)</div>

图片

响应式图片

使用.vus-img类可以让图片支持响应式布局。其实质是为图片设置了width: 100%;height: auto;display: block;属性,从而让图片在其父元素中更好的缩放。

如果需要让使用了.vus-img类的图片水平居中,请使用.vus-mx-auto类。

实例:

<img class="vus-img" src="..." />

图片形状

通过为<img>元素添加相应的类,可以让图片呈现不同的形状。请参阅圆角半径

图片边框

为图片添加不同的边框。请参阅边框

实例:

<img class="vus-border" src="..." />

填充边距

为图片添加不同的内边距。请参阅内部填充

实例:

<img class="vus-border vus-pt-5 vus-pr-5 vus-pb-5 vus-pl-5" src="..." />

小工具

提示框

使用.vus-tips类,作为提示框的样式。但需要包含vus-tips属性。

实例:

鼠标移动到我这(默认) 鼠标移动到我这(底部) 鼠标移动到我这(左则) 鼠标移动到我这(右则)

<a class="vus-tips" vus-tips="我是提示内容!">默认</a>
<a class="vus-tips v-bottom" vus-tips="我是提示内容!">底部</a>
<a class="vus-tips v-left" vus-tips="我是提示内容!">左则</a>
<a class="vus-tips v-right" vus-tips="我是提示内容!">右则</a>

提示框颜色样式

通过添加 .v--vusui.v--primary.v--success.v--warning.v--danger.v--info.v--noble.v--light类,改变类名为.vus-tips的颜色样式。

实例:

默认 VusUI 首选 成功 警告 危险 信息 尊贵 灰色

<a class="vus-tips v--vusui" vus-tips="我是提示内容!">VusUI</a>
<a class="vus-tips v--primary" vus-tips="我是提示内容!">首选</a>
<a class="vus-tips v--success v-large" vus-tips="成功,我是固定宽度(大尺寸)的提示框!文字超出时我会自动换行的。">成功</a>
<a class="vus-tips v--warning" vus-tips="我是提示内容!">警告</a>
<a class="vus-tips v--danger v-small" vus-tips="我是固定宽度(小尺寸)的提示框!文字超出时我也是会自动换行的哦。">危险</a>
<a class="vus-tips v--info" vus-tips="我是提示内容!">信息</a>
<a class="vus-tips v--noble" vus-tips="我是提示内容!">尊贵</a>
<a class="vus-tips v--light" vus-tips="我是提示内容!">灰色</a>

进度条

使用.vus-progress类,作为进度条的样式。

实例:
50%
50%
70%
<div class="vus-progress">
  <div class="vus-progress-bar" style="width:50%">默认</div>
</div>
<div class="vus-progress">
  <div class="vus-progress-bar v-striped" style="width:50%">条纹</div>
</div>
<div class="vus-progress">
  <div class="vus-progress-bar v-striped vus-progress-anim" style="width:50%">动画</div>
</div>

进度条颜色样式

一些有代表意义的进度条颜色类。进度条颜色样式,请参阅背景颜色

实例:
20%
40%
50%
60%
80%
90%
95%
65%
<div class="vus-progress">
  <div class="vus-progress-bar vus-bg--primary" style="width:50%">首选</div>
</div>
<div class="vus-progress">
  <div class="vus-progress-bar vus-bg--success" style="width:50%">成功</div>
</div>
<div class="vus-progress">
  <div class="vus-progress-bar vus-bg--warning" style="width:50%">警告</div>
</div>
<div class="vus-progress">
  <div class="vus-progress-bar vus-bg--danger" style="width:50%">危险</div>
</div>
<div class="vus-progress">
  <div class="vus-progress-bar vus-bg--info" style="width:50%">信息</div>
</div>
<div class="vus-progress">
  <div class="vus-progress-bar vus-bg--noble" style="width:50%">尊贵</div>
</div>
<div class="vus-progress">
  <div class="vus-progress-bar vus-bg--dark" style="width:50%">黑色</div>
</div>
<div class="vus-progress">
  <div class="vus-progress-bar vus-bg--dark-light" style="width:50%">灰色</div>
</div>

徽章

使用.vus-badge类,作为徽章的样式。徽章背景颜色样式,请参阅背景颜色

实例:

默认 首选 成功 警告 危险 信息 尊贵 黑色 灰色 白色

<span class="vus-badge">默认</span>
<span class="vus-badge vus-bg--primary">首选</span>
<span class="vus-badge vus-bg--success">成功</span>
<span class="vus-badge vus-bg--warning">警告</span>
<span class="vus-badge vus-bg--danger">危险</span>
<span class="vus-badge vus-bg--info">信息</span>
<span class="vus-badge vus-bg--noble">尊贵</span>
<span class="vus-badge vus-bg--dark">黑色</span>
<span class="vus-badge vus-bg--light">灰色</span>
<span class="vus-badge vus-bg--white">白色</span>

药丸形状徽章

通过添加.v-pill类来设置药丸形状徽章,也可以通过添加.v-large类来改变徽章的尺寸。

实例:

1 100 52 9 10 11

<span class="vus-badge v-pill">默认</span>
<span class="vus-badge v-pill vus-bg--primary">首选</span>
<span class="vus-badge v-pill v-large">我加大了</span>

圆角半径

  • 使用.vus-br-1.vus-br-10类来设置元素的圆角大小。
  • 如果需要圆圈形状,可以使用.vus-br-circle类。
实例:
<div class="vus-br-2">2px</div>
<div class="vus-br-5">5px</div>
<div class="vus-br-10">16px</div>
<div class="vus-br-circle">圆圈</div>

旋转

  • 使用.vus-rotate-90.vus-rotate-180.vus-rotate-270类,为元素顺时针旋转90180270度角。
实例:
<div class="vus-rotate-90"></div>
<div class="vus-rotate-180"></div>
<div class="vus-rotate-270"></div>

内部填充

  • 使用.vus-pt-(0-10/15/20/25/30).vus-pr-(0-10/15/20/25/30).vus-pb-(0-10/15/20/25/30).vus-pl-(0-10/15/20/25/30)类来设置内部填充
实例:
  • top 1px
  • left 5px
  • bottom 10px
  • right 20px
  • top 2, right 6, bottom 10, left 15
<div class="vus-pt-1">top 1px</div>
<div class="vus-pl-5">left 5px</div>
<div class="vus-pb-10">bottom 10px</div>
<div class="vus-pr-20">right 20px</div>
<div class="vus-pt-2 vus-pr-6 vus-pb-10 vus-pl-15">top 2, right 6, bottom 10, left 15</div>

外部填充

  • 使用.vus-mt-(0-10/15/20/25/30).vus-mr-(0-10/15/20/25/30).vus-mb-(0-10/15/20/25/30).vus-ml-(0-10/15/20/25/30)类来设置外部填充
实例:
  • top 10px
  • left 7px
  • bottom 30px
  • right 20px
  • top 10, left 5, right 20, bottom 3
<div class="vus-mt-1">top 1px</div>
<div class="vus-ml-5">left 5px</div>
<div class="vus-mb-10">bottom 10px</div>
<div class="vus-mr-20">right 20px</div>
<div class="vus-mt-10 vus-ml-5 vus-mr-20 vus-mb-3">top 10, left 5, right 20, bottom 3</div>

分页

基本实例

使用.vus-pages类,作为分页的样式。

实例:
<div class="vus-pages">
  <ul class="v-page">
    <li class="v-item"><a href="#" class="v-link">上一页</a></li>
    <li class="v-item"><a href="#" class="v-link">1</a></li>
    <li class="v-item"><a href="#" class="v-link">2</a></li>
    <li class="v-item"><a href="#" class="v-link">3</a></li>
    <li class="v-ellipsis">...</li>
    <li class="v-item"><a href="#" class="v-link">100</a></li>
    <li class="v-item"><a href="#" class="v-link">下一页</a></li>
  </ul>
</div>

当前页页码状态

当前页可以使用.active类来高亮显示。也可以通过添加 .v--vusui.v--primary.v--success.v--warning.v--danger.v--info.v--noble.v--dark.v--light类,改变颜色样式。

实例:
<div class="vus-pages">
  <ul class="v-page">
    <li class="v-item active"><a href="#" class="v-link unline">默认</a></li>>
    <li class="v-item active v--vusui"><a href="#" class="v-link unline">VusUI</a></li>>
    <li class="v-item active v--primary"><a href="#" class="v-link unline">首选</a></li>>
    <li class="v-item active v--success"><a href="#" class="v-link unline">成功</a></li>>
    <li class="v-item active v--warning"><a href="#" class="v-link unline">警告</a></li>>
    <li class="v-item active v--danger"><a href="#" class="v-link unline">危险</a></li>>
    <li class="v-item active v--info"><a href="#" class="v-link unline">信息</a></li>>
    <li class="v-item active v--noble"><a href="#" class="v-link unline">尊贵</a></li>>
    <li class="v-item active v--dark"><a href="#" class="v-link unline">黑色</a></li>>
    <li class="v-item active v--light"><a href="#" class="v-link unline">灰色</a></li>>
  </ul>
</div>

不可点击的分页链接

使用.disabled类可以设置分页链接不可点击。

实例:
<div class="vus-pages">
  <ul class="v-page">
    <li class="v-item disabled"><a href="#" class="v-link unline">上一页</a></li>
    <li class="v-item active"><a href="#" class="v-link unline">1</a></li>
    <li class="v-item"><a href="#" class="v-link unline">2</a></li>
    <li class="v-item"><a href="#" class="v-link unline">3</a></li>
    <li class="v-item"><a href="#" class="v-link unline">下一页</a></li>
  </ul>
</div>

带下拉列表(select)的分页

在分页里可添加下拉列表<select>元素。

实例:
<div class="vus-pages">
  <ul class="v-page">
    <li class="v-item"><a href="#" class="v-link unline">上一页</a></li>
    <li class="v-item"><a href="#" class="v-link unline">1</a></li>
    <li class="v-item"><a href="#" class="v-link unline">2</a></li>
    <li class="v-item"><a href="#" class="v-link unline">3</a></li>
    <li class="v-item"><a href="#" class="v-link unline">下一页</a></li>
    <li class="v-text">第</li>
    <li class="v-form">
      <select class="vus-input v-input">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </li>
    <li class="v-text">页</li>
  </ul>
</div>

带输入框(input)的分页

在分页里可添加输入框<input>元素。

实例:
<div class="vus-pages">
  <ul class="v-page">
    <li class="v-item"><a href="#" class="v-link unline">上一页</a></li>
    <li class="v-item"><a href="#" class="v-link unline">1</a></li>
    <li class="v-item"><a href="#" class="v-link unline">2</a></li>
    <li class="v-item"><a href="#" class="v-link unline">3</a></li>
    <li class="v-item"><a href="#" class="v-link unline">下一页</a></li>
    <li class="v-text">跳到</li>
    <li class="v-form">
      <input class="vus-input v-input vus-text-center" placeholder="页码" />
    </li>
    <li class="v-text">页</li>
    <li class="v-form">
      <button class="vus-btn v--vusui v-btn">GO</button>
    </li>
  </ul>
</div>

分页显示大小

使用.v-small.v-large类,可以将分页设置为不同的大小。

实例:
.v-small
<div class="vus-pages v-small">
  <ul class="v-page">
    <li class="v-item disabled"><a href="#" class="v-link unline">上一页</a></li>
    <li class="v-item"><a href="#" class="v-link unline">下一页</a></li>
  </ul>
</div>

.v-large
<div class="vus-pages v-large">
  <ul class="v-page">
    <li class="v-item disabled"><a href="#" class="v-link unline">上一页</a></li>
    <li class="v-item"><a href="#" class="v-link unline">下一页</a></li>
  </ul>
</div>

有间隔排列的分页

通过添加.v-space类,可以将分页设置为间隔排列。

实例:
<div class="vus-pages v-space">
  <ul class="v-page">
    <li class="v-item disabled"><a href="#" class="v-link unline">上一页</a></li>
    <li class="v-item"><a href="#" class="v-link unline">下一页</a></li>
  </ul>
</div>

版本说明

VusUI各版本功能介绍

1、vusui.css 常用版

此版本删除以下功能:
字体图标样式、JS插件层样式、CSS3动画样式(JS插件层专用动画)。

2、vusui-all.css 完整版

此版本包含了所有的VusUI功能(除IE9样式外)。
如:字体图标样式、JS插件层样式、CSS3动画样式(JS插件层专用动画)。

3、vusui-lite.css 精简版

此版本删除以下功能:
1、删除常用版所删除的功能;
2、删除.vus-border(w2-10/none) 以及.vus-border--* 边框颜色;
3、删除.vus-progress 进度条条纹动画;
4、删除.vus-tips 提示主题颜色;
5、删除.vus-table 表格背景主题颜色、表格对齐位置;
6、删除.vus-pre 代码块主题颜色;
7、删除.vus-code 代码主题颜色;
8、删除.vus-box 部分属性;
9、删除.vus-fs-(30/40/50) 字体大小;
10、删除.vus-br-(0/6-10) 圆角半径;
11、删除.vus-m(trbl) 外部填充;
12、删除.vus-p(trbl) 内部填充;
13、删除.vus-fixed 所有位置;
14、删除.vus-absolute 所有位置;
15、删除.vus-zindex;
16、删除.vus-radio 其它风格样式,保留默认;
17、删除.vus-checkbox 其它风格样式,保留默认;
18、删除.vus-switch 其它风格样式,保留默认;

4、vusui-ie9.css 兼容IE9

支持IE9的样式(除网格列排序外)。