Rails - 错误CSS样式

新的rails，我正在尝试更改默认的布局。Rails - 错误CSS样式

似乎.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类（假设它是可能的 - 我希望它是这样）...如果我想对它们应用引导样式，该怎么办？例如，引导程序将使用<div class="alert alert-success">，其中Rails的脚手架将默认使用<div id="#notice"> ...如何以最优雅的方式进行此类更改，而无需使用与Twitter的alert alert-success相同的CSS代码制作自己的样式.... Isn'在SASS中（或通过Rails以某种方式）说，成功消息用XYZ样式打印，错误字段用ABC样式打印 ...也许在某些配置文件中？

谢谢！

来源

2013-05-30 Ricky

我可以这样做吗？是的。

额外的代码正在被添加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 p和对形式的顶部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-30 17:07:10

感谢您的详细回复。我正在尝试第一部分来重写样式，但它似乎不起作用。我将代码放在我的application.rb文件中，完全按照您的要求，并将该类更改为我的自定义类。当我再次渲染页面时，它仍然将'field_with_errors'显示为错误类名称，而不是我在该笔记上插入'error_fields' – Ricky

的自定义类别......覆盖这些默认样式的正确做法是什么？例如，我认为默认布局不足以满足任何想要良好用户界面的人:-)那么人们通常会如何重写它呢？标准做法是否会覆盖过程？或者，人们只是将'.fields_with_errors'作为类并将它们写在CSS上呢？ – Ricky

您是否在将服务器添加到'application.rb'之后重新启动服务器？ –

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

我会建议你为你的css使用twitter-bootstrap-rails gem（https://github.com/seyhunak/twitter-bootstrap-rails）。看看github上的自述文件，这个宝石真的很方便。

来源

2013-05-30 17:14:19 Mattherick

Rails - 错误CSS样式

回答

相关问题