1.创建布局
通过Col组件的:span属性调整Layout布局，分为24栏。
el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col></el-row>2.分栏间隔
通过Row组件的:gutter属性来调整布局之间的宽度。
<el-row :gutter="20"> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col></el-row>3.分栏漂移
通过Col组件的:offset属性调整栅格的偏移位置（每次1格/24格）。
<el-row :gutter="20"> <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col></el-row>4.对齐方式
通过Row组件的type="flex"启动flex布局，再通过Row组件的justify属性调整排版方式，属性值分别有
start 居前（默认）center 居中end 居后space-between 分布自适应（两边–中间，两边没有空隙）around （中间–两边，两边会有空隙）<el-row type="flex" class="row-bg" justify="center"> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col></el-row>5.响应式布局
参考bootstrap的响应式，预设四个尺寸
xs <768pxsm ≥768pxmd ≥992lg ≥1200<el-row :gutter="10"> <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col> <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col></el-row> 颜色与字体此处暂时略过
ICON图标今后可以使用<i>来做图标，给其class添加el-icon-iconName即可。
可以在<button>上添加icon属性。
1.主题风格
defaultprimary 蓝色text 文字蓝色无边框<el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="text">文字按钮</el-button>2.禁用状态
通过修改:disabled的boolean值true,false来控制按钮是否禁用。
3.颜色暗示
默认按钮，通过type的值来控制朴素按钮，hover显示颜色 ，通过plain的boolean值来控制4.图标按钮
按钮不添加字，设置icon属性即可
<el-button type="primary" icon="edit"></el-button>按钮添加字，图标居按钮文字左侧
<el-button type="primary" icon="search">搜索</el-button>可以在<button>文字右侧添加<i>标签，图标居按钮文字右侧
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>5.加载中
设置loading属性为true即可
<el-button type="primary" :loading="true">加载中</el-button> 16.按钮尺寸
设置size属性来配置
large 大正常small 小mini 超小其他autofocus：是否默认对焦，booleannative-type：原生type，string（button,submit,reset）-Radio单选框(label前面到底加不加：冒号)
1.基本用法
v-model属性用来绑定变量
label用来赋值（想要选中该单选框，label的值必须等于v-model绑定的变量值，Number/String）
<template> <el-radio class="radio" v-model="radio" label="1">备选项</el-radio> <el-radio class="radio" v-model="radio" label="2">备选项</el-radio></template><script> export default { data () { return { radio: '1' }; } }</script>2.禁用状态
设置disableed的boolean值为true
<template> <el-radio disabled v-model="radio1" label="禁用">备选项</el-radio> <el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio></template><script> export default { data () { return { radio1: '选中且禁用'//此处变量值等于label变量值 }; } }</script>3.单选框组
被<el-radio-group> </el-radio-group> 包含即可。
只需要在<el-radio-group>中绑定v-model，
在<el-radio>中设置:label即可。
（提供可一个change方法响应变化，会传入一个value值）
4.按钮组（单选）
个人炒鸡喜欢
lable就是显示的值
在按钮组当中添加<el-radio-button>就可以实现，
并且支持对size属性设置large和small两个属性，不设置为默认。
1.基础用法
设置v-model属性绑定变量。
设置disabled属性即可。
<el-checkbox v-model="checked2" disabled>备选项</el-checkbox>