处理 Bootstrap CSS 冲突

Posted 2022-03-31 ryanzheng

问题：

Bootstrap 是Web上最流行的CSS框架。它使创建漂亮，响应迅速的设计非常容易。

但是，有时候并不希望在整个网站上使用 Bootstrap，您只需要使用Bootstrap CSS的一部分。

如果只是将 Bootstrap CSS 直接添加到 head 中，就有可能会与其他的 CSS 产生冲突，从而产生混乱的样式。 

如果我们可以将 Bootstrap CSS 与特定类隔离，问题就解决了！

只需要使用 LESS 为所有 Bootstrap CSS 添加一个类名称。

 

LESS是一个 CSS 处理器，允许您在编译到CSS之前更改变量。这允许您更改一个变量（例如基本字体大小），LESS 将自动调整所有依赖于它的样式（例如行高，标题等）。

以下展示如何使用LESS自定义bootstrap CSS，然后使用类bootstrap-iso为所有Bootstrap样式添加前缀。

处理步骤：

 

1. 将导入 head 标签中的 bootstrap css 文件

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  

 

 

替换为

<link rel="stylesheet" href="https://formden.com/static/assets/demos/bootstrap-iso/bootstrap-iso/bootstrap-iso.css" />

 

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

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

 

资料参考：

https://formden.com/blog/isolate-bootstrap