Question

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

想要尝试除经典推特之外的其他外观，并从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

我不知道。

Answer 1

我使用相同的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以及更多自定义方式。

Answer 2

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

//= require bootstrap.min.css

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

Answer 3

这个gem使用的更少，但更容易集成自定义Twitter引导程序模板：

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

如何将（静态）引导程序模板合并到rails资产管道中？

3 个答案: