问为什么bootstrap不能工作，尽管我已经加载了它，等等(Django项目)？
EN

Stack Overflow用户

提问于 2016-12-30 12:44:18

回答 5查看 3.4K关注 0票数 1

我正在做这个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部分包含了链接，在body部分包含了脚本)。

它起作用了！然而，当我从我的INSTALLED_APPS和所有加载安装在我计算机上的bootstrap3的代码(如{% bootstrap3 %} )中删除加载时，它不起作用。它又回到了丑陋的HTML格式。类似地，当我移除了CDN link，并保留了所有加载引导的bootstrap3代码安装在我的电脑上时，它也回到了丑陋的HTML格式。

我的问题是：

是不是应该是这样的？根据我目前为这个项目关注的一本书，我甚至不需要包括CDN链接和脚本(这本书根本没有提到它们是)，它应该可以工作。
如果它不应该是这样的，那么是不是我的代码有什么问题导致了这种情况？我是不是错过了什么步骤？我的bootstrap3文件是否在正确的目录中？(我只是通过命令提示符使用pip下载了它，并没有将其移动到其他地方)

我的Django网站的功能运行得很好。任何帮助，解释，或建议，我们都非常感谢！

编辑：如果我想要显示引导元素，base.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链接，它不会起作用。类似地，如果我只删除了模板标签，它也不会工作。

没有模板标记的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>

没有CDN链接的base.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 %}
    </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>

html

django

twitter-bootstrap

web

python

回答 5

Stack Overflow用户

回答已采纳

发布于 2018-09-13 11:15:41

除了常见的拼写错误(title标签等)，您已经定义了导入bootstrap，但是jquery行直到您真正将jquery放入参数中使用它才会加载。(我刚刚意识到这是相当旧的，因为新的已经在Bootstrap 4上了)。

你不需要手动包含任何cdn链接，你的django bootstrap标签可以为你处理这一部分，除非你决定改变链接(在这种情况下，你会将你的改变写入settings.py中的设置(假设你正在使用它)。

所以..。

包括bootstrap CSS的是这个标签：

{% bootstrap_css %}

并包含bootstrap javascript和jquery js文件，而不是：

{% bootstrap_javascript %}

尝试使用：

{% bootstrap_javascript jquery=True %}

或者：

{% bootstrap_javascript jquery %}

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

票数 0

Stack Overflow用户

发布于 2017-03-10 10:15:29

我也遇到过同样的问题，而且我们都犯了同样的打字错误:你在结束的title标签中忘记了">“

票数 2

Stack Overflow用户

发布于 2016-12-30 13:07:44

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

template.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/'
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41390759

复制

相似问题

问为什么bootstrap不能工作，尽管我已经加载了它，等等(Django项目)？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么bootstrap不能工作，尽管我已经加载了它，等等(Django项目)？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么bootstrap不能工作，尽管我已经加载了它，等等(Django项目)？
EN