附上項目DEMO地址：點我跳轉

下載地址：點我跳轉

先了解一下什么是B-JUI框架：

B-JUI（Bootstrap for DWZ）富客戶端框架，基于DWZ-jUI富客戶端框架修改。

主要針對皮膚，編輯器，表單驗證等方面進行了大量修改。（DWZ是什么，點我）

項目的使用：

項目使用時需要將項目文檔中的BJUI文件夾拖入VS中，并把Index.html頁中內容復制項目首頁中（需要注意的是css與js文件的引入需要注意路徑問題，還有個別文件需要在BJUI文件外引入）

先了解一下BJUI的頁面結構

B-JUI僅有一個主頁面(document)，框架內的所有子頁面將通過Ajax獲取后作為一個頁面片段附加到主頁面上，外部頁面則通過iframe嵌入主頁面。

主頁面結構：(僅body部分）

注意：使用時需要完整的HTML結構，用于首頁只需要加載一次（刷新另算）在index.html文件中可以看到完整的結構

主頁面由上（頁頭）、中左（導航菜單）、中右（工作區）、下（頁腳）四部分組成，其中左側導航菜單可收縮。結構如下：

子頁面（即頁面片段[后面簡稱：頁片]）標準結構）

注意：使用時不需要完整的HTML結構，只需要以下結構即可

頁片通常由三部分組成，也可以只保留bjui-pageContent部分，或者自定義內容。一個標準的頁片結構如下：

注意：在標準結構中，bjui-pageHeader和bjui-pageFooter部分是固定在頁片中的，bjui-pageContent部分的內容溢出會出現滾動條。

表單元素：

1，按鈕篇

具有的屬性：官方文檔很詳細

唯一需要注意的是：

A鏈接按鈕：A鏈接的按鈕需要添加Class[btn]，方可轉換成按鈕形態，JS會為Button按鈕自動添加Class[btn]。

圖標說明：所用圖標來自Font Awesome，使用時僅需將fa-后面的部分放入data-icon中即可。

樣例	Class	屬性
普通按鈕	btn-default
綠色按鈕	btn-green
藍色按鈕	btn-blue
紅色按鈕	btn-red
橙色按鈕	btn-orange
圖標按鈕	btn-default	data-icon="home"意即按鈕顯示上添加圖片
小尺寸按鈕	btn-default btn-sm
較大尺寸按鈕	btn-default btn-nm
超大尺寸按鈕	btn-default btn-lg

2，文本框篇

具有的屬性：官方文檔很詳細

3，下拉文本框

具有的屬性：官方文檔很詳細并且官方提供了更多的選擇單擊查看

4，單選復選框

具有的屬性：官方文檔很詳細并且官方提供了更多的選擇單擊查看

需要注意的是：

復選、單選框的Label：直接添加[data-label]屬性，可自動添加上Label

5，表格元素

總結

以上是生活随笔為你收集整理的B-JUI使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。