使用 django-bootstrap3 难以创建导航栏切换
Posted
技术标签:
【中文标题】使用 django-bootstrap3 难以创建导航栏切换【英文标题】：Difficulty creating navbar toggle with django-bootstrap3 【发布时间】：2014-11-16 19:10:50 【问题描述】：我想使用django-bootstrap3 向我的网站添加一个简单的导航栏。我正在编辑以创建导航栏的 base.html 文档适用于 Twitter Bootstrap，但不适用于 django-bootstrap3。我遇到的问题是应该切换下拉列表的按钮在单击时没有任何作用。有没有人遇到过这个问题？
这是我的 base.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>% block title %% endblock title %</title>
% load bootstrap3 %
% bootstrap_css %
% bootstrap_javascript %
<style>
body
padding-top: 70px;
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!------Navbar ---------->
<header class = "navbar navbar-inverse navbar-fixed-top" role = "banner">
<div class = "container">
<div class ="navbar-header">
<button type = "button" class= "navbar-toggle" data-toggle = "collapse" data-target = "#dropdown">
<span class = "sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class ="navbar-brand">Project Name</a>
</div><!-- End Navbar Header-->
<div class = "collapse navbar-collapse" id = "dropdown">
<ul class = "nav navbar-nav navbar-right" role = "navigation">
<li><a href="#">Home</a></li>
<li><a href="#">New Page</a></li>
<li><a href="#">New Page</a></li>
<li><a href="#">New Page</a></li>
</ul>
</div><!-- End Nav Contents -->
</div><!-- End Container -->
</header>
【问题讨论】：
您在查找静态文件的位置可能存在一些问题。查看您的 settings.py 以确保它有意义。另外，查看 html 的源代码，看看是否有某些内容未被访问。 访问 base.html 时查看终端日志.. 有任何干扰..？ 没有干扰。我一直在阅读文档，不幸的是，它没有任何关于数据切换或数据目标的内容。我在我的 settings.py 文件中没有看到任何问题，并且其他所有内容都已渲染得很好。 【参考方案1】：问题是 django-bootstrap3 的 javascript 需要安装 jquery（我错误地认为 django-bootstrap3 会自动执行此操作）。我一引用 jquery，问题就立即得到解决。
【讨论】：
您能否详细说明您是如何正确引用 jquery 的？我有一个非常相似的问题。 django-bootstrap3 的默认设置是不包括 jquery 加载。因此，您可以添加链接以加载 jquery，或更改默认设置。看看@django-bootstrap3.readthedocs.io/en/latest/settings.html。具体来说，# Include jQuery with Bootstrap JavaScript (影响 django-bootstrap3 模板标签) 'include_jquery': True,【参考方案2】：我知道这个主题已有 2 年历史了，但如果将来每个人都有同样的问题，这里的解决方案是：在您的模板中，替换：
% bootstrap_javascript %
作者：
% bootstrap_javascript jquery=1 %
【讨论】：
以上是关于使用 django-bootstrap3 难以创建导航栏切换的主要内容，如果未能解决你的问题，请参考以下文章
django-bootstrap3 - bootstrap_css 的目的是啥？
软件自动化测试Django-bootstrap3 | 发布会管理