americandog1993の日記

プログラマー歴半年のメモ

RailsにBootstrapを導入

Gemfileに以下を追加。
バージョンは任意で。

gem 'bootstrap-sass', '3.3.6'

bundle installする。

$ bundle install

app/stylesheetsにcustom.scssを追加。
内容は、

@import "bootstrap-sprockets";
@import "bootstrap";

としておく。
お試しのページを作ってみる。

$ rails g Static_pages home

app/views/static_pages/home.html.erbの内容を

<html>
    <head>
        <%= stylesheet_link_tag 'application', media: 'all',
                                       'data-turbolinks-track': 'reload' %>
    </head>
    <body>
        <button type="button" class="btn btn-primary">Primary</button>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

とする。なんとなくボタンで確認。
ボタンがbootstrap特有の丸かわいい感じになってれば成功。

f:id:americandog1993:20170422213241p:plain

参考:
railstutorial.jp
webnetamemo.com