1

新しいプロジェクトでTwitter Bootstrap 3を使用していますが、(フレームワークとの結合を避けるために) HTML マークアップにブートストラップのクラスを埋め込まないようにしたいと考えています。そこで、ここで説明したようにLESSを使用することにしました。

私は次のようなものを試しました：

nav {
 .navbar;
 .navbar-fixed-top;
 .navbar-default;
}

期待どおりに動作しますが、Bootstrap のディストリビューションからtheme.lessを適用できません。優雅に行う方法はありますか？

4

1 に答える 1

0

デフォルトでは、theme.less は別の theme.css ファイルにコンパイルされます。したがって、theme.less は bootstrap.less にインポートされません。

たとえば、これをコンパイルします。

@import "variables.less";
@import (reference) "mixins.less";
@import (reference) "navbar.less";
@import (reference) "utilities.less"; // for pull-left()
@import (reference) "forms.less"; // for form-inline()
@import (reference) "theme.less";

nav {
 .navbar;
 .navbar-fixed-top;
 .navbar-default;
}

結果の CSS は、theme.less の .navbar-default で定義されているようにナビゲーションをスタイルします。

navbar.less の後に theme.less をインポートすることに注意してください

于 2013-11-16T23:12:23.760 に答える