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

但是如果我想为这些使用我自己的自定义样式怎么办？我必须自己写吗 .fields_with_errors和 notice我的 application.css.scss 文件中的类？我尝试了这个并且它有效......但是为什么我必须将自己监禁在那些类名中？如果我想给他们起别的名字怎么办？我可以这样做吗？

其次，假设我现在有自己的自定义 CSS 类(假设这是可能的——我希望是这样)...如果我想对它们应用 Bootstrap 样式怎么办？例如，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>

并调用您刚刚在 View 中渲染的闪光灯

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