Rails/Bootstrap の履歴(No.13)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• Rails/Bootstrap へ行く。
  • 1 (2015-05-04 (月) 10:39:46)
  • 2 (2015-05-04 (月) 10:40:21)
  • 3 (2015-05-11 (月) 16:28:38)
  • 4 (2015-09-21 (月) 17:19:19)
  • 5 (2015-09-22 (火) 15:50:12)
  • 6 (2015-10-28 (水) 14:47:07)
  • 7 (2016-02-23 (火) 14:12:55)
  • 8 (2016-03-24 (木) 15:13:50)
  • 9 (2016-04-13 (水) 16:47:30)
  • 10 (2017-05-29 (月) 15:19:28)
  • 11 (2018-07-31 (火) 01:02:21)
  • 12 (2020-04-17 (金) 21:48:02)
  • 13 (2020-04-21 (火) 01:03:54)
  • 14 (2020-05-02 (土) 22:12:09)

---

&tag(Rails/Bootstrap);

目次†[edit]

関連ページ†[edit]

• Rails
• ./古い情報

参考情報†[edit]

• twbs/bootstrap-sass: Official Sass port of Bootstrap 2 and 3.…公式サイト
• Gemfile
• Rails
• Bootstrap3
• Rails/検証

bootstrapを使って導入(Rails 5.2編)†[edit]

参考情報†[edit]

• twbs/bootstrap-rubygem: Bootstrap 4 rubygem for Rails / Sprockets / Hanami / etc…公式サイト
• Railsアプリで Bootstrap 4 を利用する - Qiita

Gemfileの編集†[edit]

• Gemfileに以下を追加。

  gem 'bootstrap', '~> 4.1.1'
  gem 'jquery-rails'
  

• sprockets-railsがv2.3.2以降であることを確認(Rails 5.2だとデフォルト対応済みか?)

  bundle show |fgrep sprockets-rails

application.scssの作成†[edit]

• application.scssを作成する。

  @import "bootstrap";

application.html.erb†[edit]

• これは特に変更なし？

  <!DOCTYPE html>
  <html>
    <head>
      <title>Rails5Bootstrap4Demo</title>
      <%= csrf_meta_tags %>
      <%= csp_meta_tag %>
  
      <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
      <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    </head>
  
    <body>
      <div class="container">
        <%= yield %>
      </div>
    </body>
  </html>
  
  

bootstrap-sassを使って導入(Rails 5.1編)†[edit]

Gemfileの編集†[edit]

• Gemfileに以下を追加

  gem 'bootstrap-sass', '~> 3.3.6'
  gem 'font-awesome-sass'
  gem 'jquery-rails'
  

bunlde installを実行†[edit]

• 以下のコマンドを実行する

  bundle install --path vendor/bundle
  

application.css.scss作成など†[edit]

• application.cssをapplication.css.scssリネーム。内容は以下で作成。

  @import "bootstrap-sprockets";
  @import "bootstrap";
  @import "font-awesome-sprockets";
  @import "font-awesome";
  

• app/assets/javascripts/application.jsの編集

  //= require jquery
  //= require bootstrap-sprockets
  

動作確認†[edit]

• bookモデルのscaffoldを作成

  bundle exec rails g scaffold  book title:string author:string summary:text
  bundle exec rake db:migrate

• ここで一旦 http://localhost:3000/books にアクセスして確認。
• app/views/layouts/application.html.erbを編集。ナビゲーションの追加とyieldの囲みが必要。

  <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
          <div class="navbar-header">
              <a class="navbar-brand" href="/"><i class="fa fa-home"></i>Home</a>
          </div>
          <div class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                  <li><a href="http://www.google.com/" target="_blank">Google</a></li>
                  <li><a href="http://www.yahoo.co.jp/" target="_blank">Yahoo! Japan</a></li>
              </ul>
              <ul class="nav navbar-nav navbar-left">
                  <div class="form-group">
                      <%= form_tag('/books', method: 'get', class: 'navbar-form navbar-right') do %>
                          <%= text_field_tag(:q, params[:q], class: 'form-control', style: 'width: 200px;', placeholder: 'Search') %>
                      <% end %>
                  </div>
              </ul>
          </div>
      </div><!-- /.container-fluid -->
  </nav>
  
  <div class="container">
      <!-- flash messages -->
      <%= yield %>
      <hr>
      <footer>
          <p>&#169; src256</p>
      </footer>
  </div>
  

• もう一回 http://localhost:3000/books にアクセス。

トラブルシューティング†[edit]

Autoprefixer doesn’t support Node v0.10.48. Update it.†[edit]

• CentOS 6のホストにdeployすると発生。Nodejsが古すぎるのが原因。
• CentOS 6.xにnode.js(v8系)をインストールする - masalibの日記を参考にアップデートする

  sudo rpm -Uvh https://rpm.nodesource.com/pub_9.x/el/6/x86_64/nodejs-9.5.0-1nodesource.x86_64.rpm

twitter-bootstrap-railsから移行するとナビゲーションが表示されない†[edit]

• twitter-bootstrap-railsがBootstrap2ベースのせいかもしれない。
• Bootstrap2とBootstrap3ではナビゲーションの記述方法やグリッドなど全くことなっているので書き直しが必要。

padding-top: 60pxはどうなる？†[edit]

• bodyのpadding-top: 60pxはnavbar-fixed-topを利用する場合に必要。fixed-topじゃないナビゲーションバーを使うならば不要。
• navbar-fixed-topは画面の上につねにナビゲーションバーが表示され続ける。

kaminariのページングの表示が乱れる†[edit]

• 以下のコマンドを実行する

  bundle exec rails g kaminari:views bootstrap3