为什么引导程序不起作用，尽管我已经加载了它等（Django 项目）？答案

【问题标题】：Why bootstrap doesn't work although I have loaded it, etc. (Django project)?为什么引导程序不起作用，尽管我已经加载了它等（Django 项目）？
【发布时间】：2017-05-14 10:21:19
【问题描述】：

我正在处理这个 Django 项目。该功能运行良好。当我开始使用 Bootstrap3 进行前端工作时，我遇到了一些问题（更像是混乱）。

首先，我使用命令提示符安装了 django-bootstrap3，如下所示：

pip install django-bootstrap3

安装成功。 Bootstrap3 被下载到我电脑的这个位置 c:\python34\lib\site-packages 然后，我将它作为第三方应用程序包含在 settings.py 的我的主项目目录中的 INSTALLED_APPS 列表如下：

 INSTALLED_APPS =(
--apps--
'bootstrap3',
)

同样在 settings.py 中，我像这样包含了 jQuery：

BOOTSTRAP3 = {'include_jquery': True}

我修改了我的 base.html 以包含引导元素。我有两个应用程序，users 和 mynotess（抱歉命名不当）

base.html

编辑：base.html 位于问题的底部。

由于某种原因，我加载了 localhost:8000，它仍然是普通的丑陋 HTML 格式。我在网上查了一下，发现了一些 CDN 链接，我想如果我只是使用 CDN 链接，它可能会起作用。

然后我将其包含在 base.html 中，直接从 Bootstrap 的网站复制。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

（我在 HTML 文档的 head 部分中包含了链接，在 HTML 文档的 body 部分中包含了脚本）。

成功了！然而，当我从我的 INSTALLED_APPS 中删除了 bootstrap3 以及加载我计算机上安装的 bootstrap3 的所有代码（例如 {% load bootstrap3 %} ，它不起作用。它回到了丑陋的 HTML 格式。同样，当我删除 CDN 链接并保留所有加载 bootstrap 的 bootstrap3 代码安装在我的计算机上时，它也回到了丑陋的 HTML 格式。

我的问题是：

应该是这样的吗？根据我目前正在为这个项目关注的一本书，我什至不必包含 CDN 链接和脚本（这本书没有提到它们根本）而且它应该可以工作.
如果不应该是这样，是不是我的代码有问题导致了这种情况？我错过了一些步骤吗？我的 bootstrap3 文件是否在正确的目录中？（我只是通过命令提示符使用 pip 下载了它，我没有将它移动到其他任何地方）

我的 Django 网站的功能运行良好。非常感谢任何帮助、解释或建议！

编辑： base.html 如果我想显示 Bootstrap 元素，就必须是这样。

<!DOCTYPE html>
{% load bootstrap3 %}
<html lang="en">
    <head>
        <meta charset="utf-8"><!-- encoding characters -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- some Microsoft Edge/IE stuff -->
        <meta name="viewport" content="width=device-width, initial-scale=1"><!-- viewport -> the user's visible area of a webpage, -> this sets it to normal zoom (scale 1) and width of device -->
        <title>My Notes</title
        {% bootstrap_css %}
        {% bootstrap_javascript %}
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    </head>
    <body>
        <!-- Static top navbar -->
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
                    data target="#navbar" aria-expanded="false"
                    aria-controls="navbar"></button>
                    <a class="navbar-brand" href="{% url 'mynotess:index' %}">My Notes</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        {% if user.is_authenticated %}
                            <li><a href="{% url 'mynotess:topics' %}">My Topics</a></li>
                        {% endif %}
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        {% if user.is_authenticated %}
                            <li><a>{{user.username}}</a></li>
                            <li><a href="{% url 'users:logout' %}">Log Out</a></li>
                        {% else %}
                            <li><a href = "{% url 'users:login' %}">Login</a></li>
                            <li><a href = "{% url 'users:register' %}">Create Account</a></li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <div class="page-header">
                {% block header %}{% endblock header %}
            </div>
            <div>
                {% block content %}{% endblock content %}
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </body>
</html>

如果我只删除 CDN 链接，它将无法正常工作。同样，如果我只删除模板标签，它也不会起作用。

base.html 没有模板标签（不起作用）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"><!-- encoding characters -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- some Microsoft Edge/IE stuff -->
        <meta name="viewport" content="width=device-width, initial-scale=1"><!-- viewport -> the user's visible area of a webpage, -> this sets it to normal zoom (scale 1) and width of device -->
        <title>My Notes</title
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    </head>
    <body>
        <!-- Static top navbar -->
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
                    data target="#navbar" aria-expanded="false"
                    aria-controls="navbar"></button>
                    <a class="navbar-brand" href="{% url 'mynotess:index' %}">My Notes</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        {% if user.is_authenticated %}
                            <li><a href="{% url 'mynotess:topics' %}">My Topics</a></li>
                        {% endif %}
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        {% if user.is_authenticated %}
                            <li><a>{{user.username}}</a></li>
                            <li><a href="{% url 'users:logout' %}">Log Out</a></li>
                        {% else %}
                            <li><a href = "{% url 'users:login' %}">Login</a></li>
                            <li><a href = "{% url 'users:register' %}">Create Account</a></li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <div class="page-header">
                {% block header %}{% endblock header %}
            </div>
            <div>
                {% block content %}{% endblock content %}
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </body>
</html>

