如何命名 Twitter Bootstrap 以便样式不冲突 [英] How to namespace Twitter Bootstrap so styles don't conflict

问题描述

我想使用 Twitter Bootstrap，但只在特定元素上使用，所以我需要想办法用我的前缀为所有 Twitter Bootstrap 类添加前缀，或者使用较少的 mixins.我还没有这方面的经验，所以我不太明白如何做到这一点.这是我尝试设置样式的 HTML 示例:

<h1>不要用 bootstrap 设置样式</h1><div class="bootstrap-styles"><h1>使用引导程序</h1>

在这个例子中，Twitter Bootstrap 会为 h1 设置正常的样式，但我想对应用 Twitter Bootstrap 样式的区域有更多的选择.

解决方案

结果证明这比我想象的要容易.Less 和 Sass 都支持命名空间(甚至使用相同的语法).当您包含引导程序时，您可以在选择器中执行此操作以命名它:

.bootstrap-styles {@import '引导';}

更新:对于较新版本的 LESS，方法如下:

.bootstrap-styles {@import (less) url("bootstrap.css");}

这里回答了一个类似的问题.

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>

In this example, Twitter Bootstrap would normal style both h1s, but I want to be more selective about which areas I apply the Twitter Bootstrap styles.

解决方案

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';
}

Update: For newer versions of LESS, here's how to do it:

.bootstrap-styles {
  @import (less) url("bootstrap.css");
}

A similar question was answered here.

这篇关于如何命名 Twitter Bootstrap 以便样式不冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！