최초의 bootstrap 도입(rails)

소개

bootstrap을 도입 할 때 번거 로움을 겪었기 때문에 처음 만져 보는 사람이라도 이해하기 쉽고 도입 절차를 처음부터 살펴 보겠습니다
bootstrap은 쉽게 grid 레이아웃을 구현할 수 있으므로 사용할 수있게되면 편리합니다.

① Gemfile의 끝에 bootstrap 추가

Gemfile

gem 'bootstrap'

이번에는 버전 지정은 하지 않습니다.
이 때, compass-rails라고 하는 gem이 추가되어 있으면 에러를 토해 버리므로, 없어서 문제 없으면 삭제합니다.

② gem 갱신

terminal

$ bundle install

③ application.css에 bootstrap 도입

app>assets>stylesheet>application.css

application.css

@import "bootstrap";

application.css를 application.scss로 이름 바꾸기

④ application.js에도 bootstrap 적용

app>assets>javascripts>application.js

application.js

//= require bootstrap

⑤ bootstrap 삽입

bootstrap 에서 원하는 디자인을 찾아 적응하려는 뷰 파일에 삽입합니다.
bootstrap 맨 위 페이지에서 헤더의 Documentation-> 왼쪽에 있는 Commponents에서 찾습니다.

e.g.) 이번에는 header에 Navbar를 사용합니다.
app>views>layouts>application.html.erb


application.html.erb

<header>
  ここにコピーしたコードを貼り付け
</header>

이제 $ rails s로 서버를 시작하고 해당 페이지를 표시하면 아래와 같이 bootstrap이 적용됩니다.



후에는 에디터의 bootstrap을 복사한 부분의 링크나 표시시키고 싶은 문자 등을 조절하여 완성입니다! 했어!