网格系统

使用.vus-box类,作为网格系统的容器样式。

栅格布局

使用.vus-col-(1~12)类,作为栅格布局样式。也可用使用.vus-col或者.vus-col-auto来自动排列。
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
5
5
2
6
6
7
5
8
4
9
3
10
2
11
1
12
<div class="vus-box">
  <div class="vus-col-1"></div>
  <div class="vus-col-1"></div>
  <div class="vus-col-1"></div>
  <div class="vus-col-1"></div>
  <div class="vus-col-1"></div>
  <div class="vus-col-1"></div>
  <div class="vus-col-1"></div>
  <div class="vus-col-1"></div>
  <div class="vus-col-1"></div>
  <div class="vus-col-1"></div>
  <div class="vus-col-1"></div>
  <div class="vus-col-1"></div>
</div>
<div class="vus-box">
  <div class="vus-col-2"></div>
  <div class="vus-col-2"></div>
  <div class="vus-col-2"></div>
  <div class="vus-col-2"></div>
  <div class="vus-col-2"></div>
  <div class="vus-col-2"></div>
</div>
<div class="vus-box">
  <div class="vus-col-3"></div>
  <div class="vus-col-3"></div>
  <div class="vus-col-3"></div>
  <div class="vus-col-3"></div>
</div>
<div class="vus-box">
  <div class="vus-col-4"></div>
  <div class="vus-col-4"></div>
  <div class="vus-col-4"></div>
</div>
<div class="vus-box">
  <div class="vus-col-5"></div>
  <div class="vus-col-5"></div>
  <div class="vus-col-2"></div>
</div>
<div class="vus-box">
  <div class="vus-col-6"></div>
  <div class="vus-col-6"></div>
</div>
<div class="vus-box">
  <div class="vus-col-7"></div>
  <div class="vus-col-5"></div>
</div>
<div class="vus-box">
  <div class="vus-col-8"></div>
  <div class="vus-col-4"></div>
</div>
<div class="vus-box">
  <div class="vus-col-9"></div>
  <div class="vus-col-3"></div>
</div>
<div class="vus-box">
  <div class="vus-col-10"></div>
  <div class="vus-col-2"></div>
</div>
<div class="vus-box">
  <div class="vus-col-11"></div>
  <div class="vus-col-1"></div>
</div>
<div class="vus-box">
  <div class="vus-col-12"></div>
</div>

Flex布局

使用.vus-flex-(1~12)类,作为Flex布局样式。也可用使用.vus-flex或者.vus-flex-auto来自动排列。
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
11
11
11
11
11
11
11
11
11
11
11
12
12
12
12
12
12
12
12
12
12
12
12
<div class="vus-box">
  <div class="vus-flex-1"></div>
</div>
<div class="vus-box">
  <div class="vus-flex-2"></div>
  <div class="vus-flex-2"></div>
</div>
<div class="vus-box">
  <div class="vus-flex-3"></div>
  <div class="vus-flex-3"></div>
  <div class="vus-flex-3"></div>
</div>
<div class="vus-box">
  <div class="vus-flex-4"></div>
  <div class="vus-flex-4"></div>
  <div class="vus-flex-4"></div>
  <div class="vus-flex-4"></div>
</div>
<div class="vus-box">
  <div class="vus-flex-5"></div>
  <div class="vus-flex-5"></div>
  <div class="vus-flex-5"></div>
  <div class="vus-flex-5"></div>
  <div class="vus-flex-5"></div>
</div>
<div class="vus-box">
  <div class="vus-flex-6"></div>
  <div class="vus-flex-6"></div>
  <div class="vus-flex-6"></div>
  <div class="vus-flex-6"></div>
  <div class="vus-flex-6"></div>
  <div class="vus-flex-6"></div>
</div>
<div class="vus-box">
  <div class="vus-flex-7"></div>
  <div class="vus-flex-7"></div>
  <div class="vus-flex-7"></div>
  <div class="vus-flex-7"></div>
  <div class="vus-flex-7"></div>
  <div class="vus-flex-7"></div>
  <div class="vus-flex-7"></div>
