在开发后台的过程中，前后端需要频繁的通信，后台页面使用BUI模板，后端使用Java开发。
BUI表单使用
BUI提供了4种表单布局，这四种表单布局，我觉得都可以使用 水平表单来替代。DIV本身就是一个块，DIV就是垂直布局的。
水平表单的用法
1、页面中中引入CSS样式(如果需要动态效果，后期可引入JS文件)
在页面head标签中引入，也可以下载到本地引入，下载到本地的好处是可以自己查看css文件中的内容
<link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet"> <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
2、根据需要编写表单
所有的表单元素肯定都是要在<form>标签里面的，form标签的一些基本用法如下
<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。
// action属性，代表传递表单数据的后台地址， // method属性，说明当前表单以什么方法向后台传输数据，GET，POST，DELETE，PUT，HEAD等。 // 最常用的是`GET`和`POST`<form action="/api/form_action.asp" method="get"> <p>First name: <input type="text" name="fname" /></p> <p>Last name: <input type="text" name="lname" /></p> <input type="submit" value="Submit" /></form>
3、填充表单元素
根据BUI框架，我们可以编写适合自己的表单布局。
<form class="well form-horizontal" action="/add" method="post" > // class为row的div元素，说明这个div里面的所有元素如果不超过页面宽度的情况下，在同一行。//最大宽度为span24，span8基本约为页面的1/3。这里我们用了两个span8，可以猜测页面有两个在同一水平线的div。//其余的class照抄，先不用管太多// input必须要指定name属性，以便向后台传递数据，// id属性我觉得加上会更好，input的class也抄上。 <div class="row"> <div class="control-group span8"> <label class="control-label">上架时间：</label> <div class="controls"> <input type="datetime" class="calendar calendar-time" name="startTime" id="start_time" /> </div> </div> <div class="control-group span8"> <label class="control-label">下架时间：</label> <div class="controls"> <input type="datetime" class="calendar calendar-time" name="endTime" id="end_time" /> </div> </div> </div></form>
上面的表单效果图，可以看到在同一行，等宽。
效果图
再看一个案例
// 这里我们更改了input的class值，class的值一般为control-text会好一些。 <div class="row"> <div class="control-group span8"> <label class="control-label">存量：<s>*</s></label> <div class="controls"> <input type="text" class="control-text" name="stock" id="stock" /> </div> </div> <div class="control-group span8"> <label class="control-label">销量：<s>*</s></label> <div class="controls"> <input type="text" class="control-text" name="sold" id="sold" /> </div> </div> </div>
效果图
效果图
想要让表单变宽，在div上span的数值大一点，input元素的值大一些。
每一个row类的div就是一行。
加上提交和重置按钮
最后在表单里面加上提交按钮
<div class="row"> <div class="form-actions offset3"> <button type="submit" class="button button-primary">提交</button> <button type="reset" class="button">重置</button> </div> </div>
总结
其余一些细节性问题，可以调整参考官方文档。
总结步骤如下：
1、引入样式表，有需要的话引入一些js库，做好html基本页面
2、在页面里面写表单，加上表单样式
3、根据需要填充表单元素
4、最后加上提交按钮
如果需要使用ajax请参考jQuery的ajax。
随时随地看视频
