1

twitter ブートストラップ、rails 3.2.1、twitter-bootstrap-rails gem (https://github.com/seyhunak/twitter-bootstrap-rails) でホームページを作っています。

従来の twitter とは異なる外観を試してみたくて、bootswatch.com の「United」という素晴らしいテンプレートを見つけました。

4 つのファイル (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 構文に変換します。

  • 上で定義した変数の後、( //= require の代わりに) SCSS 構文を使用して、ブートストラップ コンポーネントを要求します (通常、すべてのバンドルは必要ありません)。

簡単な例を次に示します。

// 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

ブートウォッチのインストール システムを確認する場合は、Web サイトで 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 に答える