Bootstrap/Rails - 将 'close' 添加到快闪通知

Question

我一直在尝试自己解决这个问题，不必问，但我似乎找不到解决方案。

我的应用程序中有一个 flash 通知完美运行： 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' bootstrap 功能？..

即：

<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>

..但将其包含在我的 <%= %>

中

（显然不需要是上面的'warning' class，这个只是从bootstrap复制来的例子）

提前致谢！！

贾斯汀

@MattBricston ..我正在努力掌握关键==：通知？ 'success' : 'danger' 行，它只适用于 'success' 和 'danger' bootstrap 警报吗？..这只是一个问题还是添加：'warning' : 'info' 等??...

再次感谢，非常感谢:)

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 的 class 是 success 和 danger, 所以你必须做一些转换。
确保在页面上也包含 Bootstrap 的 JavaScript，以便 × 按钮真正起作用。

更新说明：

Rails里面的闪键可以随意。因此，您可以在控制器中使用 :success、:info、:warning，并在标记中直接将它们用作 Bootstrap classes，无需任何转换即可获得所需的内容风格。

然而，根据我的经验，Rails 的一些第三方 gem（我认为包括 Devise）使用 :notice 和 :alert 作为他们的 flash 消息键。因此，将这两个翻译成适当的 Bootstrap class 名称可能仍然是一个好主意，如我的示例所示。

Answer 2

  <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>

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

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 %>

Answer 4

根据Bootstrap 5

在application_helper.rb | _notices.html.erb在下方评论

def bootstrap_class_for(flash_type)
{
  success: "alert-success",
  error: "alert-danger",
  alert: "alert-warning",
  notice: "alert-info"
}.stringify_keys[flash_type.to_s] || flash_type.to_s

结束

Bootstrap/Rails - 将 'close' 添加到快闪通知

Bootstrap/Rails - Adding 'close' to flash notice

alert

ruby-on-rails

twitter-bootstrap