5

ある日、私はTwitterBootstrapを試してみることにしました。それは素晴らしく巧妙に作られていることがわかりましたが、私は私のhtmlを汚染しているすべてのクラスのファンではありません。

だから私はそれをよりセマンティックにするためにLessを使用しようとしています。.containerクラスにステップオーバーするまで、私はかなりうまくいっていました。「mixins.less」ファイル（580行目）には、コンテナの幅を設定するミックスインがあります。しかし、クラスを直接htmlに含めずに動作させることはできません。カスタムファイルに入れると、常にコンパイルエラーが発生します。それをコピーしてファイルに挿入しようとしましたが、成功しませんでした...誰かがこれを経験しましたか？

もちろん、手動で幅を強制することもできますが、それが最善のアプローチではないと思います。何か案は？

4

2 に答える 2

6

これは私が今まで見つけた中で最高の治療法です。著者の例からの借用:

ほとんどの人はこれを使用します：

<div class="row">
  <div class="span6">...</div>
  <div class="span6">...</div>
</div>

あなたが私のような人なら、あなたはこれに到達しようとしています：

<!- our new, semanticized HTML -->
<div class="article">
  <div class="main-section">...</div>
  <div class="aside">...</div>
</div>

<!-- its accompanying Less stylesheet -->
.article {
  .makeRow();        // Mixin provided by Bootstrap
  .main-section {
    .makeColumn(10); // Mixin provided by Bootstrap
  }
  .aside {
    .makeColumn(2); // Mixin provided by Bootstrap
  }
}
于 2012-06-28T06:43:39.977 に答える
1

上記の回答の問題は、makeRow() および makeColumn() ミックスインが応答しないことです。セマンティックなクラス名を書くことを楽しみにしていましたが、例えば行やスパン 6 オフセット 1クラス名を書くときのように結果が表示されませんでした。

詳細については、 https://github.com/twitter/bootstrap/issues/2242を確認してください。

于 2012-11-02T04:18:15.383 に答える