Question

我正在研究这个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 以包含引导元素。我有两个应用程序，用户和 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>

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

有效！但是，当我从我的INSTALLED_APPS 中删除bootstrap3时，以及加载我计算机上安装的bootstrap3的所有代码（例如 {％load bootstrap3％} ，它没有用。它回到了丑陋的HTML格式。同样，当我删除了CDN链接并保留了我的计算机上安装了所有加载bootstrap的bootstrap3代码时，它又回到了丑陋的HTML格式。

我的问题是：

它应该是这样的吗？根据我目前正在关注这个项目的一本书，我甚至不需要包含CDN链接和脚本（书中没有提到它们根本）它应该工作
如果它不应该是这样的，我的代码是否有问题造成这种情况？我错过了一步吗？我的bootstrap3文件是否在正确的目录中？（我刚刚使用pip通过命令提示符下载它并且我没有将其移动到其他地方）

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

修改：如果我想要显示Bootstrap元素， 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>

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>

Answer 1

我遇到了同样的问题，我们都犯了同样的错误：你忘记了“＆gt;”在你的结束标题标签

Answer 2

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

Answer 3

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

您不需要手动添加任何CDN链接，除非您决定更改链接，否则django bootstrap标签可以为您处理该部分（在这种情况下，您将对设置的更改写入设置中） .py（假设您使用的是这种方式）。

所以...

包含引导CSS的是此标记：

{% bootstrap_css %}

并且用于包括引导javascript和jquery js文件-代替：

{% bootstrap_javascript %}

尝试使用：

{% bootstrap_javascript jquery=True %}

或：

{% bootstrap_javascript jquery %}

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

Answer 4

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

Answer 5

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

为什么bootstrap不起作用，虽然我加载了它等等（Django项目）？

5 个答案: