0
0

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 1 year has passed since last update.

RailsにBootstrapを導入

Posted at

Bootstrapをgemでインストール

RailsでBootstrapを使う場合は、gemを使ってインストールする

Gemfile

gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'
$ bundle install

SCSSファイルを作成

application.cssをapplication.scssというファイル名に変更する。

ファイル名を変更したら、実際にファイルを開いて、= require_tree .と= require_selfを削除し、@import "bootstrap";を追記

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .    <(削除)
 *= require_self      <(削除)
 */
@import "bootstrap";  <(追加)

JSファイルを修正

  • Bootstrapで使われる「JavaScript」や「jQuery」などの関連ファイルを読み込む設定する。

app/assets/javascripts/application.jsを開き、以下を参考に元々あったコードの上に追記

# 以下の3つを追記
//= require jquery3
//= require popper
//= require bootstrap

# 元々あったコード
//= require rails-ujs
//= require activestorage
//= require turbolinks
  • 最後に、Rails(Puma)を再起動する
0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?