Ruby on Rails5アプリをBootstrap4デザインにする

過去の記事「Ruby on Rails 5 簡単インストール手順( Ubuntu Server )」の説明の通りにRailsをインストールした後、RailsアプリをBootstrapデザインにしてみましょう。

Rails5アプリをBootstrap4デザインにする

Gemfileに以下を加えます。

その後、bundle installコマンドを入力します。

bundle_install

app/assets/stylesheets/application.cssを「application.scss」に名前を変更して以下の記述を加えます。

application.scssの以下の記述を削除します。

application.scssの「@import “bootstrap”;」の下に以下の記述を加えます。

app/assets/javascripts/application.jsに以下のように記述します。

これでBootstrapの設定が完了したので、ビューにBootstrapのクラスを指定します。
過去記事「Ruby on Rails 5 簡単インストール手順( Ubuntu Server )」で作成したUserモデルに対応したビューの新規登録画面を変更します。
「app/views/users/_form.html.erb」を編集します。

フィールドに「:class => ‘form-control’」を加えます。
Submitボタンに「:class => ‘btn btn-primary’」を加えます。

これでさっそくRailsサーバーを起動させて、「localhost:3000/users/new」にアクセスしてみましょう。

見た目がBootstrapデザインに変わったことがわかります。
■変更前:
users_new

■変更後:
rails5_bootstrap

ブラウザでソースを見てみると、boostrapのcssとjsを読み込んでいます。

以上でRuby on Rails5アプリをBootstrap 4デザインにする説明をおわります。


PAGE TOP