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

106

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

twitter-bootstrap  less 
— 安德鲁
source
— Sherbrow 2012年
这将有助于“如何隔离Bootstrap CSS以避免冲突” formden.com/blog/isolate-bootstrap
— Samuel Ev

Answers:

131

事实证明，这比我想象的要容易。Less和Sass都支持命名空间（甚至使用相同的语法）。当包含引导程序时，可以在选择器中对其进行命名空间：

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

更新：对于LESS的较新版本，请按以下步骤操作：

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

这里回答了类似的问题。

— 安德鲁
source
嘿，我正在尝试遵循此方法，但我有些困惑。我正在使用Angular。使用CDN，我引用了bootstrap.min.js，less.min.js和bootstrap.min.css文件。我不太确定在应用程序中的命名空间在哪里。
— 蝙蝠侠
完成此操作后，我的模式就无法使用，因为它也使用了。这是可以预期的吗？
— 蝙蝠侠
2
@Batman您不想使用CDN，因为您实际上是在重写所有Bootstrap以包含前缀。您需要对@import原始Bootstrap 使用SASS 之类的预处理器。我还认为模态也有问题，因为Bootstrap将某些类应用于顶层body标签。我不记得是否找到了解决方案。最后，我想我最终写出了自己的模态替代品。
— 2014年
4
— adamj 2014年
2
有人可以解释此导入声明的去向吗？看起来像一个单独的.less文件。我这样做了，然后将其放在了bootstrapless文件夹中，但是它不能使用命名空间进行编译。我认为我缺少了一些东西
— fehays 2015年
35

@安德鲁很棒的答案。您还需要注意，引导程序会修改正文{}，主要是为了添加字体。因此，当您通过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';
}
— 凯文
source
您忘记了margin: 0;
— kolobok
1
注意！我不知道为什么，但是在某些地方生成的CSS很少，例如.my-prefix .my-prefix ...，因此您还需要搜索和替换它。
— kolobok '16
10

将@ 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;
}
— 奇点
source
1
谢谢。这确实是最好的解决方案。
— kolobok
完美的作品！
— 凯文Berthommier
8

在引导程序中添加名称空间CSS会破坏模式功能，因为引导程序会直接向主体添加“ modal-backdrop”类。一种解决方法是在打开模态后移动此元素，例如：

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

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

— 用户名
source
如果将ngbootstrap与angular一起使用，则可以选择在特定容器内打开模式。this.modalService.open('myModal', {container: '#modalgoeshere'})
— Ena
3

使用文件的.less版本。确定所需的文件较少，然后将以下.less文件包装为：

.bootstrap-styles {

    h1 { }

}

这将为您提供以下输出： 

.bootstrap-styles h1 { }
— 斯科特·辛普森
source
2

Namespacing打破了Modal插件的背景div，因为它总是直接添加到<body>标记中，而绕过了您的namepacing元素，该元素已应用样式。

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

myDialog.modal({
    show: false
});

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

myDialog.modal("show");

该$body属性决定将背景添加到的位置。

— 尼克杜德
source
1

最简单的解决方案-开始对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>
— 用户名
source
0

作为大家的进一步说明。要使模态与背景一起使用，您可以简单地从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;
}
— 马修·柯克利
source
0

来自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文件夹的内容复制到您的项目中，一切就绪。

玩得开心！

— 托比亚斯·恩斯特
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.