bootstrap-sass-3.0.2(Twitter bootstrap 3.0.2)で flash メッセージの alert-error が赤枠表示にならない対策

Rails4 で Twitter bootstrap 用の gem に bootstrap-sass を使っているのですが、bootstrap-sass-3.0.2.0(Twitter bootstrap 3.0.2.0 の sass)を使うと、flash メッセージで alert-error のCSSクラスを指定した場合に、alert-error のメッセージボックスが赤色の枠で囲まれなくなりました。

スポンサーリンク

bootstrap-sass-3.0.2 のソースを調べたところ…

vendor/bundle/ruby/2.0.0/gems/bootstrap-sass-3.0.2.0/
vendor/assets/stylesheets/bootstrap/_alerts.scss

alert-success はこれまで通りあるものの alert-error の定義がありません。

bootstrap-sass-2.3.2.0(Twitter bootstrap 2.3.2.0)と同じ表示にする

bootstrap-sass-2.3.2.0 のソースでは、以下のようになっていまして、alert-danger と alert-error の中身が同じものとなっている。

なので、bootstrap-sass-3.0.2.0 で flash メッセージを同様の表示にするためには、エラーの場合に alert-error ではなくて alert-danger を css のクラスとして指定する必要があります。

あるいは、CSSクラスを alert-error のままにするなら、独自に alert-error を定義する。

app/assets/stylesheets/custom.css.scss

Devise を使っている場合

認証に Devise を利用しているため、私は以下のように layouts のテンプレートに追加しました。Devise は flash メッセージの key として、成功した場合は notice、エラーの場合は alert を返しますので。

app/views/layouts/application.html.erb

以上を flash メッセージを表示させたい場所に追加します。独自に alert-error のCSSクラスを定義した場合は、danger の部分を error にしても良い。これで bootstrap2 と同様に、成功したら緑枠、エラーなら赤枠の flash メッセージが表示されます。

スポンサーリンク
パーフェクト Ruby on Rails は、最近読んだ Rails 本の中では一番役に立った本です。Chef や Capistrano など Rails と共によく使用される技術にも触れてあります。Ruby on Rails 4 アプリケーションプログラミングは、入門的な内容で Rails の機能全体を網羅されています。
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!