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");
}

A similar question was answered here.

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都从父级继承了字体）

要修复，答案应该是：

.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

为bootstrap CSS添加命名空间会破坏模态功能，因为引导程序会将“模态背景”类直接添加到正文中。解决方法是在打开模态后移动此元素，例如：

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

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

Answer 5

使用.less版本的文件。确定您需要的文件较少，然后用以下内容包装那些.less文件：

.bootstrap-styles {

    h1 { }

}

这将为您输出：

.bootstrap-styles h1 { }

Answer 6

更好地解释安德鲁为那些不知道Less是什么的人所说的所有步骤。这是一个链接，可以解释如何逐步完成How to isolate Bootstrap or other CSS libraries

Answer 7

来自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，然后从html和body标记中删除名称空间。

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

玩得开心！

Answer 8

我在一个名为.bootstrap-wrapper的类中使用Bootstrap 3进行了GIST https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

我从这个工具开始：http://www.css-prefix.com/ 并使用PHPstorm中的搜索和替换来修复其余部分。所有字体@ font-face都托管在maxcdn。

第一行示例

camera.up = new THREE.Vector3(0,0,1);

Answer 9

命名空间会破坏Modal插件的背景div，因为它总是直接添加到＆lt; body＆gt;标记，绕过已应用样式的命名空间元素。

您可以在显示背景之前更改插件对$body的引用来解决此问题：

myDialog.modal({
    show: false
});

myDialog.data("bs.modal").$body = $(myNamespacingElement);

myDialog.modal("show");

$body属性决定了背景的添加位置。

Answer 10

我遇到了@Andrew提出的同样的问题和方法，但遗憾的是在我的具体案例中并没有帮助。 Bootstrap类与另一个框架中的类发生冲突。这是该项目被接受的方式https://github.com/sneas/bootstrap-sass-namespace。随意使用。

Answer 11

最简单的解决方案 - 开始为Bootstrap使用自定义构建隔离的css类。

例如，对于Bootstrap 4.1，从css4.1目录下载文件 -

https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

并使用类bootstrapiso将您的HTML包装在div中：

<div class="bootstrapiso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>

带有隔离引导程序4的页面模板将是

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <title>Page1</title>

    <!-- Isolated Bootstrap4 CSS - -->
    <link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">   

    <!-- JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" crossorigin="anonymous"></script>

  </head>

  <body>

  <div class="bootstrapiso">
  <!-- Any HTML here will be styled with Bootstrap CSS -->
  </div>

  </body>
</html>

Answer 12

作为大家的进一步说明。要使模态与背景配合使用，您只需从bootstrap3复制这些样式

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}
.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}

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

12 个答案: