脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 智能表单 bootstrap 类型简介

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

 更新时间：2016年06月13日 11:38:57   作者：程序有Bug  
这篇文章主要介绍了BootStrap 智能表单实战系列(二)BootStrap支持的类型简介 的相关资料，非常不错具有参考借鉴价值，感兴趣的朋友一起学习吧

什么是 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支持的类型简介的全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 脚本分析、压缩、混淆工具 JSA新版本发布，压缩效率提高大约10％

    脚本分析、压缩、混淆工具 JSA新版本发布，压缩效率提高大约10％

    脚本分析、压缩、混淆工具 JSA新版本发布，压缩效率提高大约10％...
    2007-05-05
  • JavaScript中Webpack的使用教程

    JavaScript中Webpack的使用教程

    Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源，这篇文章主要介绍了JavaScript中Webpack的使用,需要的朋友可以参考下
    2021-10-10
  • 微信小程序之video组件视频播放

    微信小程序之video组件视频播放

    video控件是微信小程序提供的系统组件之一,用于实现播放视频的功能,这篇文章主要给大家介绍了关于微信小程序之video组件视频播放的相关资料,需要的朋友可以参考下
    2022-04-04
  • javascript中UMD规范的代码推演

    javascript中UMD规范的代码推演

    这篇文章给大家分享了javascript中UMD规范的代码推演的相关的知识点内容，有兴趣的朋友们学习下。
    2018-08-08
  • JS题解leetcode去掉最低工资和最高工资后的工资平均值

    JS题解leetcode去掉最低工资和最高工资后的工资平均值

    这篇文章主要为大家介绍了JS题解leetcode去掉最低工资和最高工资后的工资平均值，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • webpack源码之loader机制详解

    webpack源码之loader机制详解

    本篇文章主要介绍了webpack源码之loader机制详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • JavaScript继承定义与用法实践分析

    JavaScript继承定义与用法实践分析

    这篇文章主要介绍了JavaScript继承定义与用法,结合实例形式分析了JavaScript面向对象程序设计中基类的定义、原型继承以及调用父类构造函数等相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • 详解javascript 正则表达式之分组与前瞻匹配

    详解javascript 正则表达式之分组与前瞻匹配

    本文主要讲解javascript 的正则表达式中的分组匹配与前瞻匹配的，需要对正则的有基本认识，本人一直对两种匹配模棱不清，还有不清楚的朋友跟随脚本之家小编一起看看吧
    2018-05-05
  • js中settimeout方法加参数的使用实例

    js中settimeout方法加参数的使用实例

    这篇文章主要介绍了js中settimeout方法加参数的使用,需要的朋友可以参考下
    2014-02-02
  • JavaScript 如何计算文本的行数的实现

    JavaScript 如何计算文本的行数的实现

    这篇文章主要介绍了JavaScript 如何计算文本的行数的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09

最新评论