Rails/Bootstrap の履歴(No.12)

Tag: Rails/Bootstrap

目次†

目次
関連ページ
参考情報
bootstrapを使って導入(Rails 5.2編)
bootstrap-sassを使って導入(Rails 5.1編)
トラブルシューティング

↑

参考情報†

twbs/bootstrap-sass: Official Sass port of Bootstrap 2 and 3.…公式サイト
Gemfile
Rails
Bootstrap3
Rails/検証

↑

bootstrapを使って導入(Rails 5.2編)†

↑

参考情報†

↑

Gemfileの編集†

Gemfileに以下を追加。

gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'

sprockets-railsがv2.3.2以降であることを確認(Rails 5.2だとデフォルト対応済みか?)
```
bundle show |fgrep sprockets-rails
```

↑

application.scssの作成†

application.scssを作成する。
```
@import "bootstrap";
```

↑

application.html.erb†

これは特に変更なし？

<!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編)†

↑

Gemfileの編集†

Gemfileに以下を追加

gem 'bootstrap-sass', '~> 3.3.6'
gem 'font-awesome-sass'
gem 'jquery-rails'

↑

bunlde installを実行†

以下のコマンドを実行する
```
bundle install --path vendor/bundle
```

↑

application.css.scss作成など†

application.cssをapplication.css.scssリネーム。内容は以下で作成。

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

app/assets/javascripts/application.jsの編集

//= require jquery
//= require bootstrap-sprockets

↑

動作確認†

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の囲みが必要。

<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 にアクセス。

↑

トラブルシューティング†

↑

twitter-bootstrap-railsから移行するとナビゲーションが表示されない†

twitter-bootstrap-railsがBootstrap2ベースのせいかもしれない。
Bootstrap2とBootstrap3ではナビゲーションの記述方法やグリッドなど全くことなっているので書き直しが必要。

↑

padding-top: 60pxはどうなる？†

bodyのpadding-top: 60pxはnavbar-fixed-topを利用する場合に必要。fixed-topじゃないナビゲーションバーを使うならば不要。
navbar-fixed-topは画面の上につねにナビゲーションバーが表示され続ける。

↑

kaminariのページングの表示が乱れる†

以下のコマンドを実行する

bundle exec rails g kaminari:views bootstrap3

Rails/Bootstrap の履歴(No.12)

目次†

関連ページ†

参考情報†

bootstrapを使って導入(Rails 5.2編)†

参考情報†

Gemfileの編集†

application.scssの作成†

application.html.erb†

bootstrap-sassを使って導入(Rails 5.1編)†

Gemfileの編集†

bunlde installを実行†

application.css.scss作成など†

動作確認†

トラブルシューティング†

twitter-bootstrap-railsから移行するとナビゲーションが表示されない†

padding-top: 60pxはどうなる？†

kaminariのページングの表示が乱れる†