向现有项目增加bootstrap的步骤

访问量: 887

有一个项目,前台有专门的美工。本着网站后台是内部人员使用, “将就能用就行”的原则(呵呵,不是我说的,是软件教主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

 

订阅/RSS Feed

Subscribe

分类/category