如何应用自定义的Bootstrap消息错误设计？ [英] How to apply customized Bootstrap messages errors to devise?

问题描述

我对我的Rails4应用程序中的所有邮件应用Bootstrap3错误样式，这里（源） ）

I'm applying Bootstrap3 errors style to all messages in my Rails4 app, here (source)

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

  def flash_messages(opts = {})
    capture do
      flash.each do |msg_type, message|
        concat(content_tag(:div, message, class: "alert #{bootstrap_class_for(msg_type)} fade in") do 
          concat content_tag(:button, 'x', class: "close", data: { dismiss: 'alert' })
          concat message 
        end)
      end
      nil
    end
  end

在同一时间，我试图应用相同的样式Devise错误消息，但它不工作。
例如;在[views / devise / registration / new]中，您将看到<％= devise_error_messages！

In the same time I'm trying to apply same style to Devise error messages but it does not work. For example; within [views/devise/registration/new] you see <%= devise_error_messages! %> which it shows error messages without style.

如何应用Bootstrap风格（上面）来设计错误消息？

How could I apply Bootstrap style (above) to devises error messages?

推荐答案

覆盖 devise_error_messages！帮助方法

app / helpers / devise_helper.rb

app/helpers/devise_helper.rb

module DeviseHelper
 def devise_error_messages!
   return "" if resource.errors.empty?
   messages = resource.errors.full_messages.map { |msg| content_tag(:li, msg) }.join
   html = <<-HTML
     <div class="alert alert-error alert-block">
       #{messages}
     </div>
    HTML
  html.html_safe
end

没有使用任何css类，因此我们使用 alert-error 类，而您可以使用您的自定义类

Where the devise doesn't used any css class so we use alert-error class instead you can use your custom class

<div class="alert #{boostrap_class_for(:error)} alert-block">

这篇关于如何应用自定义的Bootstrap消息错误设计？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！