为什么引导不能工作，虽然我已经加载了，等等（Django项目）？

2024-04-20 00:53:06 发布

您现在位置：Python中文网/ 问答频道 /正文
1923 3

我在做这个Django项目。功能运行得非常好。当我开始使用Bootstrap3开发前端时，我遇到了一些问题（更像是混淆）。在

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

pip install django-bootstrap3

安装成功。Bootstrap3被下载到我电脑里的这个位置，然后我把它作为第三方应用程序包含在设置.py在我的主项目目录中安装的应用程序列表中，如下所示：

^{pr2}$

也在设置.py，我将jQuery包括在内，如下所示：

BOOTSTRAP3 = {'include_jquery': True}

我修改了我的基本.html包括引导元素。我有两个应用程序，用户和mynotess（抱歉命名错误）

基本.html

编辑：基本.html在问题的底部。在

不知为什么，我装了本地主机：8000而且它仍然是普通的难看的HTML格式。我在网上查了一下，发现了一些CDN链接，我想如果我只使用CDN链接，它会有用的。在

然后我把这个写进了基本.html，直接从引导程序的网站复制。在

<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部分包含链接，在body部分包含脚本）。在

成功了！然而，当我从我已安装的应用程序中删除bootstrap3并删除安装在我的计算机上的bootstrap3的所有代码（例如{%load bootstrap3%}，它就不起作用了。它又回到了丑陋的HTML格式。类似地，当我删除CDN链接并将加载引导程序的所有bootstrap3代码保存在我的计算机上时，它也回到了难看的HTML格式。在

我的问题是：

  • 应该是这样吗？根据我目前正在为这个项目跟踪的一本书，我甚至不必包括CDN链接和脚本（这本书根本没有提到它们），它应该可以工作。

  • 如果不是这样的，是不是我的代码有问题导致了这个问题？我是不是错过了一步？我的bootstrap3文件在正确的目录中吗？（我只是通过命令提示符使用pip下载的，我没有把它移到其他地方）

我的Django网站的功能很好。 如有任何帮助、解释或建议，我们将不胜感激！在

编辑 基本.html如果我想显示引导元素，就必须这样。在

<!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链接，那就没用了。类似地，如果我只删除模板标记，它也不起作用。在

基本.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>

基本.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>

Tags： httpsdivcomurlhtmlscriptlicontent
3条回答
网友
1楼 · 编辑于 2024-04-20 00:53:06

我也有同样的问题，我们都犯了同样的错误：你忘了在你的结束标题标签“>；”

网友
2楼 · 编辑于 2024-04-20 00:53:06

听起来{% 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>

在py设置在

^{pr2}$
网友
3楼 · 编辑于 2024-04-20 00:53:06

除了常见的打字错误（title标签等），您已经定义了导入引导，但是jquery行直到您真正将jquery插入参数以使用它时才会被加载。（我刚刚意识到这是一个相当老的，因为新的已经在引导4）。在

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

所以。。。在

包括引导CSS的是以下标记：

{% bootstrap_css %}

包括引导javascript和jquery js文件，而不是：

^{pr2}$

尝试使用：

{% bootstrap_javascript jquery=True %}

或者：

{% bootstrap_javascript jquery %}

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

相关问题 更多 >

    编程相关推荐