javascript - 如何在单个web页面内建立多个静态文件作用域？-PHP中文网问答

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

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

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

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

非常感谢！

.bootstrap-tomoe { // Core variables and mixins @import "variables.less"; @import "mixins.less"; // Reset and dependencies @import "normalize.less"; @import "print.less"; @import "glyphicons.less"; // 省略...

.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; }

全部回复(2)

天蓬老师2017-04-11 11:45:49 2楼

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

先去 bootstrap 下載下來
打開文件 less/bootstrap.less
用 class 把所有 @import 給包起來

安裝編譯 less 用的包： npm install -g less jshint recess uglify-js
$ lessc ./less/bootstrap.less > bootstrap.css
產生出來的會像這樣

網站引用 bootstrap.css

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

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

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

赞 +0

添加回复

迷茫2017-04-11 11:45:49 1楼

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

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