ElementU 01 布局
框架使用
在使用elemfentUI 的时候要配合Vue或者React脚本来使用，不然无法预览效果，我这里使用的vue 框架，所以
在html要实例化Vue,并且绑定到 租间房父布局，例如：
<html >
<head>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-button>
登录
</el-button>
</div>
</body>
<script>
var vm=new Vue({
el:"#app",
})
</script>
</html>
CSS居中
div 居中
设置div的宽高，然后设置
margin：0 auto ,可以让子元素居中
块级元素水平居中
设置 父布局
text-align:center来设置水平居中
flex布局居中
设置父布局为flex，布局并且设置
display:flex;
align-items:center;
layout 布局
el-row 标签和el-col来配合显示行列布局：
<el-row>
<el-clo>
<div span="12" style="background-color:red">
<div span="12" style="background-color:green">
</div>
</el-clo>
</el-row>
详细属性
【Row 属性】
-
gutter可以可以设置间距 -
type设置布局，例如type="flex",设置成flex布局后，使用justify= start |end|center| space-between | space-around来设置对齐
-align 布局在flex布局下，参数有top | middle |bottom |
【Col 属性】
-
span根据占比来控制宽度 -
offset分栏偏移 -
push向右移动格数 -
pull向左移动格数
Container布局容器
为了方便开发，设计出了布局容器el-container，作为父布局，只能包含四种子子布局：
-
el-header标题栏 -
el-aside侧边栏 -
el-main内容栏 -
el-footer底部栏
【注】：el-container中，包含el-aside和el-main的时候，布局时从左到右，包含el-header和el-footer的时候，就会布局从上到下,el-aside中布局也是从上到下.
<body>
<div id="app">
<el-container>
<el-header style="background-color: black;" >
</el-header>
</el-container>
<el-container>
<el-aside style=" background-color: red; height: 500px; width: 200px;">
</el-aside>
<el-main style=" background-color: green; height: 500px; width: 200px;" >
</el-main>
</el-container>
<el-container>
<el-footer style="background-color: hotpink;">
</el-footer>
</el-container>
</div>
</body>
<script>
new Vue().$mount('#app')
</script>
</html>
Button按钮
el-button 来显示 按钮
其中属性包括：
-
type可以设置成-
primary主要按钮 -
success成功按钮 -
...
-
-
round圆角按钮 -
circle圆形按钮 -
plain朴素按钮 （默认按钮） -
disable是否不可点击 -
loading是否加载 -
-
icon图标名
文字链接
el-link 来显示文字链接。主要使用的属性有：
-
type类似于按钮 -
icon显示图标。类似于按钮 -
disabled是否可点击 -
underline是否显示下划线,例如显示下划线。:inderline=true
el-radio单选 & el-radio-button 单选按钮
-
disabled是否可点击 -
border事都显示边框 -
size大小