</div>
<div class="vus-box">
  <div class="vus-flex-8"></div>
  <div class="vus-flex-8"></div>
  <div class="vus-flex-8"></div>
  <div class="vus-flex-8"></div>
  <div class="vus-flex-8"></div>
  <div class="vus-flex-8"></div>
  <div class="vus-flex-8"></div>
  <div class="vus-flex-8"></div>
</div>
<div class="vus-box">
  <div class="vus-flex-9"></div>
  <div class="vus-flex-9"></div>
  <div class="vus-flex-9"></div>
  <div class="vus-flex-9"></div>
  <div class="vus-flex-9"></div>
  <div class="vus-flex-9"></div>
  <div class="vus-flex-9"></div>
  <div class="vus-flex-9"></div>
  <div class="vus-flex-9"></div>
</div>
<div class="vus-box">
  <div class="vus-flex-10"></div>
  <div class="vus-flex-10"></div>
  <div class="vus-flex-10"></div>
  <div class="vus-flex-10"></div>
  <div class="vus-flex-10"></div>
  <div class="vus-flex-10"></div>
  <div class="vus-flex-10"></div>
  <div class="vus-flex-10"></div>
  <div class="vus-flex-10"></div>
  <div class="vus-flex-10"></div>
</div>
<div class="vus-box">
  <div class="vus-flex-11"></div>
  <div class="vus-flex-11"></div>
  <div class="vus-flex-11"></div>
  <div class="vus-flex-11"></div>
  <div class="vus-flex-11"></div>
  <div class="vus-flex-11"></div>
  <div class="vus-flex-11"></div>
  <div class="vus-flex-11"></div>
  <div class="vus-flex-11"></div>
  <div class="vus-flex-11"></div>
  <div class="vus-flex-11"></div>
</div>
<div class="vus-box">
  <div class="vus-flex-12"></div>
  <div class="vus-flex-12"></div>
  <div class="vus-flex-12"></div>
  <div class="vus-flex-12"></div>
  <div class="vus-flex-12"></div>
  <div class="vus-flex-12"></div>
  <div class="vus-flex-12"></div>
  <div class="vus-flex-12"></div>
  <div class="vus-flex-12"></div>
  <div class="vus-flex-12"></div>
  <div class="vus-flex-12"></div>
  <div class="vus-flex-12"></div>
</div>

分栏间隔

.vus-box类中添加.lr-(1~10)或者.tb-(1~10)类,可设置分栏之间的左右和上下间隔。
默认无间隔
默认
默认
默认
默认
默认
默认
左右间隔(.lr-*)
.lr-1
.lr-1
.lr-1
.lr-4
.lr-4
.lr-8
.lr-8
.lr-8
.lr-8
上下间隔(.tb-*)
.tb-3
.tb-3
.tb-3
.tb-3
.tb-3
.tb-3
任性的分界线
.tb-10
.tb-10
.tb-10
.tb-10
.tb-10
.tb-10
混合使用(.lr-*、.tb-*)
.lr-5、.tb-2
.lr-5、.tb-2
.lr-5、.tb-2
.lr-5、.tb-2
.lr-5、.tb-2
.lr-5、.tb-2
<!-- 默认无间隔 -->
<div class="vus-box">
  <div class="vus-col-6">默认</div>
  <div class="vus-col-6">默认</div>
</div>

<!-- 左右间隔(.lr-*) -->
<div class="vus-box lr-1">
  <div class="vus-flex-2">.lr-1</div>
  <div class="vus-flex-2">.lr-1</div>
</div>
<div class="vus-box lr-8">
  <div class="vus-flex-3">.lr-8</div>
  <div class="vus-flex-3">.lr-8</div>
  <div class="vus-flex-3">.lr-8</div>
</div>

<!-- 上下间隔(.tb-*) -->
<div class="vus-box tb-3">
  <div class="vus-col-12">.tb-3</div>
  <div class="vus-col-12">.tb-3</div>
</div>
<div class="vus-box tb-10">
  <div class="vus-flex-1">.tb-10</div>
  <div class="vus-flex-1">.tb-10</div>
</div>

