Rails/Bootstrap の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Rails/Bootstrap へ行く。
• Rails/Bootstrap の差分を削除

#author("2020-05-08T05:21:51+00:00","default:wikiwriter","wikiwriter")
#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]]
-[[Rails]]
-[[Bootstrap3]]
-[[Rails/検証]]

*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>&#169; 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