同时使用 Bootstrap 3 和 Bootstrap 4

Posted 2023-03-21

【中文标题】同时使用 Bootstrap 3 和 Bootstrap 4

【英文标题】：Use Bootstrap 3 and Bootstrap 4 simultaneously

【发布时间】：2021-08-07 13:33:56

【问题描述】：

我有一个仍然使用 Bootstrap 3 的单页 Web 应用程序，这在某些方面变得相当烦人。所以我想切换到 Bootstrap 4，而不是一次切换到整个应用程序。我想先转换应用程序的某些部分，而不影响仍在使用 Bootstrap 3 的其他部分。

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

问题是我显然不能同时嵌入两个样式表，因为选择器会发生冲突。我可以想到一些非常丑陋的技巧来解决这个问题，比如手动修改其中一个 Bootstrap 版本的所有选择器，但除非绝对必要，否则我并不是真的想做的事情。

是否有合理的方法将应用程序从 Boostrap 3 逐步迁移到 4？本质上是声明 Bootstrap 4 应该在特定的 html 元素及其所有子元素中使用的某种方式，而 Bootstrap 3 在它之外使用？

【问题讨论】：

我不是 bootstrap 方面的专家，所以只是提出一个想法。您可以通过为每个 页面 提供 bs 3 或 bs4 来逐步升级，尽管这需要一次重新处理整个页面。

@MrT 这是一个 SPA，所以只有一个 HTML 页面。

没有看到提到 SPA ;) 也许范围样式会起作用？

【参考方案1】：

您可以将命名空间添加到一个或两个 Bootstrap CSS 文件。例如，您可以为所有 Bootstrap 4 类名称添加 .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 文件以添加前缀，这非常简单。

【讨论】：

这有点让我担心，我必须这样做。不幸的是，它比您的示例复杂一点，因为 Bootstrap 4 部分将是 Bootstrap 3 部分的子级，因此我可能必须修改两个 Bootstrap 版本以排除 .bs4 元素和子级的 Boostrap 3 CSS。

根据您的页面的复杂程度，这可能或多或少是不可能的。使用 BS3 样式设置的容器元素依赖其子元素来正确显示 BS3 样式。如果你只添加一个 BS4 样式的子元素，你可能很快就会遇到问题。