0

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

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

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

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

4

1 回答 1

4

您的选择之一是使用jlong​​ 的 sass 实现。请按照以下步骤设置 Bootstrap3 以使用 Rails 4（这是我的做法，也请查看此答案并检查此项目。）

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

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

第 3 步：转到您的 rails4vendor/assets/stylesheets文件夹并创建一个文件夹并调用它bootstrap。bootstrap现在将您一秒钟前复制的内容粘贴到此文件夹中。因此，您的文件夹将如下所示：

在此处输入图像描述

还fonts从您从 repo 下载的解压缩 zip 文件中复制文件夹并将其添加到您的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 步（可选）：快乐的铁路带！

于 2013-09-03T21:30:47.253 回答