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 相关文章推荐
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 Javascript
JQuery 绑定事件时传递参数的实现方法
Oct 13 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
jquery trim() 功能源代码
2011/02/14 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
Django入门使用示例
2017/12/12 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
优秀学生自我鉴定范例
2013/12/18 职场文书
我的动漫时代的创业计划书范文
2014/01/27 职场文书
党校培训自我鉴定
2014/02/01 职场文书
惊天动地观后感
2015/06/10 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android