Rails/Bootstrap/古い情報
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
&tag(Rails/Bootstrap/古い情報);
*目次 [#w501eb72]
#contents
*関連ページ [#f18fb14a]
*参考情報 [#kc2fe30a]
*bootstrap-sassを使って導入(Rails 5編) [#zb69e31e]
**Gemfileの編集 [#e4051c96]
-[[GitHub - twbs/bootstrap-sass: Official Sass port of Bo...
-ついでにfont-awesomeも。
#pre{{
gem 'bootstrap-sass', '~> 3.3.6'
gem 'font-awesome-sass'
}}
**bundle installを実行 [#r93ee318]
-bundle installを実行
#pre{{
bundle install --path vendor/bundle
}}
**application.css.scss作成など [#z2dc2fed]
-application.css.scssを作成。
#pre{{
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
}}
-app/assets/stylesheets/application.cssは削除
-app/assets/javascripts/application.jsの編集
#pre{{
//= require bootstrap-sprockets
}}
*bootstrap-sassを使って導入(Rails 4編) [#a5457844]
-[[GitHub - twbs/bootstrap-sass: Official Sass port of Bo...
-Rails4にBootstrap3を入れる場合、bootstrap-sassというのを...
-[[bootstrap-sass という gem について - willnet.in:http:/...
-[[Rails4 に bootstrap-sass で Twitter Bootstrap3 を導入 ...
-[[Rails 4 で Twitter Bootstrap と Font Awesome を利用す...
**Gemfileの編集 [#q9863aaa]
-Gemfileに追加。
#pre{{
gem 'bootstrap-sass', '~> 3.3.6'
gem 'font-awesome-sass'
}}
**bundle install実行 [#ncbd9634]
-bundle installを実行
bundle install --path vendor/bundle
**application.css.scss作成など [#xda4204a]
-app/assets/stylesheets/application.css.scssを作成
#pre{{
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
}}
- app/assets/stylesheets/application.cssは削除
-app/assets/javascripts/application.jsの編集
#pre{{
//= require bootstrap-sprockets
}}
**動作確認 [#nc1012ae]
-scaffoldを作ってみる
***scaffold実行 [#p5e838f6]
-bookモデルのscaffoldを作成
bundle exec rails g scaffold book title:string author:s...
bundle exec rake db:migrate
-ここで一旦 http://localhost:3000/books にアクセスして確...
-app/views/layouts/application.html.erbを編集。ナビゲーシ...
#pre{{
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/"><i class="fa...
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="http://www.google.com/" targ...
<li><a href="http://www.yahoo.co.jp/" tar...
</ul>
<ul class="nav navbar-nav navbar-left">
<div class="form-group">
<%= form_tag('/books', method: 'get',...
<%= text_field_tag(:q, params[:q]...
<% end %>
</div>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<!-- flash messages -->
<%= yield %>
<hr>
<footer>
<p>© src256</p>
</footer>
</div>
}}
-もう一回 http://localhost:3000/books にアクセス。
*Bootstrap3対応フォーム [#s090fa47]
**フォームの生成 [#o77012ff]
-以下のようなフォームを作成する。
#ref(newbook.png)
-books/_form.html.erbの内容
#pre{{
<%= form_for(@book, html: {class: 'form-horizontal'}) do ...
<% if @book.errors.any? %>
<div id="error_explanation">
<h2>エラーが発生しました :</h2>
<ul>
<% @book.errors.full_messages.each do |ms...
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="form-group">
<%= f.label(:title, 'タイトル', class: 'col-xs-2 ...
<div class="col-xs-10">
<%= f.text_field(:title, class: 'form-control...
</div>
</div>
<div class="form-group">
<%= f.label(:author, '著者', class: 'col-xs-2 con...
<div class="col-xs-10">
<%= f.text_field(:author, class: 'form-contro...
</div>
</div>
<div class="form-group">
<%= f.label(:summary, '概要', class: 'col-xs-2 co...
<div class="col-xs-10">
<%= f.text_area(:summary, rows: 14, cols: 20,...
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<%= f.submit('保存', class: 'btn btn-primary'...
</div>
</div>
<% end %>
}}
**エラーメッセージの見せ方 [#qc95f2dd]
#ref(error.png)
-フォームの中にエラーを一覧表示し、さらにエラーに成ったフ...
-application.css.scssの修正。本来は最初のブロックでいいは...
#pre{{
.field_with_errors {
@extend .form-group;
@extend .has-error;
}
.form-horizontal .field_with_errors {
margin: 0;
}
.form-horizontal .field_with_errors:before, .form-horizon...
display: block;
clear: none;
}
}}
-ビューの修正。alert-dangerにバツじるしをつけて閉じられる...
#pre{{
<% if @item.errors.any? %>
<div class="alert alert-danger" role="alert">
<button class="close" data-dismiss="alert">×<...
<h2>エラーが発生しました :</h2>
<ul>
<% @item.errors.full_messages.each do |ms...
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
}}
**メッセージの表示 [#q308d4ea]
-画面上部に×印で閉じることが出来るメッセージを表示したい...
***application.css.scssに追加 [#w3a79c6b]
#pre{{
field_with_errors {
@extend .form-group;
@extend .has-error;
}
.form-horizontal .field_with_errors {
margin: 0;
}
.form-horizontal .field_with_errors:before, .form-horizon...
display: block;
clear: none;
}
}}
***application.html.erbの編集 [#w4e6e487]
#pre{{
<div class="container">
<!-- flash messages -->
<div class="row">
<div class="col-xs-12">
<%= flash_messages %>
</div>
</div>
<div class="row">
<%= yield %>
</div>
<hr>
<footer>
<p>© src256</p>
</footer>
</div>
}}
***application_helper.rbに追加 [#da2b191c]
#pre{{
module ApplicationHelper
def bootstrap_class_for flash_type
{ success: "alert-success", error: "alert-danger", al...
}[flash_type.to_sym] || flash_type.to_s
end
def flash_messages(opts = {})
flash.each do |msg_type, message|
concat(content_tag(:div, message, class: "alert #{b...
sible", role: 'alert') do
concat(content_tag(:button, class: 'close', data:...
concat content_tag(:span, '×'.html_safe, ...
concat content_tag(:span, 'Close', class: 'sr-o...
end)
concat message
end)
end
nil
end
end
}}
***呼び出し例 [#i75b4eee]
-books_controller.rbで表示する場合
#pre{{
def index
@books = Book.all
flash[:notice] = 'はじめまして'
end
}}
終了行:
&tag(Rails/Bootstrap/古い情報);
*目次 [#w501eb72]
#contents
*関連ページ [#f18fb14a]
*参考情報 [#kc2fe30a]
*bootstrap-sassを使って導入(Rails 5編) [#zb69e31e]
**Gemfileの編集 [#e4051c96]
-[[GitHub - twbs/bootstrap-sass: Official Sass port of Bo...
-ついでにfont-awesomeも。
#pre{{
gem 'bootstrap-sass', '~> 3.3.6'
gem 'font-awesome-sass'
}}
**bundle installを実行 [#r93ee318]
-bundle installを実行
#pre{{
bundle install --path vendor/bundle
}}
**application.css.scss作成など [#z2dc2fed]
-application.css.scssを作成。
#pre{{
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
}}
-app/assets/stylesheets/application.cssは削除
-app/assets/javascripts/application.jsの編集
#pre{{
//= require bootstrap-sprockets
}}
*bootstrap-sassを使って導入(Rails 4編) [#a5457844]
-[[GitHub - twbs/bootstrap-sass: Official Sass port of Bo...
-Rails4にBootstrap3を入れる場合、bootstrap-sassというのを...
-[[bootstrap-sass という gem について - willnet.in:http:/...
-[[Rails4 に bootstrap-sass で Twitter Bootstrap3 を導入 ...
-[[Rails 4 で Twitter Bootstrap と Font Awesome を利用す...
**Gemfileの編集 [#q9863aaa]
-Gemfileに追加。
#pre{{
gem 'bootstrap-sass', '~> 3.3.6'
gem 'font-awesome-sass'
}}
**bundle install実行 [#ncbd9634]
-bundle installを実行
bundle install --path vendor/bundle
**application.css.scss作成など [#xda4204a]
-app/assets/stylesheets/application.css.scssを作成
#pre{{
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
}}
- app/assets/stylesheets/application.cssは削除
-app/assets/javascripts/application.jsの編集
#pre{{
//= require bootstrap-sprockets
}}
**動作確認 [#nc1012ae]
-scaffoldを作ってみる
***scaffold実行 [#p5e838f6]
-bookモデルのscaffoldを作成
bundle exec rails g scaffold book title:string author:s...
bundle exec rake db:migrate
-ここで一旦 http://localhost:3000/books にアクセスして確...
-app/views/layouts/application.html.erbを編集。ナビゲーシ...
#pre{{
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/"><i class="fa...
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="http://www.google.com/" targ...
<li><a href="http://www.yahoo.co.jp/" tar...
</ul>
<ul class="nav navbar-nav navbar-left">
<div class="form-group">
<%= form_tag('/books', method: 'get',...
<%= text_field_tag(:q, params[:q]...
<% end %>
</div>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<!-- flash messages -->
<%= yield %>
<hr>
<footer>
<p>© src256</p>
</footer>
</div>
}}
-もう一回 http://localhost:3000/books にアクセス。
*Bootstrap3対応フォーム [#s090fa47]
**フォームの生成 [#o77012ff]
-以下のようなフォームを作成する。
#ref(newbook.png)
-books/_form.html.erbの内容
#pre{{
<%= form_for(@book, html: {class: 'form-horizontal'}) do ...
<% if @book.errors.any? %>
<div id="error_explanation">
<h2>エラーが発生しました :</h2>
<ul>
<% @book.errors.full_messages.each do |ms...
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="form-group">
<%= f.label(:title, 'タイトル', class: 'col-xs-2 ...
<div class="col-xs-10">
<%= f.text_field(:title, class: 'form-control...
</div>
</div>
<div class="form-group">
<%= f.label(:author, '著者', class: 'col-xs-2 con...
<div class="col-xs-10">
<%= f.text_field(:author, class: 'form-contro...
</div>
</div>
<div class="form-group">
<%= f.label(:summary, '概要', class: 'col-xs-2 co...
<div class="col-xs-10">
<%= f.text_area(:summary, rows: 14, cols: 20,...
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<%= f.submit('保存', class: 'btn btn-primary'...
</div>
</div>
<% end %>
}}
**エラーメッセージの見せ方 [#qc95f2dd]
#ref(error.png)
-フォームの中にエラーを一覧表示し、さらにエラーに成ったフ...
-application.css.scssの修正。本来は最初のブロックでいいは...
#pre{{
.field_with_errors {
@extend .form-group;
@extend .has-error;
}
.form-horizontal .field_with_errors {
margin: 0;
}
.form-horizontal .field_with_errors:before, .form-horizon...
display: block;
clear: none;
}
}}
-ビューの修正。alert-dangerにバツじるしをつけて閉じられる...
#pre{{
<% if @item.errors.any? %>
<div class="alert alert-danger" role="alert">
<button class="close" data-dismiss="alert">×<...
<h2>エラーが発生しました :</h2>
<ul>
<% @item.errors.full_messages.each do |ms...
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
}}
**メッセージの表示 [#q308d4ea]
-画面上部に×印で閉じることが出来るメッセージを表示したい...
***application.css.scssに追加 [#w3a79c6b]
#pre{{
field_with_errors {
@extend .form-group;
@extend .has-error;
}
.form-horizontal .field_with_errors {
margin: 0;
}
.form-horizontal .field_with_errors:before, .form-horizon...
display: block;
clear: none;
}
}}
***application.html.erbの編集 [#w4e6e487]
#pre{{
<div class="container">
<!-- flash messages -->
<div class="row">
<div class="col-xs-12">
<%= flash_messages %>
</div>
</div>
<div class="row">
<%= yield %>
</div>
<hr>
<footer>
<p>© src256</p>
</footer>
</div>
}}
***application_helper.rbに追加 [#da2b191c]
#pre{{
module ApplicationHelper
def bootstrap_class_for flash_type
{ success: "alert-success", error: "alert-danger", al...
}[flash_type.to_sym] || flash_type.to_s
end
def flash_messages(opts = {})
flash.each do |msg_type, message|
concat(content_tag(:div, message, class: "alert #{b...
sible", role: 'alert') do
concat(content_tag(:button, class: 'close', data:...
concat content_tag(:span, '×'.html_safe, ...
concat content_tag(:span, 'Close', class: 'sr-o...
end)
concat message
end)
end
nil
end
end
}}
***呼び出し例 [#i75b4eee]
-books_controller.rbで表示する場合
#pre{{
def index
@books = Book.all
flash[:notice] = 'はじめまして'
end
}}
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
