Rails项目中，快速增加bootstrap的流程

来源：互联网发布：ubuntu升级驱动花屏编辑：程序博客网时间：2024/05/29 12:37

我使用的场景是 Rails 3.2.6

1, 增加Gem

  # Bootstrap  gem 'anjlab-bootstrap-rails', '>= 2.1', :require => 'bootstrap-rails'  gem 'bootstrap-will_paginate', '0.0.3'  gem 'bootstrap_helper', "2.0.0.1"

2, 增加 app_bootstrap.css.scss文件

$linkColor: red;$gridColumnWidth: 70px;$gridGutterWidth: 10px;@import "twitter/bootstrap";@import "twitter/bootstrap-responsive";

修改application.css
增加

*= require app_bootstrap

3，修改application.js代码

//= require twitter/bootstrap

4，修改application.html.erb文件

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title><%= content_for?(:title) ? yield(:title) : "RestPrev" %></title>    <%= csrf_meta_tags %>    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->    <!--[if lt IE 9]>      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>    <![endif]-->    <%= stylesheet_link_tag "application", :media => "all" %>    <link href="images/favicon.ico" rel="shortcut icon">    <link href="images/apple-touch-icon.png" rel="apple-touch-icon">    <link href="images/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72">    <link href="images/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114">  </head>  <body>    <div class="navbar navbar-fixed-top">      <div class="navbar-inner">        <div class="container">          <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">            <span class="icon-bar"></span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>          </a>          <a class="brand" href="#">RestPrev</a>          <div class="container nav-collapse">            <ul class="nav">              <li><%= link_to "Link1", "/path1"  %></li>              <li><%= link_to "Link2", "/path2"  %></li>              <li><%= link_to "Link3", "/path3"  %></li>            </ul>          </div><!--/.nav-collapse -->        </div>      </div>    </div>    <div class="container">      <div class="content">        <div class="row">           <div class="span9">              <%= yield %>            </div>            <div class="span3">              <div class="well sidebar-nav">                <h3>Sidebar</h3>                <ul class="nav nav-list">                  <li class="nav-header">Sidebar</li>                  <li><%= link_to "Link1", "/path1"  %></li>                  <li><%= link_to "Link2", "/path2"  %></li>                  <li><%= link_to "Link3", "/path3"  %></li>                </ul>              </div><!--/.well -->            </div><!--/span-->        </div><!--/row-->      </div><!--/content-->      <footer>        <p>© Company 2012</p>      </footer>    </div> <!-- /container -->    <!-- Javascripts    ================================================== -->    <!-- Placed at the end of the document so the pages load faster -->    <%= javascript_include_tag "application" %>  </body></html>