更新日: 2013年12月24日
Rails

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 のメッセージボックスが赤色の枠で囲まれなくなりました。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

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 {
  @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
}
.alert-info {
  @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
}
.alert-warning {
  @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
}
.alert-danger {
  @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
}

.alert-success {

@include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);

}

.alert-info {

@include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);

}

.alert-warning {

@include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);

}

.alert-danger {

@include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);

}

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 の中身が同じものとなっている。

.alert-danger,
.alert-error {
  background-color: $errorBackground;
  border-color: $errorBorder;
  color: $errorText;
}
.alert-danger h4,
.alert-error h4 {
  color: $errorText;
}

.alert-danger,

.alert-error {

background-color: $errorBackground;

border-color: $errorBorder;

color: $errorText;

}

.alert-danger h4,

.alert-error h4 {

color: $errorText;

}

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

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

app/assets/stylesheets/custom.css.scss

.alert-error {
  @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
}

.alert-error {

@include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);

}

Devise を使っている場合

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

app/views/layouts/application.html.erb

<% flash.each do |key, value| %>
  <% status = key == :notice ? "success" : "danger" %>
  <%= content_tag(:div, value, class: "alert alert-#{status}") %>
<% end %>

<% flash.each do |key, value| %>

<% status = key == :notice ? "success" : "danger" %>

<%= content_tag(:div, value, class: "alert alert-#{status}") %>

<% end %>

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

– 参考リンク –
Bootstrap error class is called alert-danger, not alert-error
bootstrap-sass
How to define Flash Notifications with Twitter Bootstrap Rails gem – Stack Overflow

パーフェクト Ruby on Rails は、最近読んだ Rails 本の中では一番役に立った本です。Chef や Capistrano など Rails と共によく使用される技術にも触れてあります。Ruby on Rails 4 アプリケーションプログラミングは、入門的な内容で Rails の機能全体を網羅されています。

パーフェクト Ruby on Rails

Ruby on Rails 4 アプリケーションプログラミング