Rails 에 Bootstrap 을 적용해서 화사하게 만들어보기

 Bootstrap 은 화사한 UI를 바로 만들어주는 똑똑한 Rails Gem 중 하나 입니다. 

(Twitter-Bootstrap은 Twitter와 같은 UX를 바로 꾸며줍니다!) 

* 관련 Reference : 

 - Twitter-Bootstrap github : https://github.com/seyhunak/twitter-bootstrap-rails

 - Bootstrap Guide : http://twitter.github.io/bootstrap/index.html

Rails Project를 만드셨다면,

Project내에 Gemfile의 asset 부분안에 아래와 같은 젬들을 추가합니다. 

gem "therubyracer"
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem "twitter-bootstrap-rails"

추가 후에는 terminal 에서 bundle install을 통해 gemfile 내의 gem을 설치해 줍니다.

설치가 끝난 후에는,

 

rails generate bootstrap:install less

을 통해 프로젝트에 bootstrap을 적용시켜줍니다. 

 이후에는 Application.html.erb에 들어가, Body부분에 

 

위와 같이 container을 적용하면 바로 '샷'하고 margin이나 틀이 조금은 바뀐게 보이실 거에요. 

bootstrap의 magic은 class만 붙여주면 기본적인 틀들이 아주 깔끔하게 바뀐다는 것입니다. (css적용을 통해)

응용은 위의 관련 레퍼런스에 guide를 보시면, 아주 쉽게 따라하실 수 있습니다:)