Question

我一直在努力解决这个问题而不必问，但我似乎无法找到解决方案。

我的应用程序中有一个完美的闪光通知： application.html.erb摘录：

<body>

  <div class="container">
    <% flash.each do |key, value| %>
      <%= content_tag :div, value, class: "alert alert-#{key}" %>
    <% end %>

    <%= yield %>
  </div>

</body>

..我的问题是，有没有办法在上面的代码中添加'close'引导程序功能？..

即：

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>

..但包含在我的＆lt;％=％＆gt;

中

（显然不需要像上面那样的'警告'类，这只是从bootstrap复制的例子）

提前致谢!!

贾斯汀

@MattBricston ..我在努力把握关键==：通知？ “成功”：“危险”一线，它只适用于“成功”和“危险”引导警报吗？......只是一个问题或添加：'警告'：'信息'等等......

再次感谢，非常感谢：）

Answer 1

这个怎么样：

<% flash.each do |key, value| %>
  <% alert_class = case key
                   when :notice then "success"
                   when :alert then "danger"
                   else key
                   end %>
  <%= content_tag :div, class: "alert alert-#{alert_class}" do %>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <%= value %>
  <% end %>
<% end %>

请记住：

Rails闪存密钥为:notice和:alert，但Bootstrap的类为success和danger，因此您必须进行一些转换。
确保在页面上还包含Bootstrap的JavaScript，以便×按钮实际工作。

更新澄清：

Rails中的闪存键可以是您想要的任何内容。因此，您可以在控制器中使用:success，:info，:warning，并将其直接用作标记中的Bootstrap类，而无需进行任何转换即可获得所需的样式。

但是，根据我的经验，Rails的一些第三方宝石（包括Devise，我认为）使用:notice和:alert作为他们的flash消息密钥。因此，将这两者转换为适当的Bootstrap类名称可能仍然是一个好主意，如我的例子所示。

Answer 2

＆＃13;

  <div class="alert alert-info"> 
    <span class="glyphicon glyphicon-info-sign"> </span> 
    <strong> Sorry....! </strong> Something went wrong. 
    <button type="button" class="close" data-dismiss="alert"> &times; </button>
</div>

＆＃13;

这对我有用....请尝试一次。

Answer 3

我正在使用Bootstrap 4.0。将此添加到<%= yield%>

之前的应用程序布局中

<% if flash[:notice] %>
      <div class="alert alert-success">
          <button type="button" class="close" data-dismiss="alert">&times;</button>
          <%= flash[:notice]%>
      </div>
    <% elsif flash[:error]%>
      <div class="alert alert-danger">
          <button type="button" class="close" data-dismiss="alert">&times;</button>
          <%= flash[:error]%>
      </div>
     <% elsif flash[:alert] %>
      <div class="alert alert-warning">
          <button type="button" class="close" data-dismiss="alert">&times;</button>
          <%= flash[:alert]%>
      </div>
    <% end %>

Bootstrap / Rails - 添加“关闭”闪存通知

3 个答案: