Twitter Bootstrap默认值的Flash消息上的自定义类和格式

Question

我正在将twitter bootstrap css集成到我的应用程序中.一直很好,但我不知道如何为我的flash消息自定义css和包装器.

我希望我的flash消息能够使用默认的Bootstrap类进行格式化:

    <div class="alert-message error">
      <a class="close" href="#">×</a>
      <p><strong>Oh snap!</strong> Change this and that and <a href="#">try again</a>.</p>
    </div>

目前我输出我的flash消息:

<% flash.each do |name, msg| %>
    <%= content_tag :div, msg, :id => "flash_#{name}" %>
<% end %>

是否有一种简单的方法可以运行一个小的开关:通知或其他rails flash消息映射到bootcamp中的类,如信息？

Answer 1

我对Bootstrap 2.0的回答从@Railslerner的有用答案开始,但在部分中使用了不同的代码.

app/helpers/application_helper.rb(与@ Railslerner的答案相同)

module ApplicationHelper
  def flash_class(level)
    case level.to_sym
    when :notice then "alert alert-info"
    when :success then "alert alert-success"
    when :error then "alert alert-error"
    when :alert then "alert alert-error"
    end
  end
end

在app/views/layouts/application.html.erb中的某个地方:

<%= render 'layouts/flash_messages' %>

应用程序/视图/布局/ _flash_messages.html.erb

<div>
  <% flash.each do |key, value| %>
    <div class="<%= flash_class(key) %> fade in">
      <a href="#" data-dismiss="alert" class="close">×</a>
      <%= value %>
    </div>
  <% end %>
</div>

区别:

• 每次调用时都不会循环遍历不同的错误级别.
• 如果散列包含消息,则循环遍历flash散列(遵循 Michael Hartl的Rails教程中的方法).
• 不使用Bootstrap 2.0中不再需要的<p>标记.

请记住包含bootstrap-alert.js,以便淡入淡出和关闭功能起作用.如果您正在使用bootstap-sass gem,请将此行添加到app/assets/javascripts/application.js:

//= require bootstrap-alert

2012年8月9日更新:文件夹已更新.我实际上将除了帮助器之外的所有内容放在app/views/layouts下,因为flash_messages它仅用于app/views/layouts/application.html.erb.

2015年6月5日更新:在更新到Rails 4.2之后,我发现level(至少有时候)作为String进入并且无法匹配ApplicationHelper中的case语句.改成了level.to_sym.

Answer 2

这是我对Bootstrap 2.0.0的回答

应用程序/佣工/ application_helper.rb

module ApplicationHelper
  def flash_class(level)
    case level
    when :notice then "alert alert-info"
    when :success then "alert alert-success"
    when :error then "alert alert-error"
    when :alert then "alert alert-error"
    end
  end
end

应用程序/视图/共享/ _flash_messages.html.erb

<% [:notice, :error, :alert].each do |level| %>
   <% unless flash[level].blank? %>
     <div class="<%= flash_class(level) %> fade in">
      <a href="#" data-dismiss="alert" class="close">×</a>
       <%= content_tag :p, flash[level] %>
     </div>
   <% end %>
<% end %>

这使您在关闭和关闭按钮时淡出.如果你正在使用HAML,请查看这些人的帖子:http://ruby.zigzo.com/2011/10/02/flash-messages-twitters-bootstrap-css-framework/

Answer 3

我根据Mark Berry的回答为Bootstrap 3.0添加了一个新的答案.警报的Bootstrap CSS位于http://getbootstrap.com/components/#alerts

应用程序/佣工/ application_helper.rb

module ApplicationHelper
  def flash_class(level)
    case level
    when :notice then "alert-info"
    when :success then "alert-success"
    when :error then "alert-danger"
    when :alert then "alert-warning"
    end
  end
end

应用程序/视图/布局/ _flash_messages.html.erb

<div>
  <% flash.each do |key, value| %>
    <div class="alert alert-dismissable <%= flash_class(key) %> fade in">
       <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
      <%= value %>
    </div>
  <% end %>
</div>

区别:

• 更改Bootstrap类以获取错误和警报.
• 添加.alert-dismissable并更改关闭按钮的代码.