Devise への Bootstrapの適用

Devise の画面への bootstrap の適用

Devise で作ったログイン画面に bootstrap を適用してきれいにしていきます。

手順としては以下の通り

  1. 認証用モデル個別の View を作る
  2. devise の設定で個別の View を使うように設定
  3. bootstrap のインストール
  4. 作った View を bootstrap 対応に書き換え

 

認証用モデル個別の View を作る

以下のコマンドを実行することで、app/views/users 以下に個別 View が作成されます。

 

Devise の設定を個別 View を使用するように変更

config/initializers/devise.rb を編集して、個別 View を使うように変更します。

 

bootstrap のインストールと設定

最初のインストールで bootstrap 自体はインストールしているので、設定を行う。

手順としては以下の通り。

  1. app/assets/stylesheets/application.css から application.scss に変更
  2. application.scss で bootstrap のための設定変更
  3. 同様に app/assets/javascripts/application.js で bootstrap のための設定変更

application.scss を編集

 

application.js を編集

ここまで来たら一回表示しなおしてみる。

 

bootstrap の適用

application.html.erb の変更

アプリケーション全体にbootstrapを適用するために、app/view/layout/application.html.erb を編集

このままだと、home#index の表示がぐちゃぐちゃなので、一旦 col-sm-12 で全体をくくる。

 

ログイン時の画面を bootstrap 化

 

ユーザ登録画面の bootstrap 化

 

ユーザ編集画面の bootstrap 化

ここまでの設定でそこそこのデザインのログイン関連の画面ができました。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です