django：引导模式不显示
Posted
技术标签:
【中文标题】django：引导模式不显示【英文标题】：django: bootstrap modal not displaying 【发布时间】：2022-01-09 15:48:53 【问题描述】：为了使用 django 在 python 中测试模态创建，我创建了一个名为 modalTestApp 的测试应用程序。
然后我复制了我从引导网站上下来的this html 并将其粘贴到应用程序内部的main.html 中，而不更改它。应用程序中的网页加载正常，但单击按钮预览模式没有任何作用。我在这里做错了什么？
main/base.html:
% load static %
<!DOCTYPE html>
<html>
<head>
<script src=% static "jquery/jquery-3.3.1.slim.min.js" %></script>
<script src=% static "jquery/jquery.min.js" %></script>
<script type="text/javascript" src=% static 'tablesorter-master/js/jquery.tablesorter.js' %></script>
<script src=% static "bootstrap-4.3.1-dist/js/popper.min.js" %></script>
<script src=% static "bootstrap-4.3.1-dist/js/bootstrap.min.js" %></script>
<style type="text/css">
.main
margin-top: 50px;
padding: 10px 0px;
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href=% static "bootstrap-4.3.1-dist/css/bootstrap.min.css" %>
<title>% block title % % endblock title %</title>
</head>
<body>
<nav class="navbar navbar-dar bg-dark pb-0 pr-0">
<ul class="nav flex-row">
<p class="navbar-brand mb-0 pt-0" style="color: #eee">Weather Data</p>
<a href="/", class="nav-link active">Home</a>
% if user.is_authenticated %
<a href="/stations", class="nav-link active">Stations</a>
% endif %
</ul>
<ul class="nav justify-content-end">
% if not user.is_authenticated %
<a href="/register", class="nav-link active">Register</a>
<a href="/login", class="nav-link active">Login</a>
% else %
<a href="/logout", class="nav-link active">logout</a>
<a href="/users/ user.username ", class="nav-link active">Profile</a>
% endif %
</ul>
</nav>
% block content %
% endblock content %
</body>
</html>
main.html:
% extends "main/base.html" %
%block content %
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
% endblock content %
编辑： 控制台输出+网页预览（点击按钮前后相同）：
【问题讨论】：
您能否添加浏览器控制台的输出，以及关于 Bootstrap JS 和 CSS 文件，您是否将它们添加到该应用程序的静态文件夹中？ 我收到一条错误消息，说缺少popper.min.js.map，因此我将<script> 行更改为使用cdnjs，但问题仍然存在，所有其他js 和css 文件都可以正常加载。我在 OP 中添加了控制台截图。
【参考方案1】：
我认为你不需要写脚本标签，你需要在引导文档中写下它是如何完成的 - https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template
举个例子
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
您还需要查看 django 文档以了解如何插入静态文件，这将帮助您使用图片、样式、javascript - https://docs.djangoproject.com/en/3.2/howto/static-files/
同样，举个例子
settings.py (Root setting)
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/
STATIC_URL = "/static/"
STATICFILES_DIRS = [str(BASE_DIR.joinpath("static"))]
urls.py (root urls)
urlpatterns = [
path("admin/", admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
【讨论】：
我的所有静态文件设置工作正常，但您的回答促使我再次查看“开始使用”页面。我复制了捆绑脚本而不是单独的脚本，现在它可以工作了！ 不客气！乐于助人！【参考方案2】：问题似乎是模板文件没有获取正确的 css 和 js，或者可能是您的目录不正确。检查我的代码低于其工作正常。谢谢
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>【讨论】：
以上是关于django：引导模式不显示的主要内容，如果未能解决你的问题，请参考以下文章