Rails中特定于页面的css样式表(使用两个不同版本的twitter引导程序)



我已经启动了一个Rails项目,并在其中实现了bootstrap-sass。不久后,我发现了一个使用不同版本的twitter bootstrap的主题/模板。我已经将模板添加到应用程序中,但视图并没有像预期的那样完全对齐。然后,我将主题/模板附带的特定资产添加到我的项目中(例如jquery版本,另一个旧的引导程序版本),结果几乎是完美的。然而,仍然存在一些结盟问题。当我检查CSS时,我可以看到它是由于两个版本的引导程序之间的冲突而发生的。

我想我应该让这个模板只使用它附带的twitter引导程序版本。如果是这样,我该怎么做?如何使rails视图只使用某个css样式表而不从其他样式表中读取?

(如果这不是最好的解决方案,我应该考虑哪些替代方案?)

感谢

试试这个:

1) 使用两种布局(application.html.erb和new_application.html.erb)2) 有两个主javascript/css文件(application.js和new_application.js、application.css和new_aapplication.css)3) 在application.html.erb中包括第一个application.js和application.css,在第二个布局中导入新的应用程序js和css4) 对于页面的特定部分,在控制器上,继承所需布局的右父控制器。

class NewBootstrapController < ActionController::Base
layout 'new_application'
end
class OldBootstrapController < ActionController::Base
layout 'application'
end

最佳实践是尝试将项目视为由"组件"而非页面组成。因此,请注意保持组件的样式保持最新和一致。

因此,与其为单个页面编码(即使是小项目也难以扩展和维护),不如寻找将元素转化为可重用组件的方法。默认情况下,Bootstrap是这样的,因此,如果某些组件比其他组件使用得更多,请将其作为重构的优先事项,然后在页面中寻找重复的模式,并尝试思考如何创建基于组件的语义类来描述它们。

取而代之的是:

.sidebar-home {}

试试这个:

.sidebar-narrow {} // or whatever describes your element

这里的操作要点是,如果你要做的不仅仅是这个项目,养成将CSS/HTML视为由组件组成的好习惯,你将能够重用代码,并更快地识别UI中的模式。

相关内容

  • 没有找到相关文章

最新更新