优化大师官方网站,一流的网站建设哪家好,如何查询网站的空间商,网站建设评分标准之前的布局容器是一个整体的框架#xff0c;layout里面的布局其实就是el-row和el-col的组合。 基础布局 使用单一分栏创建基础的栅格布局。 通过 row 和 col 组件#xff0c;并通过 col 组件的 span 属性我们就可以自由地组合布局。 这种最简单#xff0c;…之前的布局容器是一个整体的框架layout里面的布局其实就是el-row和el-col的组合。 基础布局 使用单一分栏创建基础的栅格布局。 通过 row 和 col 组件并通过 col 组件的 span 属性我们就可以自由地组合布局。 这种最简单外面有一层row说明四个col都在一行里面也就是四列都在一行里面。 局部布局 [el-row] el-row是控制一行一行的el-col是控制一列一列的。span其实它会将整个浏览器作为24个格栅。如果每个都是6那么就排满了 外面有一层其实是一个row外面有一层row其实是一行这四个col也就是四列都在一行里面。
每一列有个参数6它会将整个浏览器的宽度作为24个格栅。如果大于24就排满了就会另起一行。 一个格栅是24个格子:span6其实就是控制格栅占用的几个格子。gutter20 每个col之间的间距间距为x px像素。 el-header styleflex:1el-rowel-col :span24 stylebackground-color: yellow;123/el-col/el-rowel-row :gutter35el-col :span6 stylebackground-color: red;123/el-colel-col :span6 stylebackground-color: green;123/el-colel-col :span6 stylebackground-color: blue;123/el-colel-col :span6 stylebackground-color: burlywood;123/el-col/el-row/el-header 如果超过24了那么就另外启动一行来摆放。 el-header styleflex:1el-rowel-col :span24 stylebackground-color: yellow;123/el-col/el-rowel-row :gutter15el-col :span6 div stylebackground-color: red;123/div/el-colel-col :span16div stylebackground-color: green;123/div/el-colel-col :span1div stylebackground-color: blue;123/div/el-colel-col :span1div stylebackground-color: burlywood;123/div/el-col/el-row/el-header offset是左侧的间隔格数 el-header styleflex:1el-rowel-col :span24 stylebackground-color: yellow;123/el-col/el-rowel-row :gutter15el-col :offset1 :span6 div stylebackground-color: red;123/div/el-colel-col :span16div stylebackground-color: green;123/div/el-colel-col :span1div stylebackground-color: blue;123/div/el-colel-col :span1div stylebackground-color: burlywood;123/div/el-col/el-row/el-header 下面el-col里面放置图标按钮这里一个方法是控制它的折叠的。这里没有使用button去实现而是使用了div去实现div里面放了一个图标去实现类似按钮的东西。不是纯使用按钮去实现的这样也是可以的。 很灵活想怎么组合就可以怎么组合。这里还需要使用css去将其处理一下 el-col :span1div classheader-collapse clickonCollapseel-iconcomponent :isisCollapse ? expand:fold/ /el-icon/div/el-col
图标的大小也是front-size来调整的
