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

我正在将twitter bootstrap css集成到我的应用程序中。 顺其自然，但我不知道如何为我的flash消息自定义css和包装器。

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

 × 
Oh snap! Change this and that and try again.
  

目前我输出我的flash消息：

   "flash_#{name}" %>  

是否有一种简单的方法可以运行一个小的开关：通知或其他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

 
 <% flash.each do |key, value| %> 
 × <%= value %> 
 <% end %>  

区别：

• 每次调用时都不会循环遍历不同的错误级别。
• 如果散列包含消息，则循环遍历flash散列（遵循Michael Hartl的Rails教程中的方法 ）。
• 不使用

  标记，Bootstrap 2.0中不再需要 。

请记住包含bootstrap-alert.js，以便淡入淡出和关闭function起作用。 如果您正在使用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 （至少有时）以字符串forms出现，并且未能与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? %> 
 × <%= content_tag :p, flash[level] %> 
 <% end %> <% end %> 

这使您在关闭和关闭按钮时淡出。 如果你正在使用HAML，请查看这些人的post： 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

 
 <% flash.each do |key, value| %> 
 × <%= value %> 
 <% end %>  

区别：

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

Answer 4

试试这个：

application_helper.rb

 def flash_class(level) case level when :notice then "info" when :error then "error" when :alert then "warning" end end 

然后

 <% [:notice, :error, :alert].each do |level| %> <% unless flash[level].blank? %> 
 × <%= content_tag :p, flash[level] %> 
 <% end %> <% end %> 

Answer 5

Bootstrap 3类名（根据Mark Berry的回答调整）：

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

Answer 6

我建议为rails中使用的不同通知级别添加类：

 .alert-notice { background-color: #f2dede; border-color: #eed3d7; color: #b94a48; } 

等等

并根据twitter bootstrap中的示例使用它们：

 <% flash.each do |key, value| %> 
 × <%= value %> 
 <% end %> 

这使ApplicationHelper＃flash_class（level）过时了。 它将样式硬编码到应用程序中，闻起来很有气味。 样式属于样式表。

Answer 7

这不是理想的解决方案，但假设您只使用“通知”或“错误”闪存消息，您可以使用：

 ... <% content_tag :div, :id => "flash_#{name}", :class => "alert-message #{name == "notice" ? "success" : name}" do %> ... 

Answer 8

如果要完全改变flash消息的样式 – 例如，如果您不希望消息淡出，您甚至可以执行以下操作：

在你的控制器中：

 flash[:order_error] = "This is an important error that shouldn't fade!" 

然后比较闪存键以显示适当的样式（使用to_sym）：

 <% flash.each do |key, msg| %> <% if key == 'order_error'.to_sym %> 
<%= msg %>
 <% else %> 
<%= msg %>
 <% content_tag :script, :type => "text/javascript" do -%> setTimeout("new Effect.Fade('flash-<%= key %>');", 8000); <% end %> <% end %> <% end %>