如何命名Twitter Bootstrap的名称空间,以免样式冲突 [英] How to namespace Twitter Bootstrap so styles don't conflict
问题描述
我想使用Twitter Bootstrap,但仅在特定元素上使用,因此我需要找出一种方法为所有Twitter Bootstrap类添加前缀,或使用较少的mixins.我对此还没有经验,所以我不太了解该怎么做.这是我尝试设置样式的HTML的示例:
I want to use Twitter Bootstrap, but only on specific elements, so I need to figure out a way to prefix all Twitter Bootstrap classes with my prefix, or use the less mixins. I'm not experienced with this yet so I don't quite understand how to do this. Here's an example of the HTML that I'm trying to style:
<div class="normal-styles">
<h1>dont style this with bootstrap</h1>
<div class="bootstrap-styles">
<h1>use bootstrap</h1>
</div>
</div>
在此示例中,Twitter Bootstrap会正常设置两个h1
的样式,但是我想对我在哪些方面应用Twitter Bootstrap样式有更多的选择.
In this example, Twitter Bootstrap would normal style both h1
s, but I want to be more selective about which areas I apply the Twitter Bootstrap styles.
推荐答案
事实证明,这比我想象的要容易. Less和Sass都支持命名空间(甚至使用相同的语法).当包含引导程序时,可以在选择器中对其进行命名空间:
This turned out to be easier than I thought. Both Less and Sass support namespacing (using the same syntax even). When you include bootstrap, you can do so within a selector to namespace it:
.bootstrap-styles {
@import 'bootstrap';
}
更新:对于LESS的较新版本,请按以下步骤操作:
Update: For newer versions of LESS, here's how to do it:
.bootstrap-styles {
@import (less) url("bootstrap.css");
}
这篇关于如何命名Twitter Bootstrap的名称空间,以免样式冲突的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!