Rails/Bootstrap4
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
&tag(Rails/Bootstrap4);
*目次 [#x711acac]
#contents
*関連ページ [#q4790619]
-[[Rails]]
-[[../Bootstrap3]]
-[[./Rails6.1に導入]]
-[[./Rails6に導入]]
-[[./Rails5.2に導入]]
*参考情報 [#m9d4ce21]
*Tips [#y15b90ce]
**Bootstrap3ぽくする設定 [#o2f3cd75]
-application.scssを編集。プライマリーの色とベースのフォン...
#pre{{
$primary: #337ab7;
@import "bootstrap";
html {
font-size: 14px; /* ルート要素のフォントサイズを1rem=14...
}
}}
**モーダルを表示する。 [#ud1c1b34]
-基本的に以下のコードでボタンを押した際にモーダルが表示さ...
#pre{{
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle...
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" r...
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Mo...
<button type="button" class="close" data-dismiss=...
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" d...
<button type="button" class="btn btn-primary">Sav...
</div>
</div>
</div>
</div>
}}
-ただしapplication.jsに最低限以下の設定が必要。
#pre{{
//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap-sprockets
}}
***モーダルが表示されない場合: 2020/09/25(金) [#nef50845]
-上記最低限のコードでボタンを押してもモーダルが表示されて...
***「data-remote: true」でajaxを組み合わせたとき表示され...
-例えば以下のようなコードで呼び出す。
#pre{{
<p>
<%= link_to("モーダル", modal_link_books_path, {"data-t...
</p>
}}
-この場合、application.jsで「require rails-ujs」を「requi...
-または「:remote => true」を削除する？remote不要?(要確認)...
#pre{{
<p>
<%= link_to("モーダル", modal_link_books_path, {"data-t...
</p>
}}
*トラブルシューティング [#h6d01913]
**Uncaught Error: Bootstrap dropdown require Popper.js [#...
-[[Rails 5 - Uncaught Error: Bootstrap dropdown require P...
-application.jsに以下を追加
//= require popper
//= require bootstrap-sprockets
-ちなみにapplication.jsに指定するbootstrapとbootstrap-spr...
終了行:
&tag(Rails/Bootstrap4);
*目次 [#x711acac]
#contents
*関連ページ [#q4790619]
-[[Rails]]
-[[../Bootstrap3]]
-[[./Rails6.1に導入]]
-[[./Rails6に導入]]
-[[./Rails5.2に導入]]
*参考情報 [#m9d4ce21]
*Tips [#y15b90ce]
**Bootstrap3ぽくする設定 [#o2f3cd75]
-application.scssを編集。プライマリーの色とベースのフォン...
#pre{{
$primary: #337ab7;
@import "bootstrap";
html {
font-size: 14px; /* ルート要素のフォントサイズを1rem=14...
}
}}
**モーダルを表示する。 [#ud1c1b34]
-基本的に以下のコードでボタンを押した際にモーダルが表示さ...
#pre{{
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle...
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" r...
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Mo...
<button type="button" class="close" data-dismiss=...
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" d...
<button type="button" class="btn btn-primary">Sav...
</div>
</div>
</div>
</div>
}}
-ただしapplication.jsに最低限以下の設定が必要。
#pre{{
//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap-sprockets
}}
***モーダルが表示されない場合: 2020/09/25(金) [#nef50845]
-上記最低限のコードでボタンを押してもモーダルが表示されて...
***「data-remote: true」でajaxを組み合わせたとき表示され...
-例えば以下のようなコードで呼び出す。
#pre{{
<p>
<%= link_to("モーダル", modal_link_books_path, {"data-t...
</p>
}}
-この場合、application.jsで「require rails-ujs」を「requi...
-または「:remote => true」を削除する？remote不要?(要確認)...
#pre{{
<p>
<%= link_to("モーダル", modal_link_books_path, {"data-t...
</p>
}}
*トラブルシューティング [#h6d01913]
**Uncaught Error: Bootstrap dropdown require Popper.js [#...
-[[Rails 5 - Uncaught Error: Bootstrap dropdown require P...
-application.jsに以下を追加
//= require popper
//= require bootstrap-sprockets
-ちなみにapplication.jsに指定するbootstrapとbootstrap-spr...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
