Rails/Bootstrap の履歴(No.3)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• Rails/Bootstrap へ行く。
  • 1 (2015-05-04 (月) 10:39:46)
  • 2 (2015-05-04 (月) 10:40:21)
  • 3 (2015-05-11 (月) 16:28:38)
  • 4 (2015-09-21 (月) 17:19:19)
  • 5 (2015-09-22 (火) 15:50:12)
  • 6 (2015-10-28 (水) 14:47:07)
  • 7 (2016-02-23 (火) 14:12:55)
  • 8 (2016-03-24 (木) 15:13:50)
  • 9 (2016-04-13 (水) 16:47:30)
  • 10 (2017-05-29 (月) 15:19:28)
  • 11 (2018-07-31 (火) 01:02:21)
  • 12 (2020-04-17 (金) 21:48:02)
  • 13 (2020-04-21 (火) 01:03:54)
  • 14 (2020-05-02 (土) 22:12:09)

&tag(Rails/Bootstrap);

目次†[edit]

関連ページ†[edit]

参考情報†[edit]

• Gemfile

bootstrap-sassを使って導入†[edit]

• Rails4にBootstrap3を入れる場合、bootstrap-sassというのを使ったほうがいいらしい。
• bootstrap-sass という gem について - willnet.in
• Rails4 に bootstrap-sass で Twitter Bootstrap3 を導入 | EasyRamble
• Rails 4 で Twitter Bootstrap と Font Awesome を利用する手順 - Qiita

Gemfileの編集†[edit]

• Gemfileに追加。

  gem 'bootstrap-sass', '~> 3.3.4'
  gem 'font-awesome-sass'
  

bundle install実行†[edit]

• bundle installを実行

  bundle install --path vendor/bundle

application.css.scss作成など†[edit]

• app/assets/stylesheets/application.css.scssを作成

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

• app/assets/stylesheets/application.cssは削除
• app/assets/javascripts/application.jsの編集

  //= require bootstrap-sprockets
  

動作確認†[edit]

• scaffoldを作ってみる

scaffold実行†[edit]

• 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('/softwares', 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 にアクセス。