31
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

RailsへのBootstrap導入方法

Last updated at Posted at 2019-07-28

RailsへのBootstrap導入方法 備忘録

1. Gemfile

Gemfileに以下4点を追加する

gem "sass-rails", "~>5.0"
gem "bootstrap-sass", "~>3.3.6"
gem "jquery-rails"
gem "jquery-ui-rails"
スクリーンショット 2019-07-28 17.18.13.png ---------------------------------------

2. bundle update

ターミナルにて bundle update を実行


3. csccファイル変更

ファイル名変更
/app/assets/stylesheets/application.css から
/app/assets/stylesheets/application.scss

末に以下2点を追加

@import "bootstrap-sprockets";
@import "bootstrap";
スクリーンショット 2019-07-28 17.39.06.png --------------------------------------- ### 4. jsファイル変更

/app/assets/javascripts/application.js

以下2点を追加(図では13、18行目)

//= require jquery
//= require bootstrap-sprockets
スクリーンショット 2019-07-28 17.48.01.png ---------------------------------------

実際に使ってみる

https://getbootstrap.com/
今回はGemfileにてversion3系を指定したので、v3.3.7 を選択

スクリーンショット 2019-07-28 19.02.42.png

使いたいデザインを探して…

スクリーンショット 2019-07-28 19.22.35.png

htmlにclassを適用する

スクリーンショット 2019-07-28 19.19.47.png スクリーンショット 2019-07-28 19.24.13.png

無事にデザインが反映されました

31
23
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
31
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?