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

Question

最近发布了Twitter Bootstrap 3。我们将在一个新项目中使用它并根据我们的需求进行定制。

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

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

我们正在寻找一种解决方案，使自定义Bootstrap更少问题。你有什么经历？你用什么策略？你试过在Rails（4）中使用TB3吗？

Answer 1

您的一个选择是使用jlong's sass implementation。按照以下步骤设置Bootstrap3以使用Rails 4（这是我的方式，同时查看此answer并同时结帐 project 。）

第1步：从jlong​​s repo下载 zip 。

步骤2：解压缩文件并复制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步（可选）：快乐轨道！