1

我正在使用 twitter bootstrap、rails 3.2.1 和 twitter-bootstrap-rails gem (https://github.com/seyhunak/twitter-bootstrap-rails) 制作主页。

想要尝试不同于经典 twitter 的外观，并从 bootswatch.com 找到了一个名为“United”的出色模板。

我下载了四个文件（bootstrap.css / bootstrap.min.css / variables.less / bootswatch.less）。

如何将这些文件合并到资产管道中？

这是我的“app/assets”目录中的列表（文件由 twitter-bootstrap-rails gem 生成）。

/images/rails.png
/javascripts/application.js
/javascripts/bootstrap.js.coffee
/javascripts/products.js.coffee
/stylesheets/application.css
/stylesheets/bootstrap_and_overrides.css.less

我没有线索。

4

3 回答 3

2

我使用相同的 gem (bootstrap-sass-rails)，有时我会从 bootswatch 下载自定义主题。我的方法很简单：

  • 我只下载 variables.less 文件，检查我需要哪些变量（颜色、字体等），然后将它们转换为 SCSS 语法

  • 在上面定义的变量之后，我使用 SCSS 语法（而不是 //= require ）来要求引导组件（通常不需要所有捆绑包）

这是一个简单的例子：

// Navbar
$navbarBackground:                #DD4814;
$navbarBackgroundHighlight:       #CE4213;
// other vars...

@import "twitter/bootstrap/variables";
@import "twitter/bootstrap/mixins";
@import "twitter/bootstrap/reset";
@import "twitter/bootstrap/scaffolding";
@import "twitter/bootstrap/grid";
@import "twitter/bootstrap/layouts";
// etc...

这样，您将以更小的 CSS 和更多自定义方式结束。

于 2012-03-29T09:53:38.770 回答
1

如果您检查 bootswatch 的安装系统，您只需要在网站上下载 bootstrap.min，然后将其添加到您的 application.css

//= require bootstrap.min.css

您也可以删除所有引导要求。

于 2012-03-29T07:55:46.567 回答
0

这个 gem 也使用较少，但它使集成自定义 twitter 引导模板更容易：

https://github.com/scottvrosenthal/twitter-bootswatch-rails

于 2013-08-06T04:54:35.790 回答