4

Rails 新手，正在尝试更改默认布局。

当一个字段导致验证错误时，该类似乎.field_with_errors总是被添加到我的表单中。默认的脚手架 CSS 定义field_with_errors为：

.field_with_errors {
  填充：2px；
  背景颜色：红色；
  显示：表格；
}

我的问题是：为什么还要使用这个.field_with_errors？它甚至来自哪里？与 ID 为的 div 相同notice以打印成功消息。这是从哪里来的？...从我的研究来看，这两个都来自某个地方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 样式打印……就像在某些配置文件中一样？

谢谢！

4

2 回答 2

6

我可以这样做吗？是的。

额外的代码正在添加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>
于 2013-05-30T17:07:10.397 回答
0

在我看来，@anonymousxxx 的答案似乎是正确的。

我建议您为您的 css 使用 twitter-bootstrap-rails gem ( https://github.com/seyhunak/twitter-bootstrap-rails )。查看github上的readme，这个gem真的很方便。

于 2013-05-30T17:14:19.537 回答