Rails/Bootstrap4

&tag(Rails/Bootstrap4);

目次†[edit]

関連ページ†[edit]

• Rails
• ../Bootstrap3
• ./Rails6.1に導入
• ./Rails6に導入
• ./Rails5.2に導入

参考情報†[edit]

Tips†[edit]

Bootstrap3ぽくする設定†[edit]

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

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

モーダルを表示する。†[edit]

• 基本的に以下のコードでボタンを押した際にモーダルが表示されるはず。

  <!-- 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(金)†[edit]

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

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

• 例えば以下のようなコードで呼び出す。

  <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>
  

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

Uncaught Error: Bootstrap dropdown require Popper.js†[edit]

• 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は個別のファイルということらしい。

Contents

メニュー

• about
• blog
• blog(はてな)

配布物

• FaEdit
  • ヘルプ
  • BugTrack
• WikiHelpMaker
  • ヘルプ
  • BugTrack

ゲーム

• 時のオカリナ3DS
• ドラゴンズドグマ
• スプラトゥーン2
• DQB2
• ジョイコン

ショートカット

• 用語集A-Z
• 用語集ア-ワ

最新の20件