<!-- 混合使用(.lr-*、.tb-*) -->
<div class="vus-box lr-5 tb-2">
  <div class="vus-col-12">.lr-5、.tb-2</div>
  <div class="vus-col-6">.lr-5、.tb-2</div>
  <div class="vus-col-6">.lr-5、.tb-2</div>
</div>

分栏偏移

.vus-col-(1~12)或者.vus-flex-(1~12)类中添加.vus-offset-(1~12)类,可设置分栏偏移指定的栏数。
offset-1
offset-4
offset-2
offset-1
offset-6
offset-3
<div class="vus-box tb-5">
  <div class="vus-col-3 vus-offset-1">offset-1</div>
  <div class="vus-col-4 vus-offset-4">offset-4</div>
  <div class="vus-col-3">无</div>
  <div class="vus-col-3 vus-offset-2">offset-2</div>
  <div class="vus-col-3 vus-offset-1">offset-1</div>
  <div class="vus-col-5 vus-offset-6">offset-6</div>
  <div class="vus-col-6 vus-offset-3">offset-3</div>
</div>

分栏排序

.vus-col-(1~12)或者.vus-flex-(1~12)类中添加.vus-order-(first/last/0~12)类,可设置分栏偏移指定的栏数。
5/1
5/2
5/3
5/4
5/5
6/1
6/2
6/3
6/4
6/5
6/6
<div class="vus-box lr-5">
  <div class="vus-col-3 vus-order-5">6/1</div>
  <div class="vus-col-2 vus-order-4">6/2</div>
  <div class="vus-col-1 vus-order-last">6/3</div>
  <div class="vus-col-3 vus-order-first">6/4</div>
  <div class="vus-col-1 vus-order-3">6/5</div>
  <div class="vus-col-2 vus-order-2">6/6</div>
</div>

对齐方式

  • .vus-box类中添加指定样式,对分栏进行灵活的对齐。
  • .nowrap:不换行。
  • .wrap-reverse:换行,第一行在下方。
  • .row-reverse:水平方向,起点在右端。
  • .column:垂直方向。
  • .column-reverse:垂直方向,起点在下沿。
  • .justify-start:左对齐。
  • .justify-end:右对齐。
  • .justify-center:水平居中。
  • .justify-between:两端对齐,项目之间的间隔都相等。
  • .justify-around:每个项目两侧的间隔相等。
  • .items-start:垂直方向起点对齐。
  • .items-end:垂直方向终点对齐。
  • .items-center:垂直方向居中对齐。
不换行(这里会被撑开属于效果展示)
1
2
3
4
换行,第一行在下方
1
2
3
4
5
6
起点在右端
1
2
3
垂直方向
1
2
3
垂直方向,起点在下沿
1
2
3
左对齐
1
2
3
右对齐
1
2
3
水平居中
1
2
3
两端对齐,项目之间的间隔都相等
1
2
3
4
每个项目两侧的间隔相等
1
2
3
4
垂直方向起点对齐
1
2
3
垂直方向终点对齐
1
2
3
垂直方向居中对齐
1
2
3
<!-- 不换行 -->
<div class="vus-box nowrap">
  <div class="vus-flex-2">1</div>
  <div class="vus-flex-2">2</div>
  <div class="vus-flex-12">3</div>
</div>

<!-- 换行,第一行在下方 -->
<div class="vus-box wrap-reverse">
  <div class="vus-flex-1">1</div>
  <div class="vus-flex-2">2</div>
  <div class="vus-flex-2">3</div>
</div>

<!-- 水平方向,起点在右端 -->
<div class="vus-box row-reverse">
  <div class="vus-col-4">1</div>
  <div class="vus-col-4">2</div>
  <div class="vus-col-4">3</div>
</div>

<!-- 垂直方向 -->
<div class="vus-box column">
  <div class="vus-col-4">1</div>
  <div class="vus-col-4">2</div>
  <div class="vus-col-4">3</div>
</div>

<!-- 垂直方向,起点在下沿 -->
<div class="vus-box column-reverse">
  <div class="vus-col-4">1</div>
  <div class="vus-col-4">2</div>
  <div class="vus-col-4">3</div>
</div>

<!-- 左对齐 -->
<div class="vus-box justify-start">
  <div class="vus-col-2">1</div>
  <div class="vus-col-3">2</div>
  <div class="vus-col-4">3</div>
