- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2020-04-17T03:48:02+00:00","default:wikiwriter","wikiwriter")
#author("2020-04-20T07:03:54+00:00","default:wikiwriter","wikiwriter")
&tag(Rails/Bootstrap);
*目次 [#c3ed9b71]
#contents
*関連ページ [#lf2e978e]
-[[Rails]]
-[[./古い情報]]
*参考情報 [#n8b6f96d]
-[[twbs/bootstrap-sass: Official Sass port of Bootstrap 2 and 3.:https://github.com/twbs/bootstrap-sass]]…公式サイト
-[[Gemfile]]
-[[Rails]]
-[[Bootstrap3]]
-[[Rails/検証]]
*bootstrapを使って導入(Rails 5.2編) [#ye2b2012]
**参考情報 [#m35bf134]
-[[twbs/bootstrap-rubygem: Bootstrap 4 rubygem for Rails / Sprockets / Hanami / etc:https://github.com/twbs/bootstrap-rubygem]]…公式サイト
-[[Railsアプリで Bootstrap 4 を利用する - Qiita:https://qiita.com/NaokiIshimura/items/c8db09daefff5c11dadf]]
**Gemfileの編集 [#i5e663fa]
-Gemfileに以下を追加。
#pre{{
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'
}}
-sprockets-railsがv2.3.2以降であることを確認(Rails 5.2だとデフォルト対応済みか?)
bundle show |fgrep sprockets-rails
**application.scssの作成 [#f4729296]
-application.scssを作成する。
@import "bootstrap";
**application.html.erb [#m2426b17]
-これは特に変更なし？
#pre{{
<!DOCTYPE html>
<html>
<head>
<title>Rails5Bootstrap4Demo</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div class="container">
<%= yield %>
</div>
</body>
</html>
}}
*bootstrap-sassを使って導入(Rails 5.1編) [#ed33806b]
**Gemfileの編集 [#f76fc51a]
-Gemfileに以下を追加
#pre{{
gem 'bootstrap-sass', '~> 3.3.6'
gem 'font-awesome-sass'
gem 'jquery-rails'
}}
**bunlde installを実行 [#ec205c5c]
-以下のコマンドを実行する
#pre{{
bundle install --path vendor/bundle
}}
**application.css.scss作成など [#z2dc2fed]
-application.cssをapplication.css.scssリネーム。内容は以下で作成。
#pre{{
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
}}
-app/assets/javascripts/application.jsの編集
#pre{{
//= require jquery
//= require bootstrap-sprockets
}}
**動作確認 [#nc1012ae]
-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('/books', 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 にアクセス。
*トラブルシューティング [#t9ed9b4d]
**Autoprefixer doesn’t support Node v0.10.48. Update it. [#r9a648b1]
-CentOS 6のホストにdeployすると発生。Nodejsが古すぎるのが原因。
-[[CentOS 6.xにnode.js(v8系)をインストールする - masalibの日記:https://masalib.hatenablog.com/entry/2018/02/14/194846]]を参考にアップデートする
sudo rpm -Uvh https://rpm.nodesource.com/pub_9.x/el/6/x86_64/nodejs-9.5.0-1nodesource.x86_64.rpm
**twitter-bootstrap-railsから移行するとナビゲーションが表示されない [#b76d9600]
-twitter-bootstrap-railsがBootstrap2ベースのせいかもしれない。
-Bootstrap2とBootstrap3ではナビゲーションの記述方法やグリッドなど全くことなっているので書き直しが必要。
**padding-top: 60pxはどうなる？ [#hd777abf]
-bodyのpadding-top: 60pxはnavbar-fixed-topを利用する場合に必要。fixed-topじゃないナビゲーションバーを使うならば不要。
-navbar-fixed-topは画面の上につねにナビゲーションバーが表示され続ける。
**kaminariのページングの表示が乱れる [#h930f915]
-以下のコマンドを実行する
bundle exec rails g kaminari:views bootstrap3
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
