Container 布局容器

用于布局的容器组件,方便快速搭建页面基本结构

<el-container> : 外层容器。当子元素包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列,否则水平左右排列

<el-header> : 顶栏容器

<el-aside> : 侧边栏容器

<el-main> : 主要区域容器

<el-footer> : 底边栏容器

这些组件均采用 flex 布局。<el-container> 的子元素只能是后四者,后四者的父元素也只能是 <el-container>

上中下排列:

 <el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>

上下后下面分为左右:

  (tips : 开头红字:<el-container> 包含<el-header> 或  <el-footer> 时,子元素会垂直排列。故此,设置包含再包含的写法)

<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>

elementUI 学习入门之 container 布局容器的更多相关文章

  1. elementUI 学习入门之 layout 布局

    layout 布局 通过基础的 24 分栏,可进行快速布局 基础布局 使用单一分栏创建基础的栅格布局, 通过 span 属性指定每栏的大小 <el-col :span="8" ...

  2. Container 布局容器

    Container 布局容器 用于布局的容器组件,方便快速搭建页面的基本结构: <el-container>:外层容器.当子元素中包含 <el-header> 或 <el ...

  3. elementUI 学习入门之 Select 选择器

    Select 选择器 基础用法 <el-select v-model="val1" placeholder="请输入"> <el-option ...

  4. elementUI 学习入门之 inputNumber 计数器

    InputNumber 计数器 基础用法 <el-input-number v-model="num2"></el-input-number> v-mode ...

  5. elementUI 学习入门之 input 输入框

    基础用法 <el-input v-model="input1" palcehoder="请输入"></el-input> var Mai ...

  6. elementUI 学习入门之 checkbox 复选框

    CheckBox 复选框 与单选框基本类似.如:按钮样式.带边框.复选框按钮大小. eg: <template> <el-checkbox-group v-model="s ...

  7. elementUI 学习入门之 radio 单选框

    Radio 单选框 基础用法 选项默认可见,选项不宜过多,选项过多建议使用 select 选择器 使用 Radio 组件,需要设置 v-model 绑定变量,选中意味着变量的值为相应 Radio  l ...

  8. elementUI 学习入门之 Button 按钮

    基础按钮用法 按钮分为:默认按钮.朴素按钮(plain).圆角按钮(round).圆形按钮(circle).eg: <el-button plain>朴素按钮</el-button& ...

  9. Element 2 组件源码剖析之布局容器

    0x00 简介 前文分析过组件的 布局栅格化(Grid Layout) ,通过基础的 24 分栏,迅速简便地创建布局. 本文将介绍用于布局的容器组件,使用 Flexbox 功能将其所控制区域设定为特定 ...

随机推荐

  1. shizhong

    <script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehonecl ...

  2. input模拟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. Qt如何获得窗口的几何信息(Window Geometry)

    一个窗口除去窗框以后,余下部分称为客户区域.获得窗口的几何信息(坐标,长宽等)有以下两组命令: 1. 包括窗框(即整个窗口):x(), y(), frameGeometry(), pos(),  mo ...

  4. Disruptor的使用

    ..................2015年的第一天................... 本文代码托管在 https://github.com/hupengcool/disruptor-start ...

  5. 【BZOJ】1707: [Usaco2007 Nov]tanning分配防晒霜

    [算法]贪心扫描线(+堆) [题意]给定n头牛有区间[a,b],m个防晒霜值为ai,每个可以使用bi次,每次可以使包含它的区间涂到防晒霜,问最多被涂牛数. [题解] 参考:[bzoj1707]: [U ...

  6. 用sqoop将mysql的数据导入到hive表中

    1:先将mysql一张表的数据用sqoop导入到hdfs中 准备一张表 需求 将 bbs_product 表中的前100条数据导 导出来  只要id  brand_id和 name 这3个字段 数据存 ...

  7. 2017ACM暑期多校联合训练 - Team 2 1006 HDU 6050 Funny Function (找规律 矩阵快速幂)

    题目链接 Problem Description Function Fx,ysatisfies: For given integers N and M,calculate Fm,1 modulo 1e ...

  8. NYOJ 228 士兵杀敌(五) (模拟)

    {题目链接](http://acm.nyist.net/JudgeOnline/problem.php?pid=228) 描述 南将军麾下有百万精兵,现已知共有M个士兵,编号为0~M,每次有任务的时候 ...

  9. 实验吧CTF题库之二叉树遍历

    题目链接:http://www.shiyanbar.com/ctf/1868 直接推算出来这棵树是: 后序遍历是:ACBFGED 参考资料: 1. http://www.shiyanbar.com/c ...

  10. SVM支持向量机的基本原理

    SVM支持向量机的基本原理 对于很多分类问题,例如最简单的,一个平面上的两类不同的点,如何将它用一条直线分开?在平面上我们可能无法实现,但是如果通过某种映射,将这些点映射到其它空间(比如说球面上等), ...