Rails - 错误CSS样式

Question

对rails很新,我正在尝试更改默认布局.

.field_with_errors当字段导致验证错误时,似乎该类始终被添加到我的表单中.默认的脚手架CSS定义field_with_errors为:

.field_with_errors {
  padding: 2px;
  background-color: red;
  display: table;
}

我的问题是:为什么甚至使用这个.field_with_errors？它甚至来自哪里？与ID notice为打印成功消息的div相同.这是从哪里来的？......从我的研究中,这些都来自某个地方ActionView::Helpers.

但是,如果我想使用自己的自定义样式呢？我是否必须在application.css.scss文件中编写自己的类.fields_with_errors和notice类？我尝试了这个并且它有效...但为什么我要把自己监禁到那些类名？如果我想给别人打电话怎么办？我可以这样做吗？

其次,假设我现在有自己的自定义CSS类(假设它是可能的 - 我希望它是这样的......)如果我想为它们应用引导样式怎么办？例如,bootstrap会使用<div class="alert alert-success">Rails的脚手架默认使用的地方<div id="#notice">......我怎么能以最优雅的方式进行这样的更改,而不是简单地用与Twitter相同的CSS代码制作我自己的风格alert alert-success....是不是有一个在SASS(或通过Rails某种方式)说,成功消息用XYZ样式打印,错误字段用ABC样式打印 ...就像在某些配置文件中？

谢谢!

Answer 1

我可以这样做吗？是.

额外的代码正在添加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>

并调用刚刚在视图中渲染的闪光灯

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