如何在单个web页面内建立多个静态文件作用域？

事情是这样的，我在搭建一个小站，也知道自己设计能力和前端两方面都太水，所以特意购买了相关的模板设计自己写后端。

现在临时决定再加一点页面，并且决定自己利用bootstrap稍微补充一下就好了。但由于原设计者没有用到了bootstrap，在css和js命名方面与bootstrap方面产生了冲突，造成单纯地导入css文件会造成样式冲突。

所以我也不大清楚有没有如题的这种东西，就是css和js相关的class，id命名一样，但有办法分开“两个作用域”来避免冲突？可以根据不同页面导入不同的static文件，但对于像导航等的布局问题，现在一定得在几乎所有页面都导入原设计的前端代码，所以不能用此办法解决。我想了一下，我都不知道要如何在搜索引擎里形容我这个需求= =

一般是至少一页html里面一套规则，但还想在一页HTML里面建立A区，B区，C区……。由于原代码和新代码都不能被覆盖，所以就算嵌入css覆盖也是不可行的。另外也可以用在单页页面内加载多个html的办法来达成，但这样一旦其中一个出事故岂不是显示非常奇怪？貌似也没人这么用。

非常感谢！

---

可以給 bootstrap 所有樣式加上個識別用的 class:

1. 先去 bootstrap 下載下來

2. 打開文件 less/bootstrap.less

3. 用 class 把所有 @import 給包起來

.bootstrap-tomoe {
   // Core variables and mixins
   @import "variables.less";
   @import "mixins.less";

   // Reset and dependencies
   @import "normalize.less";
   @import "print.less";
   @import "glyphicons.less";

   // 省略...

1. 安裝編譯 less 用的包： npm install -g less jshint recess uglify-js

2. $ lessc ./less/bootstrap.less > bootstrap.css
   產生出來的會像這樣

.bootstrap-tomoe a {
  background-color: transparent;
}
.bootstrap-tomoe a:active,
.bootstrap-tomoe a:hover {
  outline: 0;
}
.bootstrap-tomoe abbr[title] {
  border-bottom: 1px dotted;
}
.bootstrap-tomoe b,
.bootstrap-tomoe strong {
  font-weight: bold;
}

1. 網站引用 bootstrap.css

這樣你需要使用到 bootstrap 的 css 時，要加上 .bootstra-tomoe 才會生效，例如

<dvi class="">
這邊不會被 bootstrap 影響到
</div>

<div class="bootstrap-tomoe">
這邊才會被 bootstrap 影響到
</div>

---

一般在最初的设计时，就会考虑命名冲突的问题了。
可以利用变量名作区分，比如 .Booker-nav , .qtFo15e-nav.
所以 利用编辑器统一修改一下 类名就可以了

这是我想到的比较简单的方法