如何命名Twitter Bootstrap的名称空间，以免样式冲突

Question

我想使用Twitter Bootstrap，但仅在特定元素上使用，因此我需要找出一种方法，用我的前缀为所有Twitter Bootstrap类添加前缀，或使用较少的mixins。我对此还没有经验，所以我不太了解该怎么做。这是我尝试设置样式的HTML的示例：

<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样式有更多选择。

Answer 1

您还需要注意，引导程序会修改主体{}，主要是为了添加字体。因此，当您通过LESS / SASS对其命名空间时，您的输出css文件如下所示：（在引导程序3中）.bootstrap-styles body {&nbsp; &nbsp; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;&nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; line-height: 1.428571429;&nbsp; &nbsp; color: #333333;&nbsp; &nbsp; background-color: white;}但很明显，div内不会有body标记，因此您的引导程序内容将没有引导程序字体（因为所有引导程序都从父级继承字体）要解决此问题，答案应为：.bootstrap-styles {&nbsp; &nbsp; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;&nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; line-height: 1.428571429;&nbsp; &nbsp; color: #333333;&nbsp; &nbsp; background-color: white;&nbsp; &nbsp; @import 'bootstrap';}

Answer 2

如果将以下内容包含在名为“ bootstrap-namespaced.less”的文件中，则只需将“ bootstrap-namespaced.less”导入到其他文件中文件：// bootstrap-namespaced.less// This less file is intended to be imported from other less files.&nbsp;// Example usage:// my-custom-namespace {//&nbsp; import 'bootstrap-namespaced.less';// }// Import bootstrap.css (but treat it as a less file) to avoid problems&nbsp;// with the way Bootstrap is using the parent operator (&).@import (less) 'bootstrap.css';// Manually include styles using selectors that will not work when namespaced.@import 'variables.less';& {&nbsp; &nbsp; // From normalize.less&nbsp; &nbsp; // Previously inside "html {"&nbsp; &nbsp; // font-family: sans-serif; // Overridden below&nbsp; &nbsp; -ms-text-size-adjust: 100%;&nbsp; &nbsp; -webkit-text-size-adjust: 100%;&nbsp; &nbsp; // Previously inside "body {"&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; // From scaffolding.less&nbsp; &nbsp; // Previously inside "html {"&nbsp; &nbsp; // font-size: 10px; // Overridden below&nbsp; &nbsp; -webkit-tap-highlight-color: rgba(0,0,0,0);&nbsp; &nbsp; // Previously inside "body {"&nbsp; &nbsp; font-family: @font-family-base;&nbsp; &nbsp; font-size: @font-size-base;&nbsp; &nbsp; line-height: @line-height-base;&nbsp; &nbsp; color: @text-color;&nbsp; &nbsp; background-color: @body-bg;}