为啥引导程序不起作用，尽管我已经加载了它等（Django 项目）？
Posted
技术标签:
【中文标题】为啥引导程序不起作用，尽管我已经加载了它等（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>
【问题讨论】：
【参考方案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
【讨论】：
以上是关于为啥引导程序不起作用，尽管我已经加载了它等（Django 项目）？的主要内容，如果未能解决你的问题，请参考以下文章