有一個(gè)項(xiàng)目，前臺(tái)有專門的美工。本著網(wǎng)站后臺(tái)是內(nèi)部人員使用， “將就能用就行”的原則（呵呵，不是我說的，是軟件教主JOEY說的），我打算在管理界面上使用bootstrap. 起碼是現(xiàn)成的，而且里面有很多優(yōu)秀的元素。
考察了幾個(gè) gem, ( rails-bootstrap啥的）， 感覺對(duì)里面的東西理解的不到位。另外哥趕時(shí)間，不如自己動(dòng)手，豐衣足食啊。 就那么幾個(gè)CSS/JS文件。。。所以。。。
步驟記錄如下：
1. 下載，然后解壓縮?？梢钥吹接羞@么幾個(gè)文件夾： docs, img, js, less.... 其中重要的東西都在docs里。
2. 在你的瀏覽器中（例如FIREFOX）打開 docs/examples/starter-template.html， 可以通過FIREBUG查看里面的結(jié)構(gòu)。
3. 把它的源代碼復(fù)制到你的 rails 布局 ( 例如 app/views/layouts/admin_layout.html.erb) 文件中。
4. 把該替換的替換，例如在header中：
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>你好~xx的后臺(tái)管理界面</title>
6 <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
7 <!--[if lt IE 9]>
9 <%= javascript_include_tag "google_html5.js" %>
10 <![endif]-->
11
12 <%= stylesheet_link_tag "admin_layout", :media => "all" %>
13 <%= javascript_include_tag "admin_layout" %>
14 <%= csrf_meta_tags %>
15 </head>
這樣就定義了 對(duì)應(yīng)的JS， 和CSS。 而他們對(duì)應(yīng)的文件（我用的RAILS 3.2），在app/assets/ 下面.
p.s. 記得 13行的JS 聲明還是暫時(shí)放在 <head>中比較好，如果放在最下面， 有些jquery(document).ready()會(huì)在執(zhí)行時(shí)發(fā)生錯(cuò)誤。
5. 實(shí)現(xiàn)對(duì)應(yīng)的 admin_layout.js.erb:
1 //
2 //= require jquery
3 //= require jquery_ujs
4 //= require jquery-ui-1.8.18.custom.min.js
5 //= require bootstrap/bootstrap-transition
6 //= require bootstrap/bootstrap-alert
7 //= require bootstrap/bootstrap-modal
8 //= require bootstrap/bootstrap-dropdown
9 //= require bootstrap/bootstrap-scrollspy
10 //= require bootstrap/bootstrap-tab
11 //= require bootstrap/bootstrap-tooltip
12 //= require bootstrap/bootstrap-popover
13 //= require bootstrap/bootstrap-button
14 //= require bootstrap/bootstrap-collapse
15 //= require bootstrap/bootstrap-carousel
16 //= require bootstrap/bootstrap-typeahead
17 //= require my_utilities
記得這16個(gè)文件的順序很重要，同時(shí)確保你把 對(duì)應(yīng)的js 文件都從 docs/assets/js 復(fù)制到了 本地的 app/assets/javascripts/bootstrap中。
6. 實(shí)現(xiàn)對(duì)應(yīng)的 admin_layout.css.erb
1 /*
2 *= require jquery-ui-1.8.18.custom
3 *= require bootstrap
4 *= require bootstrap-responsive
5 */
6
7 body {
8 padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
9 }
這里兩個(gè)bootstrap文件都要包含（話說我還沒弄清楚它倆的區(qū)別的用法，時(shí)間太趕了。。。） ， 同時(shí)， 修改bootstrap.css.erb， 把里面出現(xiàn)的兩處 圖片，替換成 asset_path ，同時(shí)也要把圖片復(fù)制過去。:
1398 background-image: url("<%= asset_path "glyphicons-halflings.png" %>");
......
1407 .icon-white {
1408 background-image: url("<%= asset_path "glyphicons-halflings-white.png" %>");
7. 最后， 修改布局文件： 向里面加入對(duì)應(yīng)的 <%= yield %> 就歐了。
36 <div class="container">
37 <div class="content">
38 <div class="row">
39 <div class="span9">
40 <%= yield %>
41 </div>
42 <div class="span3">
43 <div class="well sidebar-nav">
44 <h3>Sidebar</h3>
45 <ul class="nav nav-list">
46 <li class="nav-header">Sidebar</li>
47 <li><%= link_to "Link1", "/path1" %></li>
48 <li><%= link_to "Link2", "/path2" %></li>
49 <li><%= link_to "Link3", "/path3" %></li>
50 </ul>
51 </div><!--/.well -->
52 </div><!--/span-->
53 </div><!--/row-->
54 </div><!--/content-->
8. 修改對(duì)應(yīng)的action ， 使用 render :layout => "admin_layout"
9. 在 config/environments/production.rb ，修改 需要在生產(chǎn)環(huán)境下預(yù)編譯的東東：
49 config.assets.precompile += %w( admin_layout.css, admin_layout.js.erb )
10. 最后的最后， 看一眼提交的代碼：
gisg552@sg552:/sg552/workspace/bubu$ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# new file: app/assets/images/glyphicons-halflings-white.png
# new file: app/assets/images/glyphicons-halflings.png
# new file: app/assets/javascripts/admin_layout.js.erb
# new file: app/assets/javascripts/bootstrap/bootstrap-alert.js
# new file: app/assets/javascripts/bootstrap/bootstrap-button.js
# new file: app/assets/javascripts/bootstrap/bootstrap-carousel.js
# new file: app/assets/javascripts/bootstrap/bootstrap-collapse.js
# new file: app/assets/javascripts/bootstrap/bootstrap-dropdown.js
# new file: app/assets/javascripts/bootstrap/bootstrap-modal.js
# new file: app/assets/javascripts/bootstrap/bootstrap-popover.js
# new file: app/assets/javascripts/bootstrap/bootstrap-scrollspy.js
# new file: app/assets/javascripts/bootstrap/bootstrap-tab.js
# new file: app/assets/javascripts/bootstrap/bootstrap-tooltip.js
# new file: app/assets/javascripts/bootstrap/bootstrap-transition.js
# new file: app/assets/javascripts/bootstrap/bootstrap-typeahead.js
# new file: app/assets/javascripts/google_html5.js
# new file: app/assets/stylesheets/admin_layout.css
# new file: app/assets/stylesheets/bootstrap-responsive.css
# new file: app/assets/stylesheets/bootstrap.css.erb
# modified: app/controllers/categories_controller.rb
# new file: app/views/layouts/admin_layout.html.erb
# modified: config/environments/production.rb
