我想使用 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 将正常设置两个h1s 的样式，但我希望对应用 Twitter Bootstrap 样式的区域更具选择性。
事实证明这比我想象的要容易。Less 和 Sass 都支持命名空间（甚至使用相同的语法）。当您包含引导程序时，您可以在选择器中执行此操作以对其命名：
.bootstrap-styles {
@import 'bootstrap';
}
更新：对于较新版本的 LESS，操作方法如下：
.bootstrap-styles {
@import (less) url("bootstrap.css");
}
@Andrew 很好的答案。您还需要注意 bootstrap 修改了 body {}，主要是为了添加字体。因此，当您通过 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';
}
将@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;
}
将命名空间添加到引导 CSS 将破坏模式功能，因为引导将“模式背景”类直接添加到正文。一种解决方法是在打开模式后移动此元素，例如：
$('#myModal').modal();
var modalHolder = $('<div class="your-namespace"></div>');
$('body').append(modalHolder);
$('.modal-backdrop').first().appendTo(modalHolder);
您可以在“hide.bs.modal”事件的处理程序中删除该元素。
首先从 github 克隆引导程序：
git clone https://github.com/twbs/bootstrap.git
安装要求：
npm install
打开 scss/bootstrap.scss 并添加您的命名空间：
.your-namespace {
@import "functions";
...
@import "utilities/api";
}
编译引导程序：
npm run dist
从and标记中打开dist/css/bootstrap.css并删除命名空间。htmlbody
然后将 dist 文件夹的内容复制到您的项目中，一切就绪。
玩得开心！
使用 .less 版本的文件。确定您需要哪些 less 文件，然后将这些 .less 文件包装为：
.bootstrap-styles {
h1 { }
}
这将为您提供以下输出：
.bootstrap-styles h1 { }
我在一个名为 .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e的类中使用 Bootstrap 3 做了一个 GIST
我从这个工具开始：http ://www.css-prefix.com/ 并通过 PHPstorm 中的搜索和替换来修复其余部分。所有字体@font-face 都托管在 maxcdn 上。
第一行示例
.bootstrap-wrapper {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
命名空间会破坏 Modal 插件的背景 div，因为它总是直接添加到 <body> 标签，绕过应用了样式的命名空间元素。
$body您可以通过在显示背景之前更改插件的引用来解决此问题：
myDialog.modal({
show: false
});
myDialog.data("bs.modal").$body = $(myNamespacingElement);
myDialog.modal("show");
该$body属性决定将添加背景的位置。
为了更好地解释 Andrew 为那些不知道 Less 是什么的人所谈论的所有步骤。这是一个链接，它很好地解释了它是如何一步一步完成的如何隔离 Bootstrap 或其他 CSS 库
最简单的解决方案 - 开始为 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>
作为大家的进一步说明。要让模态与背景一起使用，您可以简单地从 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;
}
不幸的是，我遇到了@Andrew 提出的相同问题和方法，但对我的具体情况没有帮助。引导类与来自另一个框架的类发生冲突。这就是这个项目的启动方式https://github.com/sneas/bootstrap-sass-namespace。随意使用。
您没有设置 CSS 预处理器。
您的 Bootstrap 版本早于 4.1。
您不太可能更新 Bootstrap 版本。此解决方案仅适用于您的网站/应用程序的遗留部分。
您可以自托管 css
使用类选择器为所有 css 选择器添加前缀：
将 CDN 中的所有 CSS 复制到您的编辑器中（例如http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css）
用选择器（SCSS 样式）包装整个内容，例如.bootstrap-styles：
.bootstrap-styles{
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside /* etc... */
}
使用工具将 SCSS 转换为 CSS。我使用了 https://jsonformatter.org/scss-to-css。（见最后截图）
自托管生成的 CSS 文件并将其包含在您需要的页面中
将需要 Bootstrap 样式的部分用<div class="bootstrap-styles"> ... </div>
→ Bootstrap 样式将仅应用于这些部分
您可以选择最小化生成的 CSS。
结果.bootstrap-styles html {选择器显然不起作用，因为 html 标记没有父标记。您可以通过将其更改为 just 来解决此问题.bootstrap-styles {。同样适用于body。
具有相对路径的图标和字体将被破坏。您可以通过搜索找到这些url(。
https://netdna.bootstrapcdn.com/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular你不能使用像 npm 这样的依赖管理工具。每次要更新 Bootstrap 时都必须执行这些步骤（请参阅前提条件）。
将 SCSS 转换为 CSS
