解决bootstrap样式和系统样式冲突方式

什么是 Bootstrap？

Bootstrap 是一个最流行的Web前端响应式应用程序开发框架，很多网站界面或者系统界面都是采用它布局，使用熟练那开发起来是非常快速！

前端开发者在网络上看到的很多案例都是采用Bootstrap搭建的案例，所以案例中总是可以看到bootstrap的样式文件和js扩展插件。

如果使用Bootstrap遇到和已有样式文件冲突导致页面混乱，有冲突怎么办？

例如：bootstrap-markdown编辑器的使用，引入相关文件，发现页面混乱。

在已有系统全局中引入Bootstrap样式文件发现页面样式混乱，擦！遇到麻烦了！很想使用Bootstrap的这个功能，怎么决绝这个混乱呢？

修改原站样式文件，class类名，id名称；这样真不一定行，要修改的太多，修改来修改去问题越多，系统越大越麻烦！（放弃）

解决Bootstrap v3.3.4样式冲突的办法

把Bootstrap css与与已有的样式类隔离，问题就解决了！

less是一个css处理器，它允许您在编译为css之前更改变量。这允许您更改一个变量（例如基本字体大小），而less将自动调整依赖它的所有样式（例如，行高、标题等）。这个简短的教程将向您展示如何使用less定制引导css，然后在所有引导样式前面加上bootstrap iso类。

使用方法，下载bootstrap-iso.css文件引入

将：
<link rel="stylesheet" href="/css/bootstrap.min.css" />
替换为：
<link rel="stylesheet" href="/css/bootstrap-iso.css" />

然后将HTML包装在带有类bootstrap-iso的div中，如下所示：

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

原文链接

原文链接：