&tag(Rails/Bootstrap); *目次 [#c3ed9b71] #contents *関連ページ [#lf2e978e] *参考情報 [#n8b6f96d] -[[Gemfile]] -[[Rails]] -[[Bootstrap3]] *bootstrap-sassを使って導入 [#a5457844] -Rails4にBootstrap3を入れる場合、bootstrap-sassというのを使ったほうがいいらしい。 -[[bootstrap-sass という gem について - willnet.in:http://www.willnet.in/136]] -[[Rails4 に bootstrap-sass で Twitter Bootstrap3 を導入 | EasyRamble:http://easyramble.com/bootstrap-sass-on-rails4.html]] -[[Rails 4 で Twitter Bootstrap と Font Awesome を利用する手順 - Qiita:http://qiita.com/hkusu/items/a549a96dcb2bb935a47b]] **Gemfileの編集 [#q9863aaa] -Gemfileに追加。 #pre{{ gem 'bootstrap-sass', '~> 3.3.4' 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:string summary:text bundle exec rake db:migrate -ここで一旦 http://localhost:3000/books にアクセスして確認。 -app/views/layouts/application.html.erbを編集。ナビゲーションの追加とyieldの囲みが必要。 #pre{{ <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="/"><i class="fa fa-home"></i>Home</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="http://www.google.com/" target="_blank">Google</a></li> <li><a href="http://www.yahoo.co.jp/" target="_blank">Yahoo! Japan</a></li> </ul> <ul class="nav navbar-nav navbar-left"> <div class="form-group"> <%= form_tag('/softwares', method: 'get', class: 'navbar-form navbar-right') do %> <%= text_field_tag(:q, params[:q], class: 'form-control', style: 'width: 200px;', placeholder: 'Search') %> <% 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 |f| %> <% if @book.errors.any? %> <div id="error_explanation"> <h2>エラーが発生しました :</h2> <ul> <% @book.errors.full_messages.each do |msg| %> <li><%= msg %></li> <% end %> </ul> </div> <% end %> <div class="form-group"> <%= f.label(:title, 'タイトル', class: 'col-xs-2 control-label') %> <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 control-label') %> <div class="col-xs-10"> <%= f.text_field(:author, class: 'form-control') %> </div> </div> <div class="form-group"> <%= f.label(:summary, '概要', class: 'col-xs-2 control-label') %> <div class="col-xs-10"> <%= f.text_area(:summary, rows: 14, cols: 20, class: 'form-control') %> </div> </div> <div class="form-group"> <div class="col-xs-12"> <%= f.submit('保存', class: 'btn btn-primary') %> </div> </div> <% end %> }} **エラーメッセージの見せ方 [#qc95f2dd] #ref(error.png) -フォームの中にエラーを一覧表示し、さらにエラーに成ったフィールドを.field_with_errorsでハイライトするのが普通らしい。 -application.css.scssの修正。本来は最初のブロックでいいはずだが、form-horizontalを使う場合下の修正も必要(ずれる)。 #pre{{ .field_with_errors { @extend .form-group; @extend .has-error; } .form-horizontal .field_with_errors { margin: 0; } .form-horizontal .field_with_errors:before, .form-horizontal .field_with_errors::after { display: block; clear: none; } }} -ビューの修正。alert-dangerにバツじるしをつけて閉じられるようにする場合。 #pre{{ <% if @item.errors.any? %> <div class="alert alert-danger" role="alert"> <button class="close" data-dismiss="alert">×</button> <h2>エラーが発生しました :</h2> <ul> <% @item.errors.full_messages.each do |msg| %> <li><%= msg %></li> <% end %> </ul> </div> <% end %> }}