首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >为什么bootstrap不能工作,尽管我已经加载了它,等等(Django项目)?

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

Stack Overflow用户
提问于 2016-12-30 12:44:18
回答 5查看 3.4K关注 0票数 1

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

首先,我使用命令提示符来安装django-bootstrap3,如下所示:

代码语言:javascript
复制
pip install django-bootstrap3

安装成功。Bootstrap3被下载到我的计算机c:\python34\lib\site-packages中,然后,我将它作为settings.py中的第三方应用程序包含在我的主项目目录下的INSTALLED_APPS列表中,如下所示:

代码语言:javascript
复制
 INSTALLED_APPS =(
--apps--
'bootstrap3',
)

同样在settings.py中,我像这样包含了jQuery:

代码语言:javascript
复制
BOOTSTRAP3 = {'include_jquery': True}

我修改了我的base.html以包含引导程序元素。我有两个应用程序,users和mynotess (抱歉,名字不好)

base.html

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

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

然后,我将其包含在base.html中,直接从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">
<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必须是这样的。

代码语言:javascript
复制
<!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 (不起作用)

代码语言:javascript
复制
<!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 (也不起作用)

代码语言:javascript
复制
{% 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>
EN

回答 5

Stack Overflow用户

回答已采纳

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

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

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

所以..。

包括bootstrap CSS的是这个标签:

代码语言:javascript
复制
{% bootstrap_css %}

并包含bootstrap javascript和jquery js文件,而不是:

代码语言:javascript
复制
{% bootstrap_javascript %}

尝试使用:

代码语言:javascript
复制
{% bootstrap_javascript jquery=True %}

或者:

代码语言:javascript
复制
{% bootstrap_javascript jquery %}

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

票数 0
EN

Stack Overflow用户

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

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

票数 2
EN

Stack Overflow用户

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

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

template.html

代码语言:javascript
复制
<!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

代码语言:javascript
复制
BOOTSTRAP3 = {
    'jquery_url': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'
    'base_url': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/'
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41390759

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档