有一个项目，前台有专门的美工。本着网站后台是内部人员使用， “将就能用就行”的原则（呵呵，不是我说的，是软件教主JOEY说的），我打算在管理界面上使用bootstrap. 起码是现成的，而且里面有很多优秀的元素。
?
考察了几个 gem,? ( rails-bootstrap啥的）， 感觉对里面的东西理解的不到位。另外哥赶时间，不如自己动手，丰衣足食啊。 就那么几个CSS/JS文件。。。所以。。。
?
步骤记录如下：
?
1. 下载，然后解压缩。可以看到有这么几个文件夹：? docs,? img, js, less....? 其中重要的东西都在docs里。
?
2. 在你的浏览器中（例如FIREFOX）打开? docs/examples/starter-template.html， 可以通过FIREBUG查看里面的结构。
?
3. 把它的源代码复制到你的 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的后台管理界面</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>
?
这样就定义了 对应的JS， 和CSS。 而他们对应的文件（我用的RAILS 3.2），在app/assets/ 下面.?
p.s. 记得 13行的JS 声明还是暂时放在 <head>中比较好，如果放在最下面， 有些jquery(document).ready()会在执行时发生错误。
?
5.? 实现对应的 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个文件的顺序很重要，同时确保你把?? 对应的js 文件都从 docs/assets/js? 复制到了 本地的 app/assets/javascripts/bootstrap中。?
?
6. 实现对应的 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 }
?
这里两个bootstrap文件都要包含（话说我还没弄清楚它俩的区别的用法，时间太赶了。。。） ， 同时， 修改bootstrap.css.erb， 把里面出现的两处 图片，替换成 asset_path ，同时也要把图片复制过去。:?
?
1398?? background-image: url("<%= asset_path "glyphicons-halflings.png" %>");
......
1407 .icon-white {
1408?? background-image: url("<%= asset_path "glyphicons-halflings-white.png" %>");
?
?
7. 最后， 修改布局文件： 向里面加入对应的 <%= 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. 修改对应的action ， 使用?? render :layout => "admin_layout"
?
9. 在 config/environments/production.rb ，修改 需要在生产环境下预编译的东东：
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
?