在開發(fā)后臺的過程中，前后端需要頻繁的通信，后臺頁面使用BUI模板，后端使用Java開發(fā)。
BUI表單使用
BUI提供了4種表單布局，這四種表單布局，我覺得都可以使用 水平表單來替代。DIV本身就是一個塊，DIV就是垂直布局的。
水平表單的用法
1、頁面中中引入CSS樣式(如果需要動態(tài)效果，后期可引入JS文件)
在頁面head標簽中引入，也可以下載到本地引入，下載到本地的好處是可以自己查看css文件中的內(nèi)容
<link rel="stylesheet">
<link rel="stylesheet">
2、根據(jù)需要編寫表單
所有的表單元素肯定都是要在<form>標簽里面的，form標簽的一些基本用法如下
<form> 標簽用于為用戶輸入創(chuàng)建 HTML 表單。
表單能夠包含 input 元素，比如文本字段、復(fù)選框、單選框、提交按鈕等等。
表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。
表單用于向服務(wù)器傳輸數(shù)據(jù)。
// action屬性，代表傳遞表單數(shù)據(jù)的后臺地址，
// method屬性，說明當前表單以什么方法向后臺傳輸數(shù)據(jù)，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、填充表單元素
根據(jù)BUI框架，我們可以編寫適合自己的表單布局。
<form class="well form-horizontal" action="/add" method="post" >
// class為row的div元素，說明這個div里面的所有元素如果不超過頁面寬度的情況下，在同一行。
//最大寬度為span24，span8基本約為頁面的1/3。這里我們用了兩個span8，可以猜測頁面有兩個在同一水平線的div。
//其余的class照抄，先不用管太多
// input必須要指定name屬性，以便向后臺傳遞數(shù)據(jù)，
// 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的數(shù)值大一點，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>
總結(jié)
其余一些細節(jié)性問題，可以調(diào)整參考官方文檔。
總結(jié)步驟如下：
1、引入樣式表，有需要的話引入一些js庫，做好html基本頁面
2、在頁面里面寫表單，加上表單樣式
3、根據(jù)需要填充表單元素
4、最后加上提交按鈕
如果需要使用ajax請參考jQuery的ajax。