base.html 没有 CDN 的链接（也不起作用）

{% load bootstrap3 %}
<html lang="en">
    <head>
        <meta charset="utf-8"><!-- encoding characters -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- some Microsoft Edge/IE stuff -->
        <meta name="viewport" content="width=device-width, initial-scale=1"><!-- viewport -> the user's visible area of a webpage, -> this sets it to normal zoom (scale 1) and width of device -->
        <title>My Notes</title
        {% bootstrap_css %}
        {% bootstrap_javascript %}
    </head>
    <body>
        <!-- Static top navbar -->
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
                    data target="#navbar" aria-expanded="false"
                    aria-controls="navbar"></button>
                    <a class="navbar-brand" href="{% url 'mynotess:index' %}">My Notes</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        {% if user.is_authenticated %}
                            <li><a href="{% url 'mynotess:topics' %}">My Topics</a></li>
                        {% endif %}
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        {% if user.is_authenticated %}
                            <li><a>{{user.username}}</a></li>
                            <li><a href="{% url 'users:logout' %}">Log Out</a></li>
                        {% else %}
                            <li><a href = "{% url 'users:login' %}">Login</a></li>
                            <li><a href = "{% url 'users:register' %}">Create Account</a></li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <div class="page-header">
                {% block header %}{% endblock header %}
            </div>
            <div>
                {% block content %}{% endblock content %}
            </div>
        </div>
    </body>
</html>

【问题讨论】：

标签： python html django twitter-bootstrap web

【解决方案1】：

我遇到了同样的问题，我们都犯了同样的错字：你忘记了结束标题标签中的“>”

【讨论】：

【解决方案2】：

除了通常的拼写错误（标题标签等）之外，您已经定义了导入引导程序，但是在您将 jquery 实际粘贴到参数中以使用它之前，不会加载 jquery 行。（我刚刚意识到这已经很老了，因为新的已经在 Bootstrap 4 上）。

您不需要手动包含任何 cdn 链接，除非您决定更改链接，否则您的 django 引导标签可以为您处理这部分内容（在这种情况下，您可以将更改写入设置中的设置.py（假设你正在使用它）。

所以...

包括引导 CSS 是这个标签：

{% bootstrap_css %}

并且用于包含引导 javascript 和 jquery js 文件 - 而不是：

{% bootstrap_javascript %}

尝试使用：

{% bootstrap_javascript jquery=True %}

或：

{% bootstrap_javascript jquery %}

如果您已经在配置中将 jquery 定义为 True

【讨论】：

【解决方案3】：

听起来{% boostrap_css %} 没有拉下 CSS。这将导致您描述的问题。您可能想要更新设置，以便它们从您知道有效的 CDN 中提取，或者只是将它们硬编码到您的基本模板中。

模板.html

<!DOCTYPE html>
{# Load the tag library #}
{% load bootstrap3 %}
<html lang="en">
<head>
    <meta charset="utf-8"><!-- encoding characters -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- some Microsoft Edge/IE stuff -->
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- viewport -> the user's visible area of a webpage, -> this sets it to normal zoom (scale 1) and width of device -->
    <title>My Notes</title
    {# Load CSS and JavaScript #}
    {% bootstrap_css %}
    {% bootstrap_javascript %}
</head>

<body>    
{# Display a form #}
<form action="/url/to/submit/" method="post" class="form">
  {% csrf_token %}
  {% bootstrap_form my_form_here %}
  {% buttons %}
    <button type="submit" class="btn btn-primary">
      {% bootstrap_icon "star" %} Submit
    </button>
  {% endbuttons %}
</form>
</body>
</html>

settings.py

BOOTSTRAP3 = {
    'jquery_url': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'
    'base_url': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/'
}

【讨论】：

这似乎也不起作用。它仍然显示为 HTML 格式。我实际上必须将 CDN 链接包含到 base.html 中。似乎只有当 both cdn 链接和加载模板标签等的代码在 base.html 中时，Bootstrap 元素才会显示。此外，当我在 settings.py 中注释掉 BOOTSTRAP3 字典时，它仍然有效（只要模板标签和 CDN 链接都在那里）。那本字典是可选的，还是表明有问题？
听起来这可能是包中的错误。设置中的 dict 是可选的。您能否提供带有和不带有 {% bootstrap_css %} {% bootstrap_javascript %} 的呈现 HTML？
我编辑了我的帖子以包含不带模板标签的 HTML
@SteveD。如果您在没有 CDN 标签的模板上打开浏览器中的查看源代码，{% bootstrap_css %} {% bootstrap_javascript %} 是否会转换为正确的标签？
它更改为

【解决方案4】：

这听起来像是 Django 初学者的书。如果是这样，请仔细检查您放置 html 文件的文件夹。我自己也因为这本书掉进了这个陷阱。他们在哪个目录中创建新文件并不总是很清楚。就我而言，我只是在我的引导程序无法在我的 /admin 和 change_password 页面上运行时才注意到这一点，但它在“家庭”页面上运行良好。

【讨论】：

【解决方案5】：

您是否在 settings.py 文件中添加了配置？请看这个链接 https://django-bootstrap3.readthedocs.io/en/latest/settings.html

【讨论】：