elementUI 学习- Layout布局 与UI 设定

Layout布局

1.创建布局

通过Col组件的:span属性调整Layout布局,分为24栏。

el-row>
  

2.分栏间隔

通过Row组件的:gutter属性来调整布局之间的宽度。


  

3.分栏漂移

通过Col组件的:offset属性调整栅格的偏移位置(每次1格/24格)。


  

4.对齐方式

通过Row组件的type="flex"启动flex布局,再通过Row组件的justify属性调整排版方式,属性值分别有

  1. start 居前(默认)
  2. center 居中
  3. end 居后
  4. space-between 分布自适应(两边–中间,两边没有空隙)
  5. around (中间–两边,两边会有空隙)

  

5.响应式布局

参考bootstrap的响应式,预设四个尺寸

  1. xs <768px
  2. sm ≥768px
  3. md ≥992
  4. lg ≥1200

  

颜色与字体

此处暂时略过


ICON图标

今后可以使用来做图标,给其class添加el-icon-iconName即可。 
可以在

你可能感兴趣的:(Vue.js,elementUI)