Paul和Millimoose都提供了适合我的解决方案，但是，对于新手来说，这个解决方案需要一些挖掘，所以这里是一个逐步描述适合我的解决方案（以及我相信他们推荐的解决方案）。
1.基本上，你必须修改引导css文件，基本上把整个引导css文件 Package 在这个里面：
.bootstrap{ //此处显示整个bootstrap css文件}
1.使用http://winless.org/online-less-compiler生成新的css代码。你需要把上面的代码粘贴到上面链接的左手。
1.将上面链接的输出复制并粘贴到css文件中。将这个css文件包含在你的html中。
1.当需要使用bootstrap时，只需将其放在要应用bootstrap的元素周围即可。
非常感谢所有的帮助，在找出这个解决方案。工作很好。

我认为最简单的方法是使用一个css预处理器来命名所有的引导css组件。
如果你去了他们的github网站：https://github.com/twbs/bootstrap/你会看到他们有一个更少的代码分布。从那里，你可以命名他们所有的样式，通过 Package 库在某种类，如millimoose提到。
从它们可以将bootstrap名称空间添加到某些HTML元素中，库将只影响那个DOM节点及其子节点。

我在名为.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%}

当HTML文档识别出其中一个样式的两个参数时，就会出现此问题。
删除或注解或修改导致项目混乱的参数。bootstrap.css文件或任何引用，除了您的自定义css文件。

注意事项：当你使用bootstrap.min.css的文件时，你不能这样做。使用bootstrap.css而不使用min来编辑。

解决方案之一是复制Bootstrap.css文件并将其 Package 在任何 Package 器中

.wrapper{
//bootstrap code
}

并保存文件为scss例如styles.scss
之后，打开命令提示符或终端并键入以下命令

npx sass styles.scss destination.css

这将创建一个目标CSS文件，该文件将包含 Package 器作为顶级样式，因此要使用这些样式，您必须使用

<div class="wrapper">
//your elements that will use bootstrap
</div>