Question

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

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

    <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哈希循环 approach in Michael Hartl's Rails Tutorial）。

在Bootstrap 2.0中不使用<p>标记no longer required。

请记住包含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 。< p>

2015年6月5日更新：在更新到Rails 4.2之后，我发现level（至少有时）作为字符串进入并且未能匹配案例陈述ApplicationHelper。将其更改为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

app / helpers / 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">×</button> <%= value %> </div> <% end %> </div>

的差异：

更改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? %>
    <div data-alert="alert" class="alert-message <%= flash_class(level) %> fade in">
      <a class="close" href="#">×</a>
      <%= content_tag :p, flash[level] %>
    </div>
  <% 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| %>
    <div class="alert alert-<%= key %>">
        <a href="#" data-dismiss="alert" class="close">×</a>
        <%= value %>
    </div>
<% end %>

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

Answer 7

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

...
<% 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!"

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

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

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

8 个答案: