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

初めてのRuby on rails Bootstrap導入編 [Memo for neko]

More than 1 year has passed since last update.

Ruby on railsの勉強の今回はbootstrap導入について簡単にメモを残しておきます。

(なぜなら、勝手に、一人で手こずってしまって時間がかかってしまったので...)
方法は、いくつかあるかと思いますが、今回は"「bootstrap-sass」"でやりました。

==環境==
・PC:Macbook Pro (Retina)
・macOS High Sierra
・rails: 5.1.6
・bootstrap: bootstrap 4.0.0-alpha.3

==導入流れ(簡略)==
1.Gemfileへ追加
2.「bundle install」をterminalにて唱える
3.application.scssを編集
4.application.jsを編集
5.Bootstrapの確認用にindex.html.erbを編集
6.server再起動
7.Bootstrapが導入されているかを確認

==導入の流れ==

1. Gemfile


Gemfileに以下を追加
application.js
gem 'bootstrap', '~> 4.1.1'

保存。

gem.png

terminalへ行って、「bundle install」を唱える
(↑↑↑これとっても重要!!!)

application.scss

app>assets>stylesheets>application.cssをエディッターで開き編集
以下を追加

application.css
@import "bootstrap"; 

保存。

scss.png

+ファイル名を変更:application.css → application.scss

application.js

app>assets>javascripts>application.jsをエディッターで開き編集
以下を追加

application.js
//= require bootstrap

保存。

Bootstrapの確認

app>assets>views>pages>index.html.erbをエディッターで開き編集
以下を追加(これは、Bootstrapのサイトにあるテストコードを使用するのが良い)

index.html.erb
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

[bootstrap button sample] https://getbootstrap.com/docs/4.1/components/buttons/

+server再起動

Ruby on railsにBootstrapが導入されているか確認

サイトを確認:)

[Before]
スクリーンショット 2018-07-05 15.20.11.png

[After]
スクリーンショット 2018-07-05 15.13.55.png

これでやっとできました。
(できると思います。。。)

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
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