Django 3.0：如何在同一模板中使用不同的 Bootstrap 版本答案

【问题标题】：Django 3.0: How to use different Boostrap versions in same templateDjango 3.0：如何在同一模板中使用不同的 Bootstrap 版本
【发布时间】：2020-10-17 04:22:12
【问题描述】：

我在我的 django 项目中制作了一个 模板 (Base.html)，它是 Bootstrap 4 的，可以独立工作。

我还制作了另一个 模板 (Child_Base.html)，它是用 Bootstrap 3 制作的，应该被注入到 Base.html 中。

但是这里发生的情况是，当我在第一个模板中包含 BS3 模板时，它会破坏很多东西。因此，我正在寻找一种既能共存又不会破坏其他解决方案的解决方案。

Base.html的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <p>
        {% block bodyblock %}
            Hello World!
            {% include "Child_Base.html" %}
        {% endblock %}
    </p>
</body>
</html>

Child_Base.html的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
    <p>
        {% block bodyblock %}
            Good Morning!
        {% endblock %}
    </p>
</body>
</html>

在实际场景中，有产品页面，显示所有可供用户添加到购物车（BS4 制造）中的书籍，我想在其中包含搜索框（BS3 制造）。但是代码很复杂而且不是那么自我阐述，所以我使用了上面的例子。谢谢。

【问题讨论】：

标签： django bootstrap-4 django-templates

【解决方案1】：

你为什么要这个？

当您包含 bt3 和 bt4 浏览器 DOM 时，您可以在 templatename.html 文件或链接到模板的不同 name.css 文件中包含 CSS 文件，如下所示：

页面：

index.html

文件：

bt3.min.css

bt4.min.css

然后它变得疯狂，因为两个具有相同标签的不同 CSS 文件在浏览器 DOM 中。

我并不是说这是不可能的，因为在像 vue.js 这样的前端框架中，您可以将其配置为仅针对一个组件在本地使用 CSS，但 Django 不会生成这样的文件，因此您不能有两个不同的一个 HTML 页面的 CSS 文件相互隔离。

第二个想法：

也许如果您使用这样的方案制作 page.html：

headers and other head tags...
<body>
    <section>
        <style>
            include the entire bootstrap 4 css here
        </style>
        enter your bt4 elements here
    </section>
    <section>
        <style>
            include entire bootstrap 3 css here
        </style>
        enter your bt3 elements here
    </section>
</body>

你应该把 .min.css 放在这可能会导致浏览器以你想要的样式呈现页面，因为 CSS 文件总是被文件中较低的 CSS 覆盖。

【讨论】：

这是您所说的完全不同的方法。必须有一些其他更相关的解决方案，比如一些 django 块标签或其他不会让子模板覆盖的东西。
哦，好吧，祝你好运，一定要分享...