Position 位置
基础用法
| 样式名称 | 描述 |
|---|---|
| vus-fixed | 固定位置 |
| vus-relative | 相对位置 |
| vus-absolute | 绝对位置 |
位置距离(像素)
| size 值表 |
|---|
| 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 36 38 40 42 44 45 46 48 50 52 54 55 56 58 60 62 64 65 66 68 70 72 74 75 76 78 80 82 84 85 86 88 90 92 94 95 96 98 100 110 120 130 140 150 160 170 180 190 200 250 300 350 400 450 500 550 600 650 700 750 |
| 样式名称 | 描述 |
|---|---|
| vus-left-{size} | left: {size}px 左边距离 |
| vus-left--{size} | left: -{size}px 左边距离(负) |
| vus-top-{size} | top: {size}px 顶部距离 |
| vus-top--{size} | top: -{size}px 顶部距离(负) |
| vus-right-{size} | right: {size}px 右边距离 |
| vus-right--{size} | right: -{size}px 右边距离(负) |
| vus-bottom-{size} | bottom: {size}px 底部距离 |
| vus-bottom--{size} | bottom: -{size}px 底部距离(负) |
| vus-left-0 | left: 0px; |
| vus-top-0 | top: 0px; |
| vus-right-0 | right: 0px; |
| vus-bottom-0 | bottom: 0px; |
<div class="vus-fixed vus-left-100 vus-top--100"></div>
<div class="vus-relative vus-right-100 vus-bottom-100"></div>
<div class="vus-absolute vus-right-100 vus-top-100"></div>
位置距离(百分比)
| size 值表 |
|---|
| 10 20 30 40 50 60 70 80 90 100 |
| 样式名称 | 描述 |
|---|---|
| vus-left-p-{size} | left: {size}% 左边距离 |
| vus-left-p--{size} | left: -{size}% 左边距离(负) |
| vus-top-p-{size} | top: {size}% 顶部距离 |
| vus-top-p--{size} | top: -{size}% 顶部距离(负) |
| vus-right-p-{size} | right: {size}% 右边距离 |
| vus-right-p--{size} | right: -{size}% 右边距离(负) |
| vus-bottom-p-{size} | bottom: {size}% 底部距离 |
| vus-bottom-p--{size} | bottom: -{size}% 底部距离(负) |
<div class="vus-fixed vus-left-p-100 vus-top-p--100"></div>
<div class="vus-relative vus-right-p-100 vus-bottom-p-100"></div>
<div class="vus-absolute vus-right-p-100 vus-top-p-100"></div>
索引位置
| size 值表 |
|---|
| -1 0 1 2 3 4 5 6 7 8 9 10 100 101 102 103 104 105 106 107 108 109 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 99999 |
<div class="vus-fixed vus-index--1"></div>
<div class="vus-relative vus-index-0"></div>
<div class="vus-absolute vus-index-99999"></div>
响应式方案
响应式预设了四个响应尺寸：
| 分辨率 | ≥567px | ≥768px | ≥1024px | ≥1280px |
|---|---|---|---|---|
| Left | vus-left-xs-* vus-left-xs--* | vus-left-sm-* vus-left-sm--* | vus-left-md-* vus-left-md--* | vus-left-lg-* vus-left-lg--* |
| Top | vus-top-xs-* vus-top-xs--* | vus-top-sm-* vus-top-sm--* | vus-top-md-* vus-top-md--* | vus-top-lg-* vus-top-lg--* |
| Right | vus-right-xs-* vus-right-xs--* | vus-right-sm-* vus-right-sm--* | vus-right-md-* vus-right-md--* | vus-right-lg-* vus-right-lg--* |
| Bottom | vus-bottom-xs-* vus-bottom-xs--* | vus-bottom-sm-* vus-bottom-sm--* | vus-bottom-md-* vus-bottom-md--* | vus-bottom-lg-* vus-bottom-lg--* |
| 索引 | vus-index-xs-* | vus-index-sm-* | vus-index-md-* | vus-index-lg-* |