Rails/Bootstrap4 の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Rails/Bootstrap4 へ行く。
• Rails/Bootstrap4 の差分を削除

#author("2022-02-03T08:34:39+00:00","default:src128","src128")
#author("2022-02-03T08:35:18+00:00","default:src128","src128")
&tag(Rails/Bootstrap4);
*目次 [#x711acac]
#contents

*関連ページ [#q4790619]
-[[Rails]]
-[[../Bootstrap3]]
-[[./Rails6.1に導入]]
-[[./Rails6に導入]]
-[[./Rails5.2に導入]]

*参考情報 [#m9d4ce21]


*Tips [#y15b90ce]

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

**モーダルを表示する。 [#ud1c1b34]
-基本的に以下のコードでボタンを押した際にモーダルが表示されるはず。
#pre{{
<!-- 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に最低限以下の設定が必要。
#pre{{
//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap-sprockets
}}

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

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

***「data-remote: true」でajaxを組み合わせたとき表示されない場合 [#gdbfb718]
-例えば以下のようなコードで呼び出す。
#pre{{
<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:https://github.com/rails/rails/issues/33115]]
#pre{{
<p>
  <%= link_to("モーダル", modal_link_books_path, {"data-toggle" => "modal", "data-target" => '#exampleModal'}) %>
</p>
}}


*トラブルシューティング [#h6d01913]

**Uncaught Error: Bootstrap dropdown require Popper.js [#ze6b004e]
-[[Rails 5 - Uncaught Error: Bootstrap dropdown require Popper.js - Stack Overflow:https://stackoverflow.com/questions/45737011/rails-5-uncaught-error-bootstrap-dropdown-require-popper-js]]
-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:https://stackoverflow.com/questions/34481363/whats-the-difference-between-bootstrap-and-bootstrap-sprockets]]。bootstrapはjsファイルをまとめたもの、bootstrap-sproketsは個別のファイルということらしい。