TwitterBootStrapSample

Ruby On RailsにTwitter BootStrapを導入する手順メモ

手順に従って進めていくと写真のようになります。
Twitter BootStrapの公式はこちらです。

環境

Mac,Ruby,Rails,gemが揃っているとします。
環境構築はこちらの記事を参考にどうぞ↓
Ruby on Rails環境構築といろは Mac編

手順

ターミナル

$ rails new store
$ cd store
$ rails g scaffold product name price:decimal --skip-stylesheets
$ rake db:migrate

/Gemfile

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'

  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  # gem 'therubyracer'

  gem 'uglifier', '>= 1.0.3'
  gem "therubyracer"
  gem 'less-rails-bootstrap'
  gem 'twitter-bootstrap-rails'
end

ターミナル

$ rails g bootstrap:install

ここで一旦完了しました。起動して確認してみて下さい。

ターミナル

$ rails s

さて、デザインの修正です。

/app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Store</title>
  <!--[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" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<!-- ナビゲーションバー -->
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">Some Store</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li><%= link_to "Browse Products", products_path %></li>
                    <li><%= link_to "Price List" %></li>
                    <li><%= link_to "Contact Us" %></li>
                    <li><%= link_to "Cart" %></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- ナビゲーションバー -->    
<!-- メインコンテンツ -->   
<div class="container">
    <div class="row">
        <div class="span9"><%= yield %></div>
        <div class="span3">
            <h2>About Us</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        
        </div>
    </div>
</div>
<!-- メインコンテンツ -->        
</body>
</html>

続いて

/app/assets/stylesheets/bootstrap_and_overrides.css

@import "twitter/bootstrap/bootstrap";

body { padding-top: 60px; } 

@import "twitter/bootstrap/responsive";

// Set the correct sprite paths
@iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');
@iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png');

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/less.html for their names and documentation
//
// Example:
// @linkColor: #ff0000;

ここで最後のひと押し

ターミナル

$ rails g bootstrap:themed products -f
$ rails s

参考記事  http://railscasts.com/episodes……=asciicast

RailsエンジニアのためのTwitter Bootstrapカスタマイズ例 // Speaker Deck.

Railsコマンド
http://www.aise.ics.saitama-u…….mands.html

RailsのEclipse環境構築
http://asklife.info/archives/3589