Tag: Rails/Bootstrap4

目次

関連ページ

参考情報

Bootstrap4を導入(Rails 6編)

Bootstrap4とjQueryとFontawesomeを導入する。

参考情報

yarnでjQueryとBootstrapを実行

  • yarnで必要なファイルをインストール
    yarn add bootstrap jquery popper.js
    yarn add @fortawesome/fontawesome-free

jsをインクルード

  • app/javascript/packs/application.jsを編集。
    import '@fortawesome/fontawesome-free/js/all'
    require("@rails/ujs").start()
    //require("turbolinks").start()
    require("@rails/activestorage").start()
    require("channels")
    require("bootstrap") //Bootstrapを追加
    
    import jQuery from 'jquery'
    window.jQuery = window.$ = jQuery
    

cssをインクルード

  • app/assets/stylesheets/application.cssを編集。
    *= require bootstrap/dist/css/bootstrap.min.css
  • 先頭にインクルード。

scssをインクルード

  • app/assets/stylesheets/application.scssを編集。requireだと読み込まれない?
    @import "bootstrap/scss/bootstrap";
  • manifest.jsは以下のままで良いようだ。
    //= link_tree ../images
    //= link_directory ../stylesheets .css
    //= link_directory ../javascripts .js
    

すべてのpackでjQueryを使えるように。

※application.jsで「window.jQuery = window.$ = jQuery」した場合、以下は不要。むしろエラーになる。

  • config/webpack/environment.jsを編集。jQueryのパスは相対パス指定が必要?
    const { environment } = require('@rails/webpacker')
    
    //ここから
    const webpack = require('webpack')
    environment.plugins.prepend('Provide',
        new webpack.ProvidePlugin({
            $: 'jquery/src/jquery',
            jQuery: 'jquery/src/jquery'
        })
    )
    //ここまで
    
    module.exports = environment
    
    

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と定義する */
    }
    

モーダルを表示する。

  • 基本的に以下のコードでボタンを押した際にモーダルが表示されるはず。
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-remote="true">
      Launch demo modal
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    
  • ただしapplication.jsに最低限以下の設定が必要。
    //= require rails-ujs
    //= require jquery3
    //= require popper
    //= require bootstrap-sprockets
    

モーダルが表示されない場合: 2020/09/25(金)

  • 上記最低限のコードでボタンを押してもモーダルが表示されていない場合、application.jsの最後に「require bootstrap-sprockets」があるかどうかを確認。

「data-remote: true」でajaxを組み合わせたとき表示されない場合

  • 例えば以下のようなコードで呼び出す。
    <p>
      <%= link_to("モーダル", modal_link_books_path, {"data-toggle" => "modal", "data-target" => '#exampleModal', :remote => true}) %>
    </p>
    
  • この場合、application.jsで「require rails-ujs」を「require jquery_ujs」に変更すれば良い(turbolinksは関係ない模様)。
  • または「:remote => true」を削除する?remote不要?(要確認)。rails-ujs not working with remote: true Ajax request · Issue #33115 · rails/rails
    <p>
      <%= link_to("モーダル", modal_link_books_path, {"data-toggle" => "modal", "data-target" => '#exampleModal'}) %>
    </p>
    

トラブルシューティング

Uncaught Error: Bootstrap dropdown require Popper.js


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2021-04-26 (月) 13:29:31