Question

所以我在我的Rails应用程序中包含了stylesheet的URL，但它将所有内容都抛到了干扰中。

我把它包括在内：

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

我想要做的是在将类应用于html标记时应用Twitter样式。理想情况下，我想做的是让它甚至覆盖我的风格和风格。 sheet - 这是我整个应用程序的样式表。

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

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引导程序通常用于启动项目时，而不是可以完全插入现有项目的样式表而没有任何问题。

如果您想要包含例如表单和表格样式，则可以使用their LESS stylesheets。（using 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 supports LESS compilation

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

Answer 2

我认为您需要更改css loading的顺序..

在您的情况下使用bootstrap覆盖您的应用样式表

首先加载您的应用样式表，然后再加载bootstrap.css

 <%= stylesheet_link_tag :default %>

然后

 <%= stylesheet_link_tag  ('http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css', :media => 'all') %>

Answer 3

您可以从twitter github自定义工具Customize Bootstrap

中自定义引导程序

仅选择您选择的项目并下载自定义版本。

我也在寻找类似的东西，现在我做了并帮助了我很多。

Answer 4

你可以使用less或sass mixins来达到这个目的，boostrap提供了一些不错的选择。

例如：

<!- our new, semanticized HTML -->
<article>
  <section class="main">...</section>
  <aside></aside>
</article>

<!-- its accompanying Less stylesheet -->
article {
  .makeRow();

  section.main {
    .makeColumn(10);
  }

  aside {
    .makeColumn(2);
  }
}

有关详情，请参阅http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html，http://www.sitepoint.com/5-useful-sass-mixins-bootstrap/以及https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap/mixins demo

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

4 个答案: