深圳 电子商务网站开发,设计软件名称,wordpress建站图片效果,电子商务网站建设功能本文目录 背景分栏布局分栏间隔分栏偏移对齐方式响应式布局小结 1. 背景 element的布局方式与bootstrap原理是一样的#xff0c;将网页划分成若干行#xff0c;然后每行等分为若干列#xff0c;基于这样的方式进行布局#xff0c;形象的成为栅栏布局。 区别是element可…本文目录 背景分栏布局分栏间隔分栏偏移对齐方式响应式布局小结 1. 背景 element的布局方式与bootstrap原理是一样的将网页划分成若干行然后每行等分为若干列基于这样的方式进行布局形象的成为栅栏布局。 区别是element可将每行划分为24个分栏而bootstrap是划分为12个分栏从使用角度还是24个分栏更加精细。 2. 分栏布局 首先每行使用标签标识然后每行内的列使用标识至于每列整行的宽度比例则使用:span属性进行设置。 如下代码即为将1行等分为2列为了便于区分列我们为列添加了不同的样式另外注意是分割线此处用于区分不同的示例。 templatedivspan每行24分栏布局/spanel-rowel-col :span12 classlightgreen-box示例1/el-colel-col :span12 classorange-box示例1/el-col/el-rowel-divider/el-divider/div /template style scoped.lightgreen-box {background-color: lightgreen;height: 24px;}.orange-box {background-color: orange;height: 24px;} /style 效果如下 3. 分栏间隔 有时候想为不同分栏之间设定一定的间隔可以使用标签的:gutter属性注意默认间隔为0。 此时需要注意的是下面的写法间隔是不生效的。 span分栏间隔 无效/spanel-row :gutter50el-col :span8 classlightgreen-box示例2/el-colel-col :span8 classorange-box示例2/el-colel-col :span8 classlightgreen-box示例2/el-col/el-rowel-divider/el-divider需要在分栏里面新增元素才能实现分栏间隔代码修改如下则间隔生效。 span分栏间隔 有效/spanel-row :gutter24el-col :span8div classlightgreen-box示例3/div/el-colel-col :span8div classorange-box示例3/div/el-colel-col :span8div classlightgreen-box示例3/div/el-col/el-rowel-divider/el-divider上面两个示例效果如下 4. 分栏偏移 有时候想让某个分栏不从左边显示而是直接显示到中间或者右侧例如右侧导航栏我们希望它处于右侧且占据页面1/3的宽度。此时可以借助offset属性来实现表示偏移量。 此时想占据1/3宽度则:span应为8偏移量应为24-816所以代码如下 span分栏偏移/spanel-rowel-col :span8 :offset16div classlightgreen-box示例4/div/el-col/el-rowel-divider/el-divider效果如下 5. 对齐方式 如果想让整个行居左、居中、居右对齐则可以直接设置的对齐方式。 此时需要先设置typeflex来启用对齐方式然后通过justify属性来设置具体的对齐方式例如下面的例子实现了居中对齐。 span对齐方式/spanel-row typeflex justifycenterel-col :span12div classlightgreen-box示例5/div/el-col/el-rowel-divider/el-divider6. 响应式布局 element和bootstrap的响应式布局原理相同都是通过为列设置不同分辨率下的占用宽度比例来实现的。 例如我们想实现在比较大的分辨率电脑每分栏占据屏幕宽度的1/4而在比较小宽度手机每分栏占据屏幕全部宽度。这样就能保证在手机上也能完整显示内容则可以使用如下代码 span响应式布局/spanel-rowel-col :lg6 :xs24 classlightgreen-box示例6/el-colel-col :lg6 :xs24 classorange-box示例6/el-colel-col :lg6 :xs24 classlightgreen-box示例6/el-colel-col :lg6 :xs24 classorange-box示例6/el-col/el-row在电脑上效果如下 在手机上效果如下 注意具体的尺寸属性为 属性使用说明xs宽度768pxsm768pxmd992pxlg1200pxxl1920px 7. 小结 element的布局跟bootstrap原理是一样的使用起来也比较方便具体的参数其实不需要都记住只要知道用法使用时去官网查询即可。