Todoistで見積時間から完了予定時刻を計算するChrome拡張機能

Ruby on Rails5にBootstrap4を導入する

どうも!hideyuk1(@hideyuk1_jp)です!

Ruby on Rails5にBootstrap4を導入してみましたので紹介します。

環境

  • macOS Mojave 10.14.4
  • ruby 2.5.0
  • rails 5.2.3
  • bootstrap 4.3.1

記事投稿時点で最新バージョンです。

導入方法

Gemfile

Gemfileに以下のコードを追加します。

今のRailsは標準でjQueryがインストールされていないため、Bootstrapを動かすためにはインストールする必要があるようです。

gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'

ターミナルでインストールします。

$ bundle install

最初間違えてbootstrap-sassというgemをインストールしましたが、こちらのgemはBootstrap3と2向けなので、Bootstrap4を使う場合はbootstrapをインストールする必要があります。

application.js

app⁩/assets⁩/⁨javascripts/application.js⁩に以下のコードを追加します。

//= require jquery3
//= require popper
//= require bootstrap-sprockets

application.css

app⁩/assets⁩/⁨stylesheets/application.cssをapplication.scssにリネームし、以下のコードを追加します。

@import "bootstrap";

ビフォーアフター

とりあえずNavbarだけ表示させている状態ですが、Bootstrap導入前だとこんな感じです。

Bootstrap導入後はちゃんとデザインが整いました。

もちろんドロップダウンもクリックで展開されるようになっています。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA