将页面改为响应式的组件

发表于 | 更新于:

快速将页面改为响应式页面

珊格系统

参考 ElementUI Layout 布局、Bootstrap 珊格系统

将网页划分成若干行，然后每行等分为若干列，基于这样的方式进行布局，形象的成为栅栏布局。

element可将每行划分为24个分栏，而bootstrap是划分为12个分栏，从使用角度，还是24个分栏更加精细。

属性 像素
xs < 768px
sm >= 768px
md >= 992px
lg >= 1200px
xl >= 1920px

全局属性

属性名 说明 类型 默认值
hidden 隐藏 dispaly: none object {xs: false, sm: false, md: false, lg: false, xl: false}
order 排列顺序。数值越小，排列越靠前。flex布局的order属性 number 0

实现方式：
vue 通过 自定义全局指令
react

容器组件

参考 HTML语义化标签 与 ElementUI Container 布局容器
组件，快速搭建页面基本结构

an-container: 外层容器。默认水平又左到右排列

an-header: 顶栏容器

an-aside: 侧边栏容器

an-main: 主要区域容器

an-footer: 底栏容器

an-nav: 导航容器

tip
以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。 此外， <an-container> 的直接子元素必须是后五个组件中的一个或多个。
后五个组件的父元素必须是一个 <an-container>

例子

1
2
3
4
5
6
7
8
9
10

<an-container>
    <an-aside>Aside</an-aside>
    <an-container>
        <an-header>Header</an-header>
        <an-nav>Nav</an-nav>
        <an-main>Main</an-main>
        <an-footer>Footer</an-footer>
    </an-container>
</an-container>

属性

与ElementUI Container 组件保持保持一致

布局

通过 an-row 和 an-col 组件，并通过 an-col 组件的 span 属性我们就可以自由地组合布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<div>
    <an-row>
        <an-col :span="24">
            <div/>
        </an-col>
    </an-row>
    <an-row>
        <an-col :span="12">
            <div/>
        </an-col>
        <an-col :span="12">
            <div/>
        </an-col>
    </an-row>
    <an-row>
        <an-col :span="8">
            <div/>
        </an-col>
        <an-col :span="8">
            <div/>
        </an-col>
        <an-col :span="8">
            <div/>
        </an-col>
    </an-row>
    <an-row>
        <an-col :span="6">
            <div/>
        </an-col>
        <an-col :span="6">
            <div/>
        </an-col>
        <an-col :span="6">
            <div/>
        </an-col>
        <an-col :span="6">
            <div/>
        </an-col>
    </an-row>
    <an-row>
        <an-col :span="4">
            <div/>
        </an-col>
        <an-col :span="4">
            <div/>
        </an-col>
        <an-col :span="4">
            <div/>
        </an-col>
        <an-col :span="4">
            <div/>
        </an-col>
        <an-col :span="4">
            <div/>
        </an-col>
        <an-col :span="4">
            <div/>
        </an-col>
    </an-row>
</div>

属性

与ElementUI Layout 组件保持保持一致