如何使用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 bootstrap布局。 然后，當您准備好后，您可以將舊頁面遷移到新的布局模板。

Answer 2

我認為你需要改變css加載的順序..

在您的情況下，使用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