Help us understand the problem. What is going on with this article?

【Rails】Bootstrap 4(alpha)をインストール

More than 3 years have passed since last update.

Railsにbootstrapを導入する際、bootstrap3ではbootstrap-sassgemを使っていたが、

https://github.com/twbs/bootstrap-sass

This is Bootstrap 3. For Bootstrap 4 use the Bootstrap Ruby gem if you use Ruby, and the main repo otherwise.

4を使いたかったらbootstrapgemを使ってね、とのことらしい

インストール

Gemfileに次のように記述してbundle install

gem 'bootstrap', '~> 4.0.0.alpha4'

app/assets/stylesheets/application.scssが存在することを確認。もしapplication.cssだったりしたらリネームしましょう。

app/assets/stylesheets/application.scssの末尾に次の行を追加

application.scss
@import "bootstrap";

app/assets/javascripts/application.jsに次の行を追加

application.js
//= require jquery
//= require bootstrap-sprockets

bootstrapを利用するページのhtml.erbのheadタグ内に次のように記述(app/view/layouts/application.html.erbとかに書くと良さそう)

application.html.erb
<%= csrf_meta_tags %>
<meta  name="viewport" content="width=device-width">
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

おまけ variablesの変更

@import 'bootstrap'を呼び出す前に変数を定義しておくと、その変数で上書きされるようです。

試しにこの青色のボタン(btn-primary)を桃色にしてみます。

<div class="btn btn-primary">ぼたん</div>

青ボタン.png

app/assets/stylesheets/application.scss@import 'bootstrap'の前に一行追加してみます。

application.scss
$brand-primary: #e87070 !default;
@import 'bootstrap'

桃ボタン.png

とても桃になりました。

参考: http://qiita.com/tonkotsuboy_com/items/1855734522bfe7ef7dad

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした