BootStrap智能表单实战系列(三)分块表单配置详解


Posted in Javascript onJune 13, 2016

什么是 Bootstrap?

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

历史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

Bootstrap 包的内容

基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。

CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。

组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。

JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。

定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

以上所述都是为下文做铺垫,下面给大家介绍分块表单配置的知识,具体如下所示:

相信朋友肯定碰到过一个编辑页面分了很多块的情况,智能表单插件已经为您支持了这种情况,

代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form2-group-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>
</div>
</div>
<script>
$(function () {
//注意,当配置为组表单时候配置项为json对象而非数组
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智能表单实战系列(三)分块表单配置详解

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

Javascript 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
Mac中安装nvm的教程分享
Dec 11 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
js实现简单的打印表格
Jan 15 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
js实现经典贪吃蛇小游戏
Mar 19 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 #Javascript
BootStrap智能表单demo示例详解
Jun 13 #Javascript
Bootstrap布局之栅格系统详解
Jun 13 #Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 #Javascript
jquery制做精致的倒计时特效
Jun 13 #Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 #Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 #Javascript
You might like
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
Python中实现结构相似的函数调用方法
2015/03/10 Python
python实现挑选出来100以内的质数
2015/03/24 Python
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
高三自我鉴定怎么写
2013/10/19 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS