Rails/Bootstrap3

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.†

• CentOS 6のホストにdeployすると発生。Nodejsが古すぎるのが原因。
• CentOS 6.xにnode.js(v8系)をインストールする - masalibの日記を参考にアップデートする

  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から移行するとナビゲーションが表示されない†

• 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

Contents

メニュー

• about
• blog
• blog(はてな)

配布物

• FaEdit
  • ヘルプ
  • BugTrack
• WikiHelpMaker
  • ヘルプ
  • BugTrack

ゲーム

• 時のオカリナ3DS
• ドラゴンズドグマ
• スプラトゥーン2
• DQB2
• ジョイコン

ショートカット

• 用語集A-Z
• 用語集ア-ワ

今日の20件

最新の20件