如何命名Twitter Bootstrap使样式不会发生冲突

Question

我想使用Twitter Bootstrap,但仅限于特定元素,因此我需要找出一种方法来为所有Twitter Bootstrap类添加前缀,或者使用less 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都支持命名空间(甚至使用相同的语法).当您包含引导程序时,您可以在选择器中对其进行命名空间:

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

更新:对于较新版本的LESS,以下是如何操作:

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

这里回答了类似的问题.

Answer 2

@Andrew很棒的回答.您还需要注意,bootstrap修改了body {},主要是为了添加字体.因此,当您通过LESS/SASS命名它时,输出css文件如下所示:(在bootstrap 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内容不会有bootstrap字体(因为所有bootstrap都从parent继承了字体)

要修复,答案应该是:

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

将@Andrew,@ Kevin和@adamj的答案放在一起(加上其他一些样式),如果在名为"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;
}

Answer 4

首先从 github 克隆引导程序：

git clone https://github.com/twbs/bootstrap.git

安装要求：

npm install

打开 scss/bootstrap.scss 并添加您的命名空间：

.your-namespace {
    @import "functions";
    ...
    @import "utilities/api";
}

编译引导程序：

npm run dist

打开并从和标记dist/css/bootstrap.css中删除命名空间。htmlbody

然后将 dist 文件夹的内容复制到您的项目中，一切就完成了。

玩得开心！

Answer 5

添加命名空间以引导CSS将破坏模态功能,因为引导程序将"模态背景"类直接添加到正文.解决方法是在打开模态后移动此元素,例如:

$('#myModal').modal();
var modalHolder = $('<div class="your-namespace"></div>');
$('body').append(modalHolder);
$('.modal-backdrop').first().appendTo(modalHolder); 

您可以删除"hide.bs.modal"事件的处理程序中的元素.