Rails4.2にbootstrap3を適用

いつもどうやるか調べるのでまとめた。今回はbootstrapファイルを公式からダウンロードしてきて、開発環境に配置し適用する手順。bootstrapのサンプルである「starter-template」を適用することをゴールとした。
手順はほとんど参考ページのままだが、一部スタイルシートの記述とかを加えた。

1.コントローラ、ビューの作成

rails g コマンドで作成。

$ rails g controller Users

2.bootstrapファイルの配置

公式ページからダウンロードしてきたファイルを下記のフォルダに配置する。

  • fonts
    • vender/assets/
  • css
    • vender/assets/stylesheet/
  • js
    • vender/assets/javascript/

cssファイルの読み込み/編集

「app/assets/stylesheets/application.css」にbootstrapファイルを読み込むよう以下の項目を追記。また「starter-template」のスタイル設定も合わせて記述する。

/*
*= require bootstrap
*/

body {
  padding-top: 50px;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}  

JSファイルの読み込み

「app/assets/javascripts/application.js」にbootstrapファイルを読み込むよう以下の項目を追記。

//= require bootstrap

fontsファイルの読み込み

「config/application.rb」 の「class Application < Rails::Application」の中に以下を追加し、fontsフォルダを読み込むよう追記

config.assets.paths << "#{Rails}/vender/assets/fonts"

プリコンパイル

設定が完了したら、下記のコマンドを実行。

$ rake assets:precompile Rails_ENV=development

3.ビューファイルの編集

application.html.erbの編集

app/views/layouts/application.html.erbにページの共通部分を記述。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <meta name="description" content="">
  <meta name="author" content="">

  <title>UserApp</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </nav>

  <div class="container">
    <%= yield %>
  </div><!-- /.container -->

</body>
</html>

4.個別ページの編集

一時的に作成した「test.html.erb」に対して、個別の内容(ページタイトル)を記述。

<div class="starter-template">
  <h1>Bootstrap starter template</h1>
  <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>

5.ページ確認

以上で作業が完了。

参考

Ruby on RailsにてBootstrap3のサンプルページを作成する | Developers.IO

アセットパイプライン | Rails ガイド

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

12 − five =

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください