3

http://bootswatch.com/のスタイルの 1 つを使用しようとしています。スタイルの .less バージョンを bootstrap.css に適用したいと思います。そうするために、 http://lesscss.org/#usageで説明されているように、次のことを行っています。

<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link href="variables.less" rel="stylesheet/less">
<link href="bootswatch.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>

しかし、うまくいきません。つまり、まだデフォルトのブートストラップ テーマを使用しています。

簡単にするために にマージvariables.lessしbootswatch.lessたので、コードは次のようになります。

<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootswatch.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>

それでも、デフォルトのブートストラップ テーマを取得します。

デバッガーで確認したところ、すべてのファイルが適切にリンクされているため、使用方法が間違っていると思います。

4

2 に答える 2

6

bootswatch の less ファイルを使用する場合は、bootstrap の less ファイルも使用する必要があると思います。このvariables.lessファイルは、元のファイルの値を上書きします。

それを機能させるために私がしたことは、ブートストラップの少ないファイルをダウンロードし、同じフォルダーにコピーすることです（ブートウォッチが最新でない場合、前方互換性のために名前を変更しbootswatch.lessました）。variables.lessvariables-bootswatch.less

次に、bootstrap.less前述のファイルを含めるようにファイルを変更しました。

// Header and everything before variables.less

@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "variables-bootswatch.less";

// everything else, then at the end

@import "bootswatch.less";

最後に、このファイルをインポートするだけです (CSS なし)。

<link href="bootstrap.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>

スウォッチ テーマを作成するためのプロジェクトが github に 1 つあるようです: swatchmaker on githubです。適切な CSS ファイルを生成する必要があります。

于 2012-11-03T13:00:07.960 に答える
0

次のようにスクリプトファイルの順序を変更する必要があると思います

<link href="bootstrap.css" rel="stylesheet" type="text/css">
<script src="less.js" type="text/javascript"></script>
<link href="bootswatch.less" rel="stylesheet/less">
于 2012-11-03T12:33:36.373 に答える