css - Rails-错误的CSS样式

对rails还不熟悉，我正在尝试更改默认布局。
当字段导致验证错误时，.field_with_errors类似乎总是被添加到我的表单中。默认的scaffold css定义为：
.field有错误{
衬垫：2倍；
背景色：红色；
显示：表格；
}
我的问题是：为什么还要使用这个field_with_errors？它是从哪里来的？与id为.field_with_errors的div相同，可以打印成功消息。这是从哪里来的？…从我的研究来看，这两个都来自notice。
但是如果我想用我自己的定制风格做这些呢？我必须在application.css.scss文件中编写自己的ActionView::Helpers和.fields_with_errors类吗？我试过了，结果成功了…但为什么我要把自己囚禁在那些班级的名字里呢？如果我想叫他们别的什么呢？我能做这个吗？
其次，假设我现在有了自己的定制css类（假设这是可能的——我希望是这样的）。如果我想对它们应用引导样式呢？例如，bootstrap将使用notice，而rails的scaffold将默认使用<div class="alert alert-success">。如果不使用与twitter的<div id="#notice">相同的css代码简单地创建自己的样式，我如何才能以最优雅的方式进行这样的更改…在sass中（或者通过rails）没有办法说，成功消息是用xyz样式打印的，错误字段是用abc样式打印的……比如在一些配置文件中？
谢谢！

最佳答案

我能做这个吗？对.
额外的代码由ActionView::Base.field_error_proc添加。如果您想调用其他内容，而不使用field_with_errors来设置窗体的样式，则应在config/application.rb中覆盖它。

config.action_view.field_error_proc = Proc.new { |html_tag, instance|
     "<div class='your class'>#{html_tag}</div>".html_safe
}

重新启动服务器
其次，如果要对它们应用引导样式，可以将选择样式保存在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

创建文件layouts/_flash_message.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，只需在视图中渲染

<%= render 'layouts/flash_messages' %>

例子
打开accounts_controller.rb创建操作

  def create
  @account = Account.new(params[:account])
  if @account.save
     # using :success if @account.save
     flash[:success] = "Success."
     redirect_to accounts_url
  else
    flash[:alert] = "Failed."
    render :new
  end
  end

在accounts/index.html.erb中放在accounts/_form.html.erb的顶部和窗体的顶部

  <%= render 'layouts/flash_messages' %>

索引结果：

<div class="alert alert-success">
   <button type="button" class="close" data-dismiss="alert">×</button>
   Success.
</div>

表格上的结果：

 <div class="alert alert-error">
     <button type="button" class="close" data-dismiss="alert">×</button>
     Failed.
 </div>