EasyMvc入门教程-高级控件说明(14)列布局控件
想起刚做网页时候,看着这么大的屏幕,一直在 想该如何布局呢,后来经过Table布局,Div布局,Border布局,列式布局。
目前EasyMvc主要支持12列的列式布局(手机兼容性好)。请看下面的例子:
@Html.Q().StartRow()
<div style="background-color: rgb(139, 235, 146)">我被包裹在StartRow与EndRow之间,我将占据12列。。。</div>
@Html.Q().EndRow() @Html.Q().StartRow()
@Html.Q().StartCol()
<div style="background-color: rgb(181, 251, 219)">我被包裹在StartCol与EndCol之间,默认情况下,我将一下子占据6列。。。</div>
@Html.Q().EndCol()
@Html.Q().StartCol()
<div style="background-color:rgb(246, 247, 224)">我被包裹在StartCol与EndCol之间,默认情况下,我将一下子占据6列。。。</div>
@Html.Q().EndCol()
@Html.Q().EndRow()
显示效果如下:
上面的代码看起来有些多,其实主要是两个关键词,Row和Col。:)
Col可以指定其包含的内容占据多少列,如下列所示:
@Html.Q().StartRow() @Html.Q().StartCol(new ColModel(){ColSpan = 1})
<div style="background-color: rgb(212, 255, 235); height: 200px;">我被设置了ColSpan = 1,我现在占据1列。。。</div>
@Html.Q().EndCol() @Html.Q().StartCol(new ColModel() { ColSpan = 11 })
<div style="background-color: rgb(139, 235, 146);height: 200px;">我被设置了ColSpan = 11,我现在占据11列。。。</div>
@Html.Q().EndCol() @Html.Q().EndRow()
注意其中的ColSpan=1,含义为占据12列中的1列,即其占据父容器的1/12宽度。怎么样,还容易理解吧。
另外,列布局还支持列偏移与列间距,分别通过ColOffset和ColSpace实现。这两种情况请见在线演示,不再复述。
总结:列布局控件比较简单,只要理解12列布局即可。 :)
更多使用示例请浏览在线示例:http://core.zwc.cn
EasyMvc入门教程-高级控件说明(14)列布局控件的更多相关文章
- EasyMvc入门教程-高级控件说明(19)表单控件
我们开发的系统,主要的一个功能就是采集界面数据,传回到服务器,比如:录入学生信息,这时候就需要表单. EasyMvc提供了如下界面控件,如下图所示:(控件+布局) EasyMvc实现了基于模型的绑定, ...
- EasyMvc入门教程-高级控件说明(20)表格控件
表单与表格是信息化系统里很常见的控件,EasyMvc提供了简单的数据绑定方式(基于Json),看下面的示例: 准备的接口地址代码如下:(该接口适用以下所有例子) public IActionResu ...
- EasyMvc入门教程-高级控件说明(15)方位布局控件
现在很多管理后台都流行全屏切割的布局,大体结构如下图所示: 大家注意到没,整个布局是五个部分组成:“东西南北中”,EasyMvc对应的实现的代码为: @(Html.Q().Layout().TextC ...
- EasyMvc入门教程-高级控件说明(16)信息框控件
网页开发的时候,会经常向用户显示一些信息,比如执行结果,注意事项等,下面展示一种最简单的信息提示: 代码如下: @Html.Q().Msg().Text("初始化信息").Auto ...
- EasyMvc入门教程-高级控件说明(17)对话框控件
上一节我们说到的信息框比较简单,如果我们想简单实现用户用户交互,比如常用的锁屏界面,应该如何实现呢?首先看效果: 当用户输入"mxd",后,界面显示如下: 以上效果的实现代码为: ...
- EasyMvc入门教程-高级控件说明(18)弹出框控件
前面两节介绍了信息框与对话框,实际开发中如果我们遇到更复杂的要求,比如要求在弹出框里显示另外的网址,如下所示: 实现代码如下: @Html.Q().Popup().Text("我可以嵌套网页 ...
- EasyMvc入门教程
EasyMvc 希望实现的目标:模块化,快速简单化,满足80%的常见需求.基于.Net Core 2.0.5开发.开发环境:VS2017,运行环境支持Window/Linux. 相关链接: 演示地址: ...
- Expression Blend实例中文教程(4) - 布局控件快速入门Canvas
上一篇,我介绍了Silverlight控件被分为三种类型, 第一类: Layout Controls(布局控件) 第二类: Item Controls (项目控件) 第三类: User Interac ...
- [转载]ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
随机推荐
- error C2011: “Picture”:“struct”类型重定义
今天引用外来库时出现问题,也许是版本问题. 错误如下: .....\oursun\cincludes\quickdraw.h(309): error C2011: “Picture”:“struct” ...
- Adaboost和GBDT的区别以及xgboost和GBDT的区别
Adaboost和GBDT的区别以及xgboost和GBDT的区别 以下内容转自 https://blog.csdn.net/chengfulukou/article/details/76906710 ...
- 爬虫:Scrapy6 - Item Loaders
Item Loaders 提供了一种便捷的方式填充抓取到的:Items.虽然 Items 可以使用自带的类字典形式的 API 填充,但是 Item Loaders 提供了更便捷的 API,可以分析原始 ...
- POJ 3683 Priest John's Busiest Day(2-SAT+方案输出)
Priest John's Busiest Day Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 10010 Accep ...
- [HDU3480] Division [四边形不等式dp]
题面: 传送门 思路: 因为集合可以无序选择,所以我们先把输入数据排个序 然后发先可以动归一波 设$dp\left[i\right]\left[j\right]$表示前j个数中分了i个集合,$w\le ...
- 【bzoj3585】mex 线段树 mex,sg
Description 有一个长度为n的数组{a1,a2,…,an}.m次询问,每次询问一个区间内最小没有出现过的自然数. Input 第一行n,m. 第二行为n个数. 从第三行开始,每行一个询问l, ...
- Treblecross(uva 10561)
题意:一个 1 × n 的棋盘,有 X 和 :,当棋盘上出现三个连续的X 时游戏结束,两人轮流操作,每次能把一个 : 变成 X,问先手必胜方案数以及先手可以放的位置. /* 对于先手,当有一个'X'时 ...
- Codevs 1993 草地排水
1993 草地排水 时间限制: 2 s 空间限制: 256000 KB 题目等级 : 钻石 Diamond 题目描述 Description 在农夫约翰的农场上,每逢下雨,Bessie最喜欢的三叶草地 ...
- set与map的区别
STL中:MAP的节点是一对数据. SET的节点是一个数据. Map使用关键值Key来唯一标识每一个成员 map可以重复.set是集合 都属于关联容器 只不过, map的形式 map& ...
- *UOJ#223. 【NOI2016】国王饮水记
$n \leq 8000$的数列,问不超过$m \leq 1e9$次操作后第一个数字最大是多少.操作:选一些数,把他们变成他们的平均值.需要保留$p \leq 3000$位小数,提供了一个小数高精度库 ...