</div>

<!-- 右对齐 -->
<div class="vus-box justify-end">
  <div class="vus-col-2">1</div>
  <div class="vus-col-3">2</div>
  <div class="vus-col-4">3</div>
</div>

<!-- 水平居中 -->
<div class="vus-box justify-center">
  <div class="vus-col-2">1</div>
  <div class="vus-col-3">2</div>
  <div class="vus-col-4">3</div>
</div>

<!-- 两端对齐,项目之间的间隔都相等 -->
<div class="vus-box justify-between">
  <div class="vus-col-2">1</div>
  <div class="vus-col-3">2</div>
  <div class="vus-col-4">3</div>
</div>

<!-- 每个项目两侧的间隔相等 -->
<div class="vus-box justify-around">
  <div class="vus-col-2">1</div>
  <div class="vus-col-3">2</div>
  <div class="vus-col-4">3</div>
</div>

<!-- 垂直方向起点对齐 -->
<div class="vus-box items-start">
  <div class="vus-col-2">1</div>
  <div class="vus-col-3">2</div>
  <div class="vus-col-4">3</div>
</div>

<!-- 垂直方向终点对齐 -->
<div class="vus-box items-end">
  <div class="vus-col-2">1</div>
  <div class="vus-col-3">2</div>
  <div class="vus-col-4">3</div>
</div>

<!-- 垂直方向居中对齐 -->
<div class="vus-box items-center">
  <div class="vus-col-2">1</div>
  <div class="vus-col-3">2</div>
  <div class="vus-col-4">3</div>
</div>

响应式布局

网格系统预设了五个响应尺寸:

分辨率≥576px≥768px≥1024px≥1280px≥1920px
栅格布局.vus-col-xs-*.vus-col-sm-*.vus-col-md-*.vus-col-lg-*.vus-col-xl-*
Flex布局.vus-flex-xs-*.vus-flex-sm-*.vus-flex-md-*.vus-flex-lg-*.vus-flex-xl-*
分栏偏移.vus-offset-xs-*.vus-offset-sm-*.vus-offset-md-*.vus-offset-lg-*.vus-offset-xl-*
分栏排序.vus-order-xs-*.vus-order-sm-*.vus-order-md-*.vus-order-lg-*.vus-order-xl-*
分栏间隔(左右).lr-xs-*.lr-sm-*.lr-md-*.lr-lg-*.lr-xl-*
分栏间隔(上下).tb-xs-*.tb-sm-*.tb-md-*.tb-lg-*.tb-xl-*
缩小窗口查看效果
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
<div class="vus-box lr-xs-1 lr-sm-2 lr-md-3 lr-lg-4 lr-xl-5 tb-xs-1 tb-sm-2 tb-md-3 tb-lg-4 tb-xl-4">
  <div class="vus-col-12 vus-col-xs-6 vus-col-sm-4 vus-col-md-3 vus-col-lg-2 vus-col-xl-1">1</div>
  <div class="vus-col-12 vus-col-xs-6 vus-col-sm-4 vus-col-md-3 vus-col-lg-2 vus-col-xl-2">2</div>
  <div class="vus-col-12 vus-col-xs-6 vus-col-sm-4 vus-col-md-3 vus-col-lg-2 vus-col-xl-1">3</div>
  <div class="vus-col-12 vus-col-xs-6 vus-col-sm-4 vus-col-md-3 vus-col-lg-2 vus-col-xl-2">4</div>
  <div class="vus-col-12 vus-col-xs-6 vus-col-sm-4 vus-col-md-3 vus-col-lg-2 vus-col-xl-1">5</div>
  <div class="vus-col-12 vus-col-xs-6 vus-col-sm-4 vus-col-md-3 vus-col-lg-2 vus-col-xl-2">6</div>
  <div class="vus-col-12 vus-col-xs-6 vus-col-sm-6 vus-col-md-3 vus-col-lg-6 vus-col-xl-1">7</div>
  <div class="vus-col-12 vus-col-xs-6 vus-col-sm-6 vus-col-md-3 vus-col-lg-6 vus-col-xl-2">8</div>
</div>