9

400 以上のサイトを網羅し、以前の CSS クラス名 (制御できない) を使用するプロジェクトで Bootstrap を使用しようとしています。私はいくつかの CSS 名の衝突に遭遇しており、私にとっての解決策は、Bootstrap にプレフィックスを追加することです (たとえば、.row を .tb-row に追加します)。

私は、LESS を使用して名前空間を追加する方法に精通しています。この方法では、追加のクラスがクラスにラップされます。残念ながら、これは私の問題を解決するようには見えません。

Bootstrap の既存のすべてのクラスに tb- プレフィックスを簡単に追加できるようにする、LESS、SASS、またはその他のコンパイラを介した方法はありますか?

4

3 に答える 3

17

おそらくSASSでこれを行うことができます

  • $namespace: "tb";
  • ⌘ + f(または同様のもの) を使用して、CSS ファイル内のすべてのクラスを検索します。それらをすべて見つけるには、おそらく正規表現（および試行錯誤）が必要になるでしょう。
  • .#{$namespace}-すべてのクラスに追加します。

理想的には、次のようなものを取得します。

$namespace: "tb";

.#{$namespace}-myClass {
  background:pink !important;
}

.#{$namespace}-carousel-module {
  width: 25%;
}

にコンパイルされた

.tb-myClass {
  background:pink !important;
}

.tb-carousel-module {
  width: 25%;
}

「簡単」というと大袈裟かもしれませんが、「もっと簡単」がぴったりです。

これが最善のアプローチであるかどうかはわかりません。正直なところ、私は自分よりもはるかに賢い人々からのコメントで見た要点をはぎ取っているだけです。しかし、あなたにとっては便利かもしれません！

于 2013-06-25T16:50:50.707 に答える
10

ブートストラップ コードを直接変更する必要があります。これは、less でエレガントに実現する方法の例です。

.prefixname {
    &-row { 
        ...
    }  
}
于 2013-11-16T22:39:19.013 に答える
0

v3.1.0 ですべてのブートストラップ クラス (LESS 用) にプレフィックス "tb-" を追加しました。したがって、少ないファイルをコンパイルすると、「.tb-btn」のようなものが得られます https://github.com/TimothyGuo/tb--prefix-for-Bootstrap-v3.1.0--LESS-で私のプロジェクトをフォークできます

于 2014-02-06T04:24:08.127 に答える