如何将 Twitter 中的 Bootstrap 样式表与 Rails 中现有的样式表一起使用，而不弄乱一切？

所以我将 URL 添加到样式表 http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css在我的 Rails 应用程序中，但它让一切都变得混乱。

我这样包含它：

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

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

是否可以以简单的方式完成此操作，而不必修改我想要使用的每个元素的样式？

Look at http://twitter.github.com/bootstrap/1.4.0/bootstrap.css http://twitter.github.com/bootstrap/1.4.0/bootstrap.css，您会注意到它在根 html 元素上定义了重置和样式。

例如：

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

所以，如果你的 style.css 已经定义了一个样式h1或者如果您的布局需要h1如果有不同的边距，您的布局将不会像预期的那样。

Twitter 引导程序通常适用于启动项目时，而不是可以毫无问题地完全插入现有项目的样式表的东西。

另一种方法是使用他们的 LESS 样式表 https://github.com/twitter/bootstrap/tree/master/lib例如，如果您只想包含表单和表格样式。 （使用更少的 Bootstrap http://twitter.github.com/bootstrap/#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 重置。如果这对您不起作用，请考虑使用无预引导 http://markdotto.com/bootstrap/反而。笔记：Rails 3.1 支持 LESS 编译 https://stackoverflow.com/questions/7341676/using-less-in-a-rails-3-1-app

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