Rails入門3:RailsにBootstrapを導入しよう

＃01:RailsにBootstrapを導入しよう

このレッスンでは、お勧めのお店を投稿できる「ランチマップ」アプリのデザインを整えて、スマートフォン対応と日本語表示を実現します。

まず初めに、HTMLテンプレートのBootstrapを導入します。

- paizaの場合： New Broweserタブに表示されたアドレスに「:3000」を追加する
例 https://xxx.learning.paiza-user-learning.cloud:3000
- 作成した掲示板にアクセスする：https://xxx.learning.paiza-user-learning.cloud:3000/categories

- 自分のPCでrailsを起動する場合：ブラウザで「http://localhost:3000」にアクセスする

※ xxxには、コンテナ名が入ります

「CTRL」キー(コントロールキー)を押しながら「C」のキーを押します。

Gemfileを修正

gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '~> 5.0'

コマンドを実行
$ bundle install

app/assets/stylesheets/にある「application.css」のファイル名をapp/assets/stylesheets/application.css.scssに変更する

app/assets/stylesheets/application.css.scssを修正

@import 'bootstrap-sprockets';
@import 'bootstrap';

/* universal */

body {
  padding: 60px 15px 0;
}

app/assets/javascripts/application.js

//= require bootstrap-sprockets

app/views/layouts/application.html.erbを修正

<body>
    <div class='container'>
        <%= yield %>
    </div>
</body>

- Linuxコマンド集 - ITpro
http://itpro.nikkeibp.co.jp/article/COLUMN/20060224/230573/

- Ruby on Railsサービス開発逆引き辞典
http://code.materializer.co/index.html

- Railsドキュメント
http://railsdoc.com/

- RubyGems.org | your community gem host
https://rubygems.org/

- Ruby on Rails 初心者必見！パッケージ管理ツール『gem』を徹底解説 -Code部
https://blog.codecamp.jp/rails-gem

- オブジェクト指向スクリプト言語Ruby ：ライブラリ
https://www.ruby-lang.org/ja/libraries/

- RubyGems - Wikipedia
https://ja.wikipedia.org/wiki/RubyGems

- Bundlerを使ったGemパッケージの管理 - Ruby on Rails入門
http://www.rubylife.jp/rails/ini/index2.html

- Rails bootstrapの導入 sassのススメ - Qiita
http://qiita.com/shizuma/items/83cdadbe0a629f1f74d1

- 音速開発！RailsでBootstrapを導入する方法〜Less、Sass、Scss〜 | 侍エンジニア塾ブログ
http://www.sejuku.net/blog/11043

- 今さら聞けない？！Webディレクターの為のSass講座 : LINE Corporation ディレクターブログ
http://directorblog.jp/archives/51753533.html

- Sassってなに？だった私がSassの使い方を解説してみた | dwango creators' blog（ドワンゴクリエイターズブログ）
http://creator.dwango.co.jp/9668.html

- とほほのSass入門
http://www.tohoho-web.com/ex/sass.html