소개

Rails 내에서 Bootstrap을 사용할 때의 정리입니다 (소요 시간 5 분).
여러가지 방법은 있는 것 같습니다만, 세세한 설정을 신경쓰지 않고 할 수 있는 방법입니다.

HTML/CSS만으로 쓰고 있었을 때도, 그렇게 도입이 어렵지 않았던 Bootstrap입니다만, gem을 사용하는 것으로, 한층 더 편하게 도입/관리를 할 수 있습니다.

환경

· Mac OS X EI Capitan (10.11.5)
· Ruby 2.3.0
· Rails 4.2.6

방법

초기 상태의 Gemfile에 다음을 추가합니다.

Gemfile

gem 'therubyracer', platforms: :ruby
gem 'less-rails'
gem 'twitter-bootstrap-rails'

터미널에서 다음 명령을 실행하면 완료됩니다.

$ bundle install
$ rails g bootstrap:install

동작 확인

샘플 코드

적절한 HTML 파일을 만들고 그 안에 Bootstrap을 사용해보십시오.

index.html.erb

<h1>Bootstrap 動作確認<h1>
<button class="">青い角丸のボタンでOK</button>

Bootstrap 적용 전

Bootstrap 적용 후

[참고] Rails에서 동작 확인용 파일 만들기

명령줄에서 샘플용 컨트롤러 만들기
컨트롤러 생성시 index의 View도 동시에 생성

$ rails g controller Samples index

app/views/samples/index.html.erb를 위의 샘플 코드와 같이 편집 한 후 명령 줄에서 서버를 시작합니다.

$ rails s

브라우저로부터 localhost:3000/samples/index 에 액세스 해, 상기의 동작 확인을 실시한다.