如何命名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 {

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    font-size: 14px;

    line-height: 1.428571429;

    color: #333333;

    background-color: white;

}

但很明显，div内不会有body标记，因此您的引导程序内容将没有引导程序字体（因为所有引导程序都从父级继承字体）

要解决此问题，答案应为：

.bootstrap-styles {

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    font-size: 14px;

    line-height: 1.428571429;

    color: #333333;

    background-color: white;

    @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. 

// Example usage:

// my-custom-namespace {

//  import 'bootstrap-namespaced.less';

// }

// Import bootstrap.css (but treat it as a less file) to avoid problems 

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

& {

    // From normalize.less

    // Previously inside "html {"

    // font-family: sans-serif; // Overridden below

    -ms-text-size-adjust: 100%;

    -webkit-text-size-adjust: 100%;

    // Previously inside "body {"

    margin: 0;

    // From scaffolding.less

    // Previously inside "html {"

    // font-size: 10px; // Overridden below

    -webkit-tap-highlight-color: rgba(0,0,0,0);

    // Previously inside "body {"

    font-family: @font-family-base;

    font-size: @font-size-base;

    line-height: @line-height-base;

    color: @text-color;

    background-color: @body-bg;

}