向现有项目增加bootstrap的步骤

sg552

浏览: 619679 次
性别:
来自: 北京

最近访客更多访客>>

itskyblue

ConleyKong

全站最屌

fanan_666

博主相关

博客

微博

相册

留言

关于我

博客专栏

: 白手起家学习使用Flex
浏览量：18693

文章分类

社区版块

存档分类

bootstrap 步骤

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

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

0
顶

0
踩

分享到：

2012-03-23 14:57
浏览 9525
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论