用于 Twitter Bootstrap 默认值的 Flash 消息的自定义类和格式 [英] Custom Classes and Formatting on Flash Messages for Twitter Bootstrap defaults

问题描述

我正在将 twitter bootstrap css 集成到我的应用程序中.一切顺利，但我不知道如何为我的 Flash 消息自定义 css 和包装器.

我希望使用默认的 Bootstrap 类格式化我的 Flash 消息:

 
<a class="close" href="#">×</a><p><strong>哦，啪！</strong>更改这个和那个，然后<a href="#">再试一次</a>.</p>

目前我输出我的 flash 消息:

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

是否有一种简单的方法可以运行一个小开关，使 :notification 或其他 Rails flash 消息映射到训练营中的类，例如信息?

解决方案

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

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

module ApplicationHelperdef flash_class(级别)案例级别.to_sym当 :notice 然后警报警报信息"当 :success 然后 "alert alert-success"当:错误然后警报警报错误"当:警报然后警报警报错误"结尾结尾结尾

app/views/layouts/application.html.erb 中的某处:

<%= render 'layouts/flash_messages' %>

app/views/layouts/_flash_messages.html.erb

<% flash.each do |key, value|％＞<div class="<%= flash_class(key) %>淡入"><a href="#" data-dismiss="alert" class="close">×</a><%=值%>
<%结束%>

差异:

• 不会在每次调用时遍历不同的错误级别.
• 如果散列包含消息(按照Michael Hartl 的 Rails 教程中的方法).
• 不使用 <p> 标签，no在 Bootstrap 2.0 中需要更长的时间.

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

//= 需要 bootstrap-alert

<小时>2012 年 8 月 9 日更新: 文件夹已更新.实际上，我将除助手之外的所有内容都放在 app/views/layouts 下，因为 flash_messages 仅用于 app/views/layouts/application.html.erb>.

2015 年 6 月 5 日更新: 更新到 Rails 4.2 后，我发现 level 是(至少有时)作为字符串输入并且无法匹配ApplicationHelper 中的 case 语句.将其更改为 level.to_sym.

I am integrating twitter bootstrap css into my application. Going along just fine,but I don't know how to customize the css and wrappers for my flash messages.

I would like my flash messages to be formatted with the default Bootstrap classes:

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

Currently I output my flash messages with:

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

Is there an easy way to run a little switch that would make :notification or other rails flash messages map to the classes in bootcamp, like info?

解决方案

My answer for Bootstrap 2.0 starts from the helpful answer by @Railslerner but uses different code in the partial.

app/helpers/application_helper.rb (same as @Railslerner's answer)

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

Somewhere in app/views/layouts/application.html.erb:

<%= render 'layouts/flash_messages' %>

app/views/layouts/_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>

Differences:

• Does not loop through different error levels each time it is called.
• Instead loops through the flash hash if the hash contains messages (following the approach in Michael Hartl's Rails Tutorial).
• Does not use the <p> tag, no longer required in Bootstrap 2.0.

Remember to include bootstrap-alert.js so the fade and close functionality will work. If you're using the bootstap-sass gem, add this line to app/assets/javascripts/application.js:

//= require bootstrap-alert

---

Update 8/9/2012: Folders updated. I actually put everything except the helper under app/views/layouts since flash_messages is only used in app/views/layouts/application.html.erb.

Update 6/5/2015: After updating to Rails 4.2, I discovered that level was (at least sometimes) coming in as a String and failing to match the case statement in the ApplicationHelper. Changed that to level.to_sym.

这篇关于用于 Twitter Bootstrap 默认值的 Flash 消息的自定义类和格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！