[JavaScript知识库]【前端】解决Bootstrap3与Bootstrap4同时使用的CSS冲突问题

目录

一、需求背景

二、解决方案

1、原理介绍

2、实施方式

1）下载bootstrap.css文件

2）安装node以及less命令

3）创建LESS文件

4）引入指定CSS

3、参考文档

一、需求背景

Bootstrap是网络上最流行的 CSS 框架，大多数前端项目都会使用此框架的配置以轻松构建高颜值的前端页面。

Bootstrap框架发展并不快，就目前而言，2015年发布的Bootstrap4与Bootstrap3依旧是使用最广泛的Bootstrap框架，其次就是2021年新发布的Bootstrap5。

新的前端项目肯定是优先选择新的版本，但一些已有的老前端项目也会想相互兼容，以达到定向文件使用css的目的。

直接引用两套bootstrap的css文件会直接冲突，导致某些css失效或异常，这里提供一个解决方案，让指定页面使用能够使用指定bootstrap版本。

二、解决方案

1、原理介绍

bootstrap毕竟只是个css文件，对html来说直接引用即可使用，所以可以对其直接改造。

但是需要考虑两个问题，第一个就是收益的局限性，改造完成后此配置只能提供给自己使用，所以改造收益不高；第二个就是改造难度，bootstrap.css文件毕竟有这么多行代码，手动去进行更改太浪费时间。

这里提供一个快速定制bootstrap文件的方案，满足项目需求。

需要注意的是，这并不是一个最好的解决方案，理论上来说一个项目只应使用一个bootstrap版本即可，自行增加多余的配置文件会加重项目的复杂程度，所以这种方法适用于一些比较古老的项目，不想花太多精力去做改造的项目。

2、实施方式

1）下载bootstrap.css文件

对于使用bootstrap4及以上版本的项目，直接下载bootstrap.css文件到本地即可(此处提供一个下载地址案例：https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.css)。

对比使用bootstrap3及以下的项目，可以直接下载，也可以使用定制css文件(Customize and download · Bootstrap)。

2）安装node以及less命令

安装node：

#使用linux安装node，示例版本为v14.15.4 已安装可忽略，也可以使用windows

#项目安装包
wget https://nodejs.org/dist/v14.15.4/node-v14.15.4-linux-x64.tar.xz

#解压文件
tar -xvf node-v14.15.4-linux-x64.tar.xz 

#安装到usr/local下
mv node-v14.15.4-linux-x64 /usr/local/

#制作软链
ln -s /usr/local/node/bin/node node
ln -s /usr/local/node/bin/node node

安装less：

npm install less -g

npm i less --save-dev

3）创建LESS文件

创建一个名为prefix.less的文件，其中包含以下内容：

.bootstrap-iso {
  @import (less) 'bootstrap.css';
}

编译LESS文件

/usr/local/node/bin/lessc prefix.less bootstrap-iso.css

4）引入指定CSS

在需要不同版本的html中加入div，指定css配置即可

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

3、参考文档

1、How to Isolate Bootstrap CSS to Avoid Conflicts (using LESS) | Formden.com