- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2020-05-08T05:22:48+00:00","default:wikiwriter","wikiwriter")
&tag(Rails/Bootstrap);
*目次 [#c3ed9b71]
#contents
*関連ページ [#lf2e978e]
-[[../Bootstrap4]]
-[[../Bootstrap3]]
-[[Rails]]
-[[./古い情報]]
*参考情報 [#n8b6f96d]
-[[twbs/bootstrap-sass: Official Sass port of Bootstrap 2 and 3.:https://github.com/twbs/bootstrap-sass]]…公式サイト
-[[Gemfile]]
*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]]
-[[Rails]]
-[[Bootstrap3]]
-[[Rails/検証]]
**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 にアクセス。