Tag: Rails/Bootstrap3

目次

関連ページ

参考情報

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

トラブルシューティング

Autoprefixer doesn’t support Node v0.10.48. Update it.

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

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2020-05-08 (金) 14:22:55