Rails5에서 Bootstrap4 사용

개요

Rails 튜토리얼을 하고 있고, Bootstrap의 버전이 3으로 낡았기 때문에 최신판의 4를 사용해 보았다.
환경 구축에서 실제로 사용해 볼 때까지 여러가지 조사했으므로 메모한다.

버전

Rails: 5.2.2

Bootstrap: 4.3.1

Bootstrap이란?

아마 모르는 사람은 별로 없겠지만, 만약을 위해 써 둔다.

Bootstrap은 프런트 엔드 용 프레임 워크이며 html, css, JS로 구성됩니다.
원래 준비되어 있는 디자인용의 템플릿을 사용하는 것으로, 효율적이고 예쁜 디자인을 사용할 수 있다.

Bootstrap을 그대로 사용하면 Bootstrap 냄새가 난다고 말하지만, 별로 신경 쓰지 않는다.

Bootstrap3에서 4로 변경

Bootstrap4 마이그레이션 가이드을 참조하십시오.

Rails5에 Bootstrap4 도입

bootstrap-rubygem의 Github 에 도입 순서가 써 있으므로 참고로 한다.
Gemfile에 gem을 추가하는 것만으로는 안되고, application.sass와 application.js를 편집해야합니다.

application.sass 파일에는 bootstrap을 import하는 설정을 추가한다.
파일 확장자가 css이면 sass로 변경합니다. (bootstrap을 하기 위하여)

또한 *= require 및 *= require_tree를 제거해야합니다.

( @import 는 import처의 scss를 포함해 하나의 css를 생성합니다만, require는 다른 파일을 참조하는 움직임을 하기 때문에, 같은 css를 보러 가려고 하면 에러가 된다, 라고 하는 이유라고 생각해 된다.
Rails guide (에셋 파이프라인) , sprockets 참조)

$ vim app/assets/stylesheets/application.scss
 *
- *= require_tree .
- *= require_self
 */

+ @import "bootstrap";

Bootstrap4에서 페이지를 수정해 보세요.

Bootstrap NavigationBar 을 참고로 Navigation Bar를 설정한다.

<nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">

그건 그렇고, bootstrap3이라고 이렇게 씁니다.

<nav class="navbar navbar-dark fixed-top">

bootstrap4에서는 새로운 navbar-expand-{}와 bg-{}를 추가해야합니다.navbar-expand-{} 는 반응형 디자인의 거동, bg-{} 는 navbar의 배경색을 지정한다.

네비게이션 바의 항목에는 navbar-nav를 사용하지만, bootstrap4라면 항목마다 nav-itemclass를 지정할 필요가 있다. (약간 귀찮음) 나중에 링크에 nav-link

      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <%= link_to "Home", "#", class: "nav-link" %>
        </li>
        <li class="nav-item">
          <%= link_to "Blog", "#", class: "nav-link" %>
        </li>
        <li class="nav-item">
          <%= link_to "Contents", "#", class: "nav-link" %>
        </li>
      </ul>

정리하면 이런 느낌

  <body>
    <nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
      <%= link_to "tech blog", "#", id: "logo", class: "navbar-brand" %>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <%= link_to "Home", "#", class: "nav-link" %>
        </li>
        <li class="nav-item">
          <%= link_to "Blog", "#", class: "nav-link" %>
        </li>
        <li class="nav-item">
          <%= link_to "Contents", "#", class: "nav-link" %>
        </li>
      </ul>
    </nav>
    <div class="container">
      <%= yield %>
    </div>

화면을 표시하면 이렇게 된다.