Tag: Rails/Bootstrap4

目次

関連ページ

参考情報

Bootstrap4を導入(Rails 5.2編)

参考情報

Gemfileの編集

  • Gemfileに以下を追加。
    gem 'bootstrap', '~> 4.1.1'
    gem 'jquery-rails'
    
  • sprockets-railsがv2.3.2以降であることを確認(Rails 5.2だとデフォルト対応済みか?)
    bundle show |fgrep sprockets-rails

application.scssの作成

  • application.scssを作成する。
    @import "bootstrap";

application.html.erb

  • これは特に変更なし?
    <!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の対応

Tips

Bootstrap3ぽくする設定

  • application.scssを編集。プライマリーの色とベースのフォントサイズを16pxから14pxに。
    $primary: #337ab7;
    @import "bootstrap";
    html {
      font-size: 14px; /* ルート要素のフォントサイズを1rem=14pxと定義する */
    }
    

トラブルシューティング

Uncaught Error: Bootstrap dropdown require Popper.js


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2020-05-26 (火) 15:16:58