同时使用Bootstrap 3和Bootstrap 4

Question

我有一个单页面web应用程序，它仍然使用Bootstrap 3，这在某些方面变得相当恼人。因此，我想切换到Bootstrap 4，但不是立即切换到整个应用程序。我想首先转换应用程序的某些部分，而不会干扰仍在使用Bootstrap 3的其他部分。

Bootstrap 3 CSS现在已全局添加到应用程序中。我想首先转换为Bootstrap 4的部分是主应用程序的子应用程序，我还不能干净利落地将Bootstrap 3和Bootstrap 4部分分成单独的层次结构。

问题是我显然不能只嵌入两个样式表，因为选择器会冲突。我可以想出一些非常丑陋的方法来解决这个问题，比如手动修改Bootstrap版本的所有选择器，但除非绝对必要，否则我不会这样做。

是否有一种合理的方法将应用程序从Boostrap 3迁移到Boostrap 4？从本质上讲，声明Bootstrap 4应该在特定的HTML元素及其所有子元素内使用，而Bootstrap 3在它的外部使用？

Answer 1

可以将命名空间添加到一个或两个Bootstrap CSS文件中。例如，您可以在所有Bootstrap4类名前面加上.bs4前缀，这样.btn类将如下所示：

.bs4 .btn {
    display: inline-block;
    font-weight: 400;
    /*etc/*
}

然后在页面上，将要使用Bootstrap 4的内容与名称空间的类包装在一个容器中。例如。

<div class="bs4">
    <button class="btn btn-primary">Test</button>
</div>

要实现这一点并不需要像听起来那样繁重。我按照this page上的说明重新编译了Bootstrap LESS文件，添加了一个前缀，非常简单。