如何将引导 CSS 和 JavaScript 隔离到 html 页面的一部分？

Question

我得到了一个包含大量 CSS 和 JavaScript 的网站。 我需要在网页中添加工具栏、对话框和弹出窗口。 我想使用 bootstrap，但是和现有的 CSS 有冲突。

我知道我可以isolate the bootstrap CSS 到 html 的一部分：

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

但是 JavaScript 呢？ （引导对话框需要 jQuery 和 popper.js）

---

解决方案

我最终决定使用 uikit 库，因为它有一个内置的“自定义前缀”模式和一个“范围”模式，可以解决我的两个问题： https://getuikit.com/docs/avoiding-conflicts#scope-mode

Answer 1

在您的链接中很好地解释了如何做您想做的事。 实际上，如果你有一个 css 预处理器，你必须从一些自定义类中导入引导 css

// LESS preprocessor
.my-custom-class {
  @import (less) 'bootstrap.css';
  @import (less) 'bootstrap-theme.css';
}

// or SASS preprocessor
.my-custom-class{
    @import "bootstrap.scss";
    @import "bootstrap-theme.css";
}

正如您在链接中发现的那样，某些类存在问题，因为不可能有 .my-custom-class body 或 .my-custom-class html，因此您需要用文本编辑器替换该类

找到所有.my-custom-class body 正文并替换为.my-custom-class 找到所有.my-custom-class html 正文并替换为.my-custom-class

现在你所有的引导 css 都有一个父类，只针对你的包装器内的元素：

// this
.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden
}

// become
.my-custom-class .embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden
}