Twitter Bootstrapの学習を開始し、自分のサイト（フォーム要素から始まる）にマージしたいと思いますが、そのまま含めるとサイトの残りの部分が壊れます。twitterブートストラップのすべてのセレクタにあらかじめ接頭辞を付けないでください
私は徐々にそのように、ブートストラップスタイルのコンテンツを追加できるようにセレクタのすべての接頭辞したい：私は学ぶために始めているので<div class="bootstrap"><!-- bootstrap styled stuff here --></div>
、私は本当に可能ですか分かりませんlessである。私は手作業でセレクタプレフィックスを実行しましたが、これをlessで行う方法があるのか不思議ですので、必要なブートストラップコンテナでそれを分離しながらブートストラップを修正することでそれを学ぶことができます。
今のところ、少ないファイルをコンパイルした後、2番目の手順で接頭辞を追加する必要があります。
ありがとうございました！
あなたは、ファイルbootstrap.lessを編集して、このようなもので、すべてをカプセル化することができます：
// list-group.less (bootstrap 3.0.0)
.list-group-item {
[...]
a& {
[...]
}
}
：
.bootstrap {
// CSS Reset
@import "reset.less";
// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
[...]
}
を更新
上記のコードをコンパイルすると、意味的に間違っていて、プレフィックスが.bootstrapでないルールになります。
01それは、ブートストラップをコンパイルするために、次を使用し固定するためにa.bootstrap .list-group-item {
color: #555555;
}
a.bootstrap .list-group-item .list-group-item-heading {
color: #333333;
}
a.bootstrap .list-group-item:hover,
a.bootstrap .list-group-item:focus {
text-decoration: none;
background-color: #ecf0f1;
}
：これは本当にの問題に対処しない
.bootstrap a .list-group-item {
color: #555555;
}
.bootstrap a .list-group-item .list-group-item-heading {
color: #333333;
}
.bootstrap a .list-group-item:hover,
.bootstrap a .list-group-item:focus {
text-decoration: none;
background-color: #f5f5f5;
}
：
$ lessc bootstrap.less | sed -e 's/\(.\+\).bootstrap \(.\+\)/.bootstrap \1\2/g' > output.css
今、上記の行がにコンパイルされます名前の競合。すべてのブートストラップCSSクラスの前にセレクタとして特定のクラスを配置します。したがって、それらを使用するには、コンテナ（DIVなど）内にHTMLをその特定の名前のクラスでラップする必要があります。その後、ブートストラップCSSはそのDIV内でのみ適用されます。これにはいくつかの問題があります。
Bootstrap CSSには、BODYとHTMLの定義が含まれています。セレクタを前に置くと、それが適用されません。
カスタムCSSでは、いくつかのスタイルを ".dropdown"や ".table"のようなBootstrapクラスで定義することもできます。ブートストラップによって定義されていないスタイルの側面を定義し、ブートストラップスタイルをオーバーライドするか、またはそれらを混乱させる可能性があります。たとえば、Bootstrapが ".table"クラスのパディングを定義し、独自の ".table"クラスでマージンを定義すると、ページがレンダリングされるときにCSSの優先度規則に従って結合されます。 Bootstrapの ".table"クラスの前に特定のカスタムセレクタクラスを配置し、独自の ".table"クラスの前に別のセレクタクラスを配置しても、それらは結合して相互作用します。
このようなセレクタクラスを使用することは、実際には「名前空間」ではなく、CSSを完全に分離することではありません。実際の分離を実現する最善の方法は、各クラス名の前に一意の接頭文字列を付けることです。その後、
.bootstrap {
@import (less) 'dist/css/bootstrap.css';
@import (less) 'dist/css/bootstrap-theme.css'; /* optional */
}
sedコマンドは必要ない：中bootstrap.cssをコンパイルが再コンパイルされることを、独自のprefixed-bootstrap.lessを作成します。periklisの答えで述べた問題を回避するために
。 Lars Nielsenの答えに記載されている観察はもちろん有効です。
ハ、私はそれがとても素晴らしいことを知っていた！ Periklisありがとうございます。 –