Rails/Bootstrap4 の履歴(No.8)

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

Tag: Rails/Bootstrap4

目次†

↑

参考情報†

↑

Bootstrap4を導入(Rails 6編)†

Bootstrap4とjQueryとFontawesomeを導入する。

↑

参考情報†

Rails6にjQueryとBootstrapを導入する手順 – knmts.com

↑

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の対応†

bootstrap4が適用されたkaminariのviewを作成したい - その辺にいるWebエンジニアの備忘録
```
bundle exec rails g kaminari:views bootstrap4
```

↑

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†

Rails 5 - Uncaught Error: Bootstrap dropdown require Popper.js - Stack Overflow

application.jsに以下を追加

//= require popper
//= require bootstrap-sprockets

ちなみにapplication.jsに指定するbootstrapとbootstrap-sprroketsの違い。ruby on rails - What's the difference between bootstrap and bootstrap-sprockets? - Stack Overflow。bootstrapはjsファイルをまとめたもの、bootstrap-sproketsは個別のファイルということらしい。

Rails/Bootstrap4 の履歴(No.8)

目次†

関連ページ†

参考情報†

Bootstrap4を導入(Rails 6編)†

参考情報†

yarnでjQueryとBootstrapを実行†

jsをインクルード†

cssをインクルード†

scssをインクルード†

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

Bootstrap4を導入(Rails 5.2編)†

参考情報†

Gemfileの編集†

application.scssの作成†

application.html.erb†

kaminariの対応†

Tips†

Bootstrap3ぽくする設定†

モーダルを表示する。†

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

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

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

Uncaught Error: Bootstrap dropdown require Popper.js†