BootStrap 智能表单实战系列(二)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/form1-basic.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>支持的表单元素包括:text、select、radio、checkbox、datetime、search、textarea、自定义</h3>
</div>
</div>
<script>
$(function () {
var eles=[
{ele:{type:'text',name:'UserName',title:'用户名:'}},
[
{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:'datetime',name:'FromeDate',title:'有效期:'}},
{ele:{type:'search',name:'selectName',title:'选择:'}},
{ele:{type:'textarea',name:'address',title:'地址:'}},
{ele:{pre:{text:'<input type="radio" />'},type:'text',name:'pre',title:'叉前面:'}},
{ele:{next:{text:'<input type="radio" />'},type:'text',name:'next',title:'叉后面:'}},
{ele:{pre:{text:'<input type="checkbox" />'},next:{text:'$'},type:'text',name:'pre&next',title:'前后皆叉:'}},
];
//隐藏表单元素主要用于编辑时候后台可以区别开来
var hides = [{ id: 'GUID' }];
var bsForm = new BSForm({ eles: eles, hides: hides, autoLayout:true }).Render('formContainer');
});
</script>
</body></html>

主要是下面的js那一块,通过该段js生成form表单

运行效果图:

BootStrap 智能表单实战系列(二)BootStrap支持的类型简介

得到如图所示的结果

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

Javascript 相关文章推荐
用JavaScript页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
DOM 高级编程
May 06 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 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
VUEJS实战之修复错误并且美化时间(2)
Jun 13 #Javascript
You might like
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
简单的Python抓taobao图片爬虫
2014/10/26 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
python同步windows和linux文件
2019/08/29 Python
python中调试或排错的五种方法示例
2019/09/12 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
python实现控制台输出颜色
2021/03/02 Python
Exception类的常用方法
2012/06/16 面试题
机械专业应届生求职信
2013/12/12 职场文书
求职毕业生自荐书
2014/02/08 职场文书
安全温馨提示语大全
2015/07/14 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书