<!DOCTYPE html>
<!-- saved from url=(0048)http://www.bootcss.com/p/bootstrap-form-builder/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Bootstrap表单构造器</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="基于Bootstrap的web表单构造器，通过拖拽组件的方式生成完整可用的表单">
<meta name="keywords" content="Bootstrap,Form,表单,拖拽">
<meta name="author" content="Bootstrap中文网">
<link href="Bootstrap表单构造器_files/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
padding-bottom: 10px;
}
#components{
min-height: 600px;
}
#target{
min-height: 200px;
border: 1px solid #ccc;
padding: 5px;
}
#target .component{
border: 1px solid #fff;
}
#temp{
width: 500px;
background: white;
border: 1px dotted #ccc;
border-radius: 10px;
}
.popover-content form {
margin: 0 auto;
width: 213px;
}
.popover-content form .btn{
margin-right: 10px
}
#source{
min-height: 500px;
}
</style>
<link href="http://cdnjs.bootcss.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap-responsive.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="http://www.bootcss.com/p/bootstrap-form-builder/images/favicon.ico">
<link rel="apple-touch-icon" href="http://www.bootcss.com/p/bootstrap-form-builder/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://www.bootcss.com/p/bootstrap-form-builder/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="http://www.bootcss.com/p/bootstrap-form-builder/images/apple-touch-icon-114x114.png">
<style type="text/css"></style></head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="./Bootstrap表单构造器_files/Bootstrap表单构造器.htm">Bootstrap 表单构造器</a>
</div>
</div>
</div>
<div class="container">
<div class="row clearfix">
<div class="span6">
<div class="clearfix">
<h2>Your Form</h2>
<hr>
<div id="build">
<form id="target" class="form-horizontal">
<fieldset>
<div id="legend" class="component" rel="popover" trigger="manual" data-content="
<form class='form'>
<div class='controls'>
<label class='control-label'>Title</label> <input class='input-large' type='text' name='title' id='text'>
<hr/>
<button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
</div>
</form>" data-original-title="Form Title">
<legend class="valtype" data-valtype="text">表单名</legend>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="span6">
<h2>拖拽下面的组件到左侧</h2>
<hr>
<div class="tabbable">
<ul class="nav nav-tabs" id="navtab">
<li class="active"><a href="http://www.bootcss.com/p/bootstrap-form-builder/#1" data-toggle="tab">输入框</a></li>
<li class=""><a href="http://www.bootcss.com/p/bootstrap-form-builder/#2" data-toggle="tab">Select</a></li>
<li class=""><a href="http://www.bootcss.com/p/bootstrap-form-builder/#3" data-toggle="tab">Checkbox / Radio</a></li>
<li class=""><a href="http://www.bootcss.com/p/bootstrap-form-builder/#4" data-toggle="tab">文件 / 按钮</a></li>
<li class=""><a id="sourcetab" href="http://www.bootcss.com/p/bootstrap-form-builder/#5" data-toggle="tab">生成代码</a></li>
</ul>
<form class="form-horizontal" id="components">
<fieldset>
<div class="tab-content">
<div class="tab-pane active" id="1">
<div class="control-group component" data-type="text" rel="popover" title="Text Input" trigger="manual" data-content="
<form class='form'>
<div class='controls'>
<label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
<label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'>
<label class='control-label'>Help Text</label> <input type='text' name='help' id='help'>
<hr/>
<button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
</div>
</form>">
<!-- Text input-->
<label class="control-label valtype" for="input01" data-valtype="label">Text input</label>
<div class="controls">
<input type="text" placeholder="placeholder" class="input-xlarge valtype" data-valtype="placeholder">
<p class="help-block valtype" data-valtype="help">Supporting help text</p>
</div>
</div>
<div class="control-group component" data-type="search" rel="popover" title="Search Input" trigger="manual" data-content="
<form class='form'>
<div class='controls'>
<label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
<label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'>
<label class='control-label'>Help Text</label> <input type='text' name='help' id='help'>
<hr/>
<button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
</div>
</form>">
<!-- Search input-->
<label class="control-label valtype" data-valtype="label">Search input</label>
<div class="controls">
<input type="text" placeholder="placeholder" class="input-xlarge search-query valtype" data-valtype="placeholder">
<p class="help-block valtype" data-valtype="help">Supporting help text</p>
</div>
JS+HTML版表单构造器(Fom Builder)适合Web系统使用
4星 · 超过85%的资源 需积分: 18 70 浏览量
2013-06-21
14:39:58
上传
评论 3
收藏 81KB ZIP 举报 
JS+HTML版表单构造器(Fom Builder)适合Web系统使用.zip （9个子文件） 
Bootstrap表单构造器.htm 31KB
Bootstrap表单构造器_files bootstrap.min.css 81KB h.js 0B fb.js 10KB bootstrap-responsive.min.css 10KB
return-back.png 21KB bootstrap.min.js 22KB projects.js 701B jquery.min.js 90KB
- 1
- 2
- 3
- 4
前往页