elementUI 学习入门之 container 布局容器
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 布局容器的更多相关文章
- elementUI 学习入门之 layout 布局
layout 布局 通过基础的 24 分栏,可进行快速布局 基础布局 使用单一分栏创建基础的栅格布局, 通过 span 属性指定每栏的大小 <el-col :span="8" ...
- Container 布局容器
Container 布局容器 用于布局的容器组件,方便快速搭建页面的基本结构: <el-container>:外层容器.当子元素中包含 <el-header> 或 <el ...
- elementUI 学习入门之 Select 选择器
Select 选择器 基础用法 <el-select v-model="val1" placeholder="请输入"> <el-option ...
- elementUI 学习入门之 inputNumber 计数器
InputNumber 计数器 基础用法 <el-input-number v-model="num2"></el-input-number> v-mode ...
- elementUI 学习入门之 input 输入框
基础用法 <el-input v-model="input1" palcehoder="请输入"></el-input> var Mai ...
- elementUI 学习入门之 checkbox 复选框
CheckBox 复选框 与单选框基本类似.如:按钮样式.带边框.复选框按钮大小. eg: <template> <el-checkbox-group v-model="s ...
- elementUI 学习入门之 radio 单选框
Radio 单选框 基础用法 选项默认可见,选项不宜过多,选项过多建议使用 select 选择器 使用 Radio 组件,需要设置 v-model 绑定变量,选中意味着变量的值为相应 Radio l ...
- elementUI 学习入门之 Button 按钮
基础按钮用法 按钮分为:默认按钮.朴素按钮(plain).圆角按钮(round).圆形按钮(circle).eg: <el-button plain>朴素按钮</el-button& ...
- Element 2 组件源码剖析之布局容器
0x00 简介 前文分析过组件的 布局栅格化(Grid Layout) ,通过基础的 24 分栏,迅速简便地创建布局. 本文将介绍用于布局的容器组件,使用 Flexbox 功能将其所控制区域设定为特定 ...
随机推荐
- shizhong
<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehonecl ...
- input模拟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Qt如何获得窗口的几何信息(Window Geometry)
一个窗口除去窗框以后,余下部分称为客户区域.获得窗口的几何信息(坐标,长宽等)有以下两组命令: 1. 包括窗框(即整个窗口):x(), y(), frameGeometry(), pos(), mo ...
- Disruptor的使用
..................2015年的第一天................... 本文代码托管在 https://github.com/hupengcool/disruptor-start ...
- 【BZOJ】1707: [Usaco2007 Nov]tanning分配防晒霜
[算法]贪心扫描线(+堆) [题意]给定n头牛有区间[a,b],m个防晒霜值为ai,每个可以使用bi次,每次可以使包含它的区间涂到防晒霜,问最多被涂牛数. [题解] 参考:[bzoj1707]: [U ...
- 用sqoop将mysql的数据导入到hive表中
1:先将mysql一张表的数据用sqoop导入到hdfs中 准备一张表 需求 将 bbs_product 表中的前100条数据导 导出来 只要id brand_id和 name 这3个字段 数据存 ...
- 2017ACM暑期多校联合训练 - Team 2 1006 HDU 6050 Funny Function (找规律 矩阵快速幂)
题目链接 Problem Description Function Fx,ysatisfies: For given integers N and M,calculate Fm,1 modulo 1e ...
- NYOJ 228 士兵杀敌(五) (模拟)
{题目链接](http://acm.nyist.net/JudgeOnline/problem.php?pid=228) 描述 南将军麾下有百万精兵,现已知共有M个士兵,编号为0~M,每次有任务的时候 ...
- 实验吧CTF题库之二叉树遍历
题目链接:http://www.shiyanbar.com/ctf/1868 直接推算出来这棵树是: 后序遍历是:ACBFGED 参考资料: 1. http://www.shiyanbar.com/c ...
- SVM支持向量机的基本原理
SVM支持向量机的基本原理 对于很多分类问题,例如最简单的,一个平面上的两类不同的点,如何将它用一条直线分开?在平面上我们可能无法实现,但是如果通过某种映射,将这些点映射到其它空间(比如说球面上等), ...