twitter-bootstrap 如何命名 Twitter Bootstrap 以便样式不冲突
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13966259/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to namespace Twitter Bootstrap so styles don't conflict
提问by Andrew
I want to use Twitter Bootstrap, but only on specific elements, so I need to figure out a way to prefix all Twitter Bootstrap classes with my prefix, or use the less mixins. I'm not experienced with this yet so I don't quite understand how to do this. Here's an example of the HTML that I'm trying to style:
我想使用 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>
In this example, Twitter Bootstrap would normal style both h1s, but I want to be more selective about which areas I apply the Twitter Bootstrap styles.
在此示例中，Twitter Bootstrap 将使用常规样式 both h1s，但我想对应用 Twitter Bootstrap 样式的区域更具选择性。
回答by Andrew
This turned out to be easier than I thought. Both Less and Sass support namespacing (using the same syntax even). When you include bootstrap, you can do so within a selector to namespace it:
结果证明这比我想象的要容易。Less 和 Sass 都支持命名空间（甚至使用相同的语法）。当您包含引导程序时，您可以在选择器中执行此操作以对其进行命名空间：
.bootstrap-styles {
@import 'bootstrap';
}
Update:For newer versions of LESS, here's how to do it:
更新：对于较新版本的 LESS，以下是操作方法：
.bootstrap-styles {
@import (less) url("bootstrap.css");
}
回答by Kevin
@Andrew great answer. You'll also want to note that bootstrap modifies the body {}, mainly to add font. So when you namespace it via LESS/SASS your output css file looks like this: (in bootstrap 3)
@Andrew 很好的答案。您还需要注意引导程序修改正文 {}，主要是为了添加字体。因此，当您通过 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;
}
but obviously there will not be a body tag inside your div, so your bootstrap content will not have the bootstrap font (since all bootstrap inherits font from parent)
但显然你的 div 中不会有 body 标签，所以你的引导程序内容不会有引导程序字体（因为所有引导程序都从父级继承字体）
To fix, the answer should be:
要修复，答案应该是：
.bootstrap-styles {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: white;
@import 'bootstrap';
}
回答by Singularity
Putting @Andrew, @Kevin and @adamj's answers together (plus a few other styles), if you include the following in a file named "bootstrap-namespaced.less", you can simply import 'bootstrap-namespaced.less' into any less file:
将@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;
}
回答by user3567343
Adding a namespace to bootstrap CSS will break modal functionality as the bootstrap adds a 'modal-backdrop' class directly to the body. A workaround is to move this element after opening the modal, e.g.:
将命名空间添加到引导 CSS 将破坏模态功能，因为引导将“模态背景”类直接添加到正文中。解决方法是在打开模态后移动此元素，例如：
$('#myModal').modal();
var modalHolder = $('<div class="your-namespace"></div>');
$('body').append(modalHolder);
$('.modal-backdrop').first().appendTo(modalHolder);
You can remove the element in a handler for the 'hide.bs.modal' event.
您可以在 'hide.bs.modal' 事件的处理程序中删除该元素。
回答by Scott Simpson
Use the .less version of the files. Determine which less files you require, then wrap those .less files with:
使用文件的 .less 版本。确定您需要哪些 less 文件，然后使用以下内容包装这些 .less 文件：
.bootstrap-styles {
h1 { }
}
This will give you the output of:
这将为您提供以下输出：
.bootstrap-styles h1 { }
回答by Gino
I did a GIST with Bootstrap 3 all inside a class named .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e
我在一个名为 .bootstrap-wrapper 的类中使用 Bootstrap 3 做了一个 GIST https://gist.github.com/onigetoc/20c4c3933cabd8672e3e
I started with this tool: http://www.css-prefix.com/And fix the rest with search and replace in PHPstorm. All fonts @font-face are hosted on maxcdn.
我从这个工具开始：http: //www.css-prefix.com/并在 PHPstorm 中通过搜索和替换修复其余部分。所有字体@font-face 都托管在 maxcdn 上。
First line example
第一行示例
.bootstrap-wrapper {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
回答by thenickdude
Namespacing breaks the Modal plugin's backdrop div, since that is always added directly to the <body> tag, bypassing your namespacing element which has the styles applied to it.
命名空间打破了 Modal 插件的背景 div，因为它总是直接添加到 <body> 标签，绕过应用了样式的命名空间元素。
You can fix this by changing the plugin's reference to $bodybefore it shows the backdrop:
您可以通过$body在显示背景之前更改插件的引用来解决此问题：
myDialog.modal({
show: false
});
myDialog.data("bs.modal").$body = $(myNamespacingElement);
myDialog.modal("show");
The $bodyproperty decides where the backdrop will be added.
该$body属性决定在那里的大背景下将被添加。
回答by eKelvin
To explain better all the steps what Andrew was talking about for those who don't know what Less is. Here is a link that explain pretty well how it is done step by step How to isolate Bootstrap or other CSS libraries
为那些不知道 Less 是什么的人更好地解释 Andrew 所说的所有步骤。这是一个链接，它很好地解释了它是如何一步一步完成的如何隔离 Bootstrap 或其他 CSS 库
回答by user3879851
Most simple solution - start to use custom build isolated css classes for Bootstrap.
最简单的解决方案 - 开始为 Bootstrap 使用自定义构建独立的 css 类。
For example, for Bootstrap 4.1 download files from css4.1 directory -
例如，对于 Bootstrap 4.1 从 css4.1 目录下载文件 -
https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes
https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes
and wrap your HTML in a div with the class bootstrapiso :
并使用类 bootstrapiso 将您的 HTML 包装在一个 div 中：
<div class="bootstrapiso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>
Page template with isolated bootstrap 4 will be
带有隔离引导程序 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>
回答by Matthew Kirkley
As a further note for everyone. To get modals working with a backdrop you can simply copy these styles from bootstrap3
作为对每个人的进一步说明。要使模态与背景一起工作，您可以简单地从 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;
}
