目錄
一、 前言
yii-bootstrap擴展是已經將YII+Bootstrap完美結合，但今天我們討論的不是它，面是基於bootstrap風格的ace admin（具體介紹,大家上網搜索）；
先來張效果圖：
圖1 整體效果圖
二、為什么要使用YII+ace
ace是前端模板，所以后台用什么語言或框架並不重要。但打開ace源碼，您會發現很混亂，不知從哪里下手。本文將使用YII作為后台，結合Ace，為大家展示以搭積木的方式來構建自己的超酷后台。
三、新建YII模塊
a、 放置好ace的js、css文件，生成yii模塊；
圖2 模塊文件
b、 新建布局文件main.php，在此文件里引入UI的框架和固定的部分；main.php里固定上面的導航條和左邊的菜單；
c、 在controller里引用此布局
圖3 引用ace布局文件
d、 根據需要，在action里渲染具體的頁面部分
圖4 渲染視圖
上圖中，視圖registerd里就只寫表單部分，框架的其它部分已經在main.php里加載了；
圖4中三個屬性的說明見下圖：menuID指示了當前點擊的菜單
圖5 菜單配置與頁面上的有關系
四、如何修改模板
由於YII的布局文件存在的，所以開發者只需要寫需要的部分。比如要開發圖6這個頁面，步驟如下：
圖6 開發示例頁面
a、 寫action,並render到register頁面
b、 Register中的控件從ace模板文件中copy而來，復雜的控制和布局通過組合實現，這一點跟搭積木很像；具體copy方式如下：用chrome打開模板頁面，選擇所需的控件。如圖7所示：先copy父元素，再嵌套子元素；
圖7 chrom中copy代碼
提示：如果不采用此種方式，而是直接復制模板上的代碼，您會發現ace模板的代碼很混亂，不太容易組裝成自己的頁面。
五、注意的地方
a、 要理解bootstrap中，<div class=’row’></div>是新的一行。
b、 要理解柵格化，這在自己頁面控件的重新布局是需要的。比如：
<div class="col-sm-6"></div>表示占父元素水平空間的一半。
C、除了基本的控件使用外，還有圖標，提示等效果。
<i class="green icon-edit bigger-110"></i>：綠色的筆圖，bigger-110表示大小
<span class="badge badge-danger">4</span>：紅色（danger）圓圈中數字4
<div class="hr hr8 hr-double"></div>雙分割線
…………
六、整合的不足之處
a、 菜單傳遞的方式 menu_parent,menu_child,不方便。
b、 當第一次整體UI加載完后，后續的菜單點獲取的頁面應該使用ajax傳遞，應該在main的body里留好div，存放controller->render的頁面。