BootStrap智能表单实战系列(四)表单布局介绍


Posted in Javascript onJune 13, 2016

什么是 Bootstrap?

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

表单的布局分为自动布局和自定义布局两种:

自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局

自动以布局就是根据autoLayout来决定使用的栅格,通过设置autoLayout:'1,2,1,2,2,4' 表示 第一、二列占3格,第三列占6格子

自动布局代码如下所示(https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form2-auto-layout.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动布局</title>
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../lib/jquery.js"></script>
<script src="../lib/bootstrap.js"></script>
<!--工具方法-->
<script src="../scripts/global.js"></script>
<!--插件-->
<script src="../scripts/plugin.js"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading"><label>自动布局</label></div>
<div class="panel-body">
<form action="#" id="formContainer" class="form form-horizontal"></form>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"><label>介绍</label></div>
<div class="panel-body">
<h3>所谓的自动布局为:根据单个配置组的个数来自动使用不同的栅格,如:数组里面项数位2,则使用2,4,2,4布局</h3>
<p>依赖于bootstrap个栅格样式,仅支持12整分的格式,如果你配置5项,是不支持的</p>
</div>
</div>
<script>
$(function () {
var eles=[
[
{ele:{type:'text',name:'UserName',title:'用户名:',required:true}},
{ele:{type:'radio',name:'sex',title:'性别:',items:[{text:'男',value:1},{text:'女',value:2}]}},
],
[
{ele:{type:'checkbox', name:'plant',title:'使用平台:',items:[{text:'APP',value:'app'},{text:'web',value:'web'}]}},
{ele:{type:'select',name:'province',title:'省份:',withNull:true,items:[{text:'广东',value:'GD'},{text:'湖南',value:'HN'}]}}
],
[
{ele:{type:'text',name:'DisplayName',title:'显示名称:'}},
{ele:{type:'datetime',name:'FromeDate',title:'有效期:'}},
{ele:{type:'datetime',name:'ToDate',title:'~'}}
]
];
//隐藏表单元素主要用于编辑时候后台可以区别开来
var hides = [{ id: 'GUID' }];
var bsForm = new BSForm({ eles: eles, hides: hides, autoLayout:true }).Render('formContainer');
});
</script>
</body>
</html>

运行效果图:

BootStrap智能表单实战系列(四)表单布局介绍

可以看到我配置文件中第一、2项配了2列,第三项配置了3列,所以生成的div.form-group 第一项和第二项使用:2,4 第三项使用:1,3 从界面来看ui显示好不友好,所以autoLayout:true一般用于特殊场景及每一项都是相等的情况下使用。

自定义布局代码(https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form2-fix-layout.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义布局</title>
<link rel="stylesheet" href="../css/bootstrap.css">
<!--自定义站点样式-->
<link rel="stylesheet" href="../css/site.css">
<script src="../lib/jquery.js"></script>
<script src="../lib/bootstrap.js"></script>
<!--工具方法-->
<script src="../scripts/global.js"></script>
<!--插件-->
<script src="../scripts/plugin.js"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading"><label>自定义布局</label></div>
<div class="panel-body">
<form action="#" id="formContainer" class="form form-horizontal"></form>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"><label>介绍</label></div>
<div class="panel-body">
<h3>固定布局,即根据配置的布局来布局</h3>
<p>如果你配置的autoLayout:1,2 将使用1,2栅格来显示</p>
<p>如果你配置的autoLayout:1,2,2,4 第一个元素将使用1,2来布局,第二个将使用2,4来布局 如果没有2,4系统将会自动寻找1,2</p>
</div>
</div>
<script>
$(function () {
var eles=[
[
{ele:{type:'text',name:'UserName',title:'用户名:',required:true}},
{ele:{type:'radio',name:'sex',title:'性别:',items:[{text:'男',value:1},{text:'女',value:2}]}},
{ele:{type:'checkbox', name:'plant',title:'使用平台:',items:[{text:'APP',value:'app'},{text:'web',value:'web'}]}},
{ele:{type:'select',name:'province',title:'省份:',withNull:true,items:[{text:'广东',value:'GD'},{text:'湖南',value:'HN'}]}} 
],
[
{ele:{type:'text',name:'DisplayName',title:'显示名称:'}},
{ele:{type:'datetime',name:'FromeDate',title:'有效期:'}},
{ele:{type:'datetime',name:'ToDate',title:'~'}}
]
];
//隐藏表单元素主要用于编辑时候后台可以区别开来
var hides = [{ id: 'GUID' }];
var bsForm = new BSForm({ eles: eles, hides: hides, autoLayout: '1,2,1,2' }).Render('formContainer');
});
</script>
</body></html>

效果图如下:

BootStrap智能表单实战系列(四)表单布局介绍

note:如果页面有4列,但是配置的autoLayout不足的情况后面的部分将会使用前面的布局,即将第一列作为缺省的配置列.

以上所述是小编给大家介绍的BootStrap智能表单实战系列(四)表单布局介绍的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
javascript 写类方式之七
Jul 05 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
javascript中scrollTop详解
Apr 13 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 #Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 #Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 #Javascript
BootStrap智能表单demo示例详解
Jun 13 #Javascript
Bootstrap布局之栅格系统详解
Jun 13 #Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 #Javascript
jquery制做精致的倒计时特效
Jun 13 #Javascript
You might like
解决GD中文乱码问题
2007/02/14 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用python实现扫描端口示例
2014/03/29 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
python实现飞机大战微信小游戏
2020/03/21 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
Hotels.com中国区:好订网
2016/08/18 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
简历自我评价怎么写好呢?
2014/01/04 职场文书
教师专业自荐书范文
2014/02/10 职场文书
工程技术员岗位职责
2014/03/02 职场文书
档案保密承诺书
2014/06/03 职场文书
机电系毕业生求职信
2014/07/11 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
安全生产月标语
2014/10/07 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
追悼会悼词大全
2015/06/23 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
深入理解python协程
2021/06/15 Python
MySQL8.0的WITH查询详情
2021/08/30 MySQL
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python