如何使用Twitter中的Bootstrap样式表和Rails中的现有样式表而不会搞乱一切？

Question

所以我在我的Rails应用程序中包含了样式表的URL ,但它将所有内容都抛入了haywire.

我把它包括在内:

<%= stylesheet_link_tag('http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css', 'style', 'css3buttons', 'jquery.lightbox-0.5', :media => 'all') %>

我想要做的是,当我将类应用于html标签时,应用Twitter样式.理想情况下,我想要做的是让它甚至覆盖我的"样式"表中的样式 - 这是我整个应用程序的样式表.

是否有可能以简单的方式完成此操作,而无需为我想要使用的每个元素修改样式？

Answer 1

看看http://twitter.github.com/bootstrap/1.4.0/bootstrap.css,你会发现它定义了root html元素的重置和样式.

例如:

h1 {
  margin-bottom: 18px;
  font-size: 30px;
  line-height: 36px;
}

因此,如果您的style.css已经定义了样式,h1或者如果您的布局期望h1具有不同的边距,那么您的布局将不会像预期的那样.

Twitter引导程序通常用于启动项目时,而不是可以完全插入现有项目的样式表而没有任何问题.

另一种方法是使用它们的LESS样式表,如果你想要包括,例如,只包括表单和表格样式.(使用Bootstrap with Less).

<link rel="stylesheet/less" type="text/css" href="lib/tables.less">
<link rel="stylesheet/less" type="text/css" href="lib/forms.less">
<script src="less.js" type="text/javascript"></script>

您不想使用,lib/boostrap.less因为包含所有内容,但您可以包含适合您的其他LESS样式表.请注意,仅包含twitter boostrap的子集,可能无法按预期工作,特别是如果您没有定义css重置.如果这对您不起作用,请考虑使用Preboot.less.注意:Rails 3.1支持LESS编译

如果您仍想在应用程序中使用完整的twitter bootstrap css,则可以创建一个使用twitter引导程序的新的rails布局模板.然后,使用twitter boostrap构建新页面,指定render :layout => "boostrap"或类似的东西让您的新页面使用twitter引导程序布局.然后,当您准备好后,您可以将旧页面迁移到新的布局模板.