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 相关文章推荐
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
纯javascript版日历控件
Nov 24 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
Vuex 模块化使用详解
Jul 31 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
joomla组件开发入门教程
2016/05/04 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
javascript基本类型详解
2014/11/28 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
Python实现修改IE注册表功能示例
2018/05/10 Python
Python用字典构建多级菜单功能
2019/07/11 Python
Python 实现自动导入缺失的库
2019/10/29 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
高中毕业自我鉴定范文
2013/10/02 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
小学生作文评语大全
2014/04/21 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
2014年教研室工作总结
2014/12/06 职场文书
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers
Mysql 一主多从的部署
2022/05/20 MySQL