我想使用Twitter的引导，但只能在特定的元素，所以我需要找出一种方法来前缀的所有Twitter的引导班，我的前缀，或者使用更少的混入。 我没有这个经历还让我不太明白如何做到这一点。 下面是我想要的风格HTML的例子：
<div class="normal-styles">
<h1>dont style this with bootstrap</h1>
<div class="bootstrap-styles">
<h1>use bootstrap</h1>
</div>
</div>
在这个例子中，Twitter的引导将普通样式都h1 S，但我想更挑剔我套用Twitter的引导风格哪些领域。
事实证明，这比我想象的要简单。 LESS和Sass都支持命名空间（使用相同的语法偶数）。 当你包括引导，可以选择内这样做的命名空间：
.bootstrap-styles {
@import 'bootstrap';
}
更新：对于不更新版本，这里是如何做到这一点：
.bootstrap-styles {
@import (less) url("bootstrap.css");
}
类似的问题在这里回答。
@Andrew伟大的答案。 你还需要注意的是引导修改体{}，主要是为了增加字体。 所以，当您通过以下/上海社会科学院的命名空间的输出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';
}
把@Andrew，@Kevin和@ adamj的答案一起（加上其他一些样式），如果您在一个名为“自举namespaced.less”文件之后，你可以简单地输入“自举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;
}
添加一个命名空间来引导CSS将打破模式的功能引导，直接增加了一个“模式 - 背景”类的身体。 一种解决方法是打开模式，如后这个元素移动：
$('#myModal').modal();
var modalHolder = $('<div class="your-namespace"></div>');
$('body').append(modalHolder);
$('.modal-backdrop').first().appendTo(modalHolder);
您可以删除元素的处理程序“hide.bs.modal”事件。
使用这些文件的.LESS版本。 确定你需要，然后再包与.LESS文件，这减档：
.bootstrap-styles {
h1 { }
}
这会给你的输出：
.bootstrap-styles h1 { }
为了更好地解释到底什么安德鲁在谈论那些谁也不知道少即是什么步骤。 这里是一个链接，解释相当不错它是如何一步一步完成的如何分离引导或其它CSS库
我做了一个GIST自举3里面所有的一类名为.bootstrap，包装https://gist.github.com/onigetoc/20c4c3933cabd8672e3e
我开始用这个工具： http://www.css-prefix.com/并与搜索固定休息和PHPstorm更换。 所有的字体@字体面托管在maxcdn。
第一行示例
.bootstrap-wrapper {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
命名空间打破了模态插件的背景下格，因为这始终是直接添加到<body>标签，绕过它应用了样式的命名空间的元素。
您可以通过更改插件的参考解决这个问题$body它显示的背景前：
myDialog.modal({
show: false
});
myDialog.data("bs.modal").$body = $(myNamespacingElement);
myDialog.modal("show");
在$body属性决定在那里的大背景下将被添加。
我面临@Andrew提出了同样的问题，方法很遗憾没有在我的具体情况提供帮助。 自举类撞上了从另一个框架类。 这是怎么这个项目已创办以来https://github.com/sneas/bootstrap-sass-namespace 。 随意使用。
最简单的办法-开始使用自定义生成独立的CSS类的引导。
例如，对于引导4.1下载从css4.1目录中的文件 -
https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes
和换你的HTML与类bootstrapiso一个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>
至于大家进一步注意。 为了得到一个大背景下工作模态，你可以简单地复制从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;
}
