Rails/Bootstrap4 の履歴(No.2)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• Rails/Bootstrap4 へ行く。
  • 1 (2020-05-08 (金) 23:22:09)
  • 2 (2020-05-08 (金) 23:35:20)
  • 3 (2020-05-27 (水) 00:16:58)
  • 4 (2020-09-26 (土) 06:06:52)
  • 5 (2021-04-06 (火) 01:47:09)
  • 6 (2021-04-08 (木) 02:48:57)
  • 7 (2021-04-09 (金) 02:53:30)
  • 8 (2021-04-26 (月) 22:29:31)

&tag(Rails/Bootstrap4);

目次†[edit]

関連ページ†[edit]

• Rails
• ../Bootstrap3

参考情報†[edit]

Bootstrap4を導入(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>
  
  

kaminariの対応†[edit]

• bootstrap4が適用されたkaminariのviewを作成したい - その辺にいるWebエンジニアの備忘録

  bundle exec rails g kaminari:views bootstrap4

Tips†[edit]

Bootstrap3ぽくする設定†[edit]

• application.scssを編集。プライマリーの色とベースのフォントサイズを16pxから14pxに。

  $primary: #337ab7;
  @import "bootstrap";
  html {
    font-size: 14px; /* ルート要素のフォントサイズを1rem=14pxと定義する */
  }