this W3 site
我正在努力让这个工作起来。我怀疑我的问题与javascript有关,但我在这方面没有任何经验。
-
我已经在我的
settings.py
-
<src=..>
标签输入
html
模板但不工作
-
已尝试导入
.css
文件(最后的手段,不确定你是否打算这么做)。
我本以为这是bootstrap可以做的事情,但显然它太利基了??
https://imgur.com/a/bzYSntm
(排除无关应用程序)
var dropdown = document.getElementsByClassName("dropdown-btn-me");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
/* this class is the self-made drop-down box in sidenav */
.dropdown-nav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* styling for the self-made drop-down box in sidenav */
.dropdown-nav a, .dropdown-btn-me {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width:100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* change navbar color on mouse-over */
.dropdown-nav a:hover, .dropdown-btn-me:hover {
color: #f1f1f1;
}
/* Main content */
.main {
margin-left: 200px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
/* Add an active class to the active dropdown button */
.active {
background-color: green;
color: white;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container-me {
display: none;
background-color: #262626;
padding-left: 8px;
}
/* Optional: Style the caret down icon */
.fa-caret-down {
float: right;
padding-right: 8px;
}
整个模板=基本.html
{% load static %}
<!-- enables you to load all CSS files from 'static' folder-->
<!-- part 1 of 2. Note you also need to load using <link> in <head> -->
<!DOCTYPE html>
<html>
<head>
<!-- Start bootstrap 4 header-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- End bootstrap 4 header tags-->
<link rel="stylesheet" type="text/css" href="{% static 'dashboard/main.css' %}">
<!-- Part 2 of 2, this <link> links to main.css stylesheet via an absolute URL -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- load jQuery from the closest Google server -->
<script src="{% static 'dashboard/dropdown-menu.js' %}"></script>
<!-- loads static javascript for the drop-down. Unsure if working correctly -->
""" the highlighted colour is wrong for the javascript """
{% if title %}
<title>IdentiFind - {{ title }}</title>
{% else %}
<title>IdentiFind</title>
{% endif %}
</head>
<body>
<!-- Start bootstrap 4 navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="{% url 'home-dashboard' %}">IdentiFind</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'home-dashboard' %}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'about' %}">About</a>
</li>
</ul>
</div>
<!-- Navbar right hand side -->
<div class="navbar-nav">
{% if user.is_authenticated %}
<!-- is_authenticated is from django lib that checks if a user is logged in or not -->
<!-- 'user' is stock django language, no need to pass this in -->
<div class="row">
<a class="nav-item nav-link" href="#">Profile</a>
<a class="nav-item nav-link px-2" href="#">Make a new post</a>
<a class="nav-item nav-link px-2" href="#">Logout</a>
</div>
{% else %}
<div class="row">
<a class="nav-item nav-link px-2" href="#">Login</a>
<!-- px-2 gives spacing of 2*0.5 on left & right of item -->
<a class="nav-item nav-link px-2" href="#">Register</a>
</div>
{% endif %}
</div>
<!-- End navbar right hand side -->
</nav>
<!-- End Bootstrap 4 navbar -->
<!-- sidebar navbar -->
<!-- the below if statement stops sidebar from being displayed on login page-->
{% url 'login' as the_url %}
{% if the_url != request.get_full_path %}
<div class="blank-row d-none d-sm-block"></div>
<!-- this line ensures a nice blank space between navbar & content -->
<!-- removes this line on small screens -->
<main role="main" class="container">
<!-- start sidebar flex-xl-nowrap-->
<div class="row">
<!-- defining rows allows you to use columns & grid spacing -->
<div class="col-md-3 content-section ml-auto d-none d-sm-block">
<!-- col-md-3 means this class will take up 3/12 medium (md) size cols-->
<!-- content-section makes a nice white box around the area -->
<!-- ml-auto creates automatic separation depending on screen size-->
<h3>Pop-down navbar here (disappear on mobile)</h3>
<p class='text-muted'>Insert buttons & drop-down headers.
<br>Follow design below. Match colour scheme with navbar.
<div class="dropdown-nav">
<a href="#">About Us</a>
<a href="#">Contact Us</a>
<button class="dropdown-btn-me">Dropdown button
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container-me">
<a class="dropdown-item" href="#">DropD 1</a>
<a class="dropdown-item" href="#">DropD 2</a>
<a class="dropdown-item" href="#">DropD 3</a>
</div>
</div>
</p>
</div>
<!-- End sidebar -->
<div class="col-md-7 ml-auto content-section">
{% block content %}
<h1>content test</h1>
{% endblock content %}
</div>
</div>
</main>
{% endif %}
<!-- block login displays login forms-->
{% block login %}
{% endblock login %}
</div>
<!-- footer below -->
<footer class="footer">
<div class="container">
<small class="text-muted">(C) 2020 </small>
<small> <a href="{% url 'about' %}">IdentiFind </a></small>
<small class="text-muted">All Rights Unreserved.</small>
<small> <a href="{% url 'terms-of-service' %}">Terms of Service</a></small>
<small class="text-muted"> and our </small>
<small> <a href="{% url 'privacy-policy' %}">Privacy Policy.</a></small>
</div>
</footer>
<!-- Bootstrap 4 tags-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
相关设置.py=
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
