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 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
微信小程序实现可长按移动控件
Nov 01 Javascript
three.js如何实现3D动态文字效果
Mar 03 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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
php中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
php实现的漂亮分页方法
2014/04/17 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
理解Javascript_09_Function与Object
2010/10/16 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
Python批量修改文件后缀的方法
2014/01/26 Python
Python Trie树实现字典排序
2014/03/28 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
python连接字符串的方法小结
2015/07/13 Python
SVM基本概念及Python实现代码
2017/12/27 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
python nmap实现端口扫描器教程
2020/05/28 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
Django日志及中间件模块应用案例
2020/09/10 Python
python获取linux系统信息的三种方法
2020/10/14 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
毕业生个人的求职信范文
2013/12/03 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
医院党建工作总结2015
2015/05/26 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android