在 Rails 中自定义 Bootstrap3 的最佳方法是什么？ [关闭]

Question

Twitter Bootstrap 3 最近发布了。我们将在一个新项目中使用并对其进行自定义以满足我们的需求。

以下是我们在过去 2 个项目中遇到的一些问题。

• 由于 TB 是用 LESS 编写的，除非有可靠的 SASS 版本，否则会花费一些时间
• 在使用不稳定的 SASS 版本时，我们发现样式被多次导入 - 这可能是由于旧的 SASS 错误导致多次包含相同的文件
• 我们无法使用 gem 中的 SASS 版本使用“包含一次”解决方法
• 我们发现我们能做的最好的事情就是从构建器那里构建 TB，但是……
• 我们需要做很多工作才能进行简单的修改，例如自定义导航栏，因为我们不能只覆盖默认变量

我们正在寻找一种可以减少自定义 Bootstrap 问题的解决方案。你的经验是什么？你使用什么策略？你试过在 Rails(4) 中使用 TB3 吗？

Answer 1

您的选择之一是使用jlong's sass implementation。按照以下步骤设置 Bootstrap3 以与 Rails 4 一起使用（这是我的做法，也请查看此 answer 并查看此 project。）

第 1 步：从 jlong​​s 存储库下载 zip。

第二步：解压文件并复制lib文件夹的所有内容。

第 3 步：转到您的 rails4 vendor/assets/stylesheets 文件夹并创建一个文件夹并将其命名为 bootstrap。现在将您一秒钟前复制的内容粘贴到此bootstrap 文件夹。所以你的文件夹看起来像这样：

同时从您从 repo 下载的解压 zip 文件中复制 fonts 文件夹并将其添加到您的 vendor/assets/stylesheets 文件夹中：

第 4 步：转到您的 app/assets/stylesheets 文件夹并创建一个文件并将其命名为任意名称，例如 main.scss 并将以下内容添加到其中：

@import "../../../vendor/assets/stylesheets/bootstrap/bootstrap.scss";

第 5 步：使用此文件开始覆盖引导程序。例如：

@import "../../../vendor/assets/stylesheets/bootstrap/bootstrap.scss";
$grid-columns:              16;
$grid-gutter-width:         2px;
.left{
    @include make-lg-column(8);
}
.right{
    @include make-lg-column(8);
}

section{
    @include make-row();
}

示例 HTML 文件：（例如 about.html.erb）

<div class="container">
  <sction>
    <div class="left">
      <div class="well">
        <h1>hello</h1>
      </div>
    </div>
    <div class="right">
      <div class="well">
        <h1>hello</h1>
      </div>
    </div>
  </section>

</div>

结果

第 6 步（可选）：快乐的搭铁！