每当我在Django项目中加入bootstrap.min.css的链接时,我的下拉菜单就变得无法点击。我是一个学习Django的人,对bootstrap没有什么了解。下面的教程使用了cdn来包含bootstrap,但由于网络连接的原因,我手动下载了它。虽然下载的bootstrap可以用,但是下拉菜单却不能用。谁能帮我解决一下... 我现阶段不能继续学习了。先谢谢了.代码如下。
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-">
<meta name="viewport" content="width=device-width, initial-scale=, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"
integrity="sha-MCw/SFnGEfJTGXwEOngsVZtNXFoaoApmYmi\ uXoPkFOJwJERdknLPMO"
crossorigin="anonymous">
<title>{% block title %}Newspaper App{% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-">
<a class="navbar-brand" href="{% url 'home' %}">Newspaper</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
{% if user.is_authenticated %}
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link dropdown-toggle" data-toggle="dropdown "href="#" id="userMenu"
aria-expanded="false">
{{ user.username }}
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="userMenu">
<a class="dropdown-item"
href="{% url 'password_change'%}">Change password</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}">
Log Out</a>
</div>
</li>
</ul>
{% else %}
<form class="form-inline ml-auto">
<a href="{% url 'login' %}" class="btn btn-outline-secondary">
Log In</a>
<a href="{% url 'signup' %}" class="btn btn-primary ml-">
Sign up</a>
</form>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<!-- Optional JavaScript -->
<!-- <jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-...slim.min.js" integrity="sha-qi/X+DzOrTabKJStQIAqVgRVzpbzosmXKp\ YfRvH+abtTEPijizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/\ ../ umd/popper.min.js" integrity="sha-ZMPrVomIykV++JUJjBkWLaUAdnaCwoqbB\ JiSnjAK/ lWvCWPIPm" crossorigin="anonymous"></script>
<script src="{% static 'js/bootstrap.min.js' %}"
integrity="sha-ChfqqxuZUCnJSK+MXmPNIyEZbWhIMqErYiqJxyMiZ\ OW/JmZQstwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
#settings.py
"""
Django settings for helloworld_project project.
Generated by 'django-admin startproject' using Django 3.0.5.
For more information on this file, see
https://docs.djangoproject.com/en/3.0/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.0/ref/settings/
"""
import os
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.0/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'z0qdn^sf&ill&gg%3myb#q)bzp$!^xnn-3(1po+blyjt1(bxyv'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
#local
'users.apps.UsersConfig',
'pages.apps.PagesConfig',
'articles.apps.ArticlesConfig',
#'blog.apps.BlogConfig',
#'accounts.apps.AccountsConfig',
#'posts.apps.PostsConfig',
#'page.apps.PageConfig',
# 3rd Party
'crispy_forms',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
TIME_ZONE = 'Africa/Lagos'
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'helloworld_project.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'helloworld_project.wsgi.application'
# Database
# https://docs.djangoproject.com/en/3.0/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
# Password validation
# https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/3.0/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/
STATIC_URL = '/static/'
AUTH_USER_MODEL = 'users.CustomUser'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
LOGIN_REDIRECT_URL = 'home'
LOGOUT_REDIRECT_URL = 'home'
CRISPY_TEMPLATE_PACK = 'bootstrap4'
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
'''EMAIL_HOST = 'smtp.sendgrid.net'
EMAIL_HOST_USER = 'apikey'
EMAIL_HOST_PASSWORD = 'my_sendgrid_password'
EMAIL_PORT = 587
EMAIL_USE_TLS = True
#ACCOUNT_EMAIL_VERIFICATION = 'none'
'''
#views.py
from django.urls import reverse_lazy
from django.views.generic import CreateView
from .forms import CustomUserCreationForm
# Create your views here.
class SignUpView(CreateView):
form_class = CustomUserCreationForm
success_url = reverse_lazy('login')
template_name = 'signup.html
登录,注销等都在模板注册中。
#project_urls.py
"""helloworld_project URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/3.0/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('users/', include('users.urls')),
path('users/', include('django.contrib.auth.urls')),
path('', include('pages.urls')),
#path('accounts/', include('django.contrib.auth.urls')),
#path('accounts/', include('accounts.urls')),
#path('', include('blog.urls')),
#path('', include('posts.urls')),
#path('', include('page.urls')),
#path('', include('pages.urls')),
]
最后下面是app_level url
#app_urls.py
from django.urls import path
from .views import SignUpView
urlpatterns = [
path('signup', SignUpView.as_view(), name='signup'),
]
下载Jquery和Popper JS,并将其放在静态文件夹中。
我曾经遇到过这样的问题:希望我的解决方案对你有用。
你在html文件中使用的jquery库(jquery-.slim.min.js)可能不包含创建下拉效果所需的功能,请使用jquery.min.js代替。
从你的html文件中删除它。
<script src="https://code.jquery.com/jquery-...slim.min.js" integrity="sha-qi/X+DzOrTabKJStQIAqVgRVzpbzosmXKp\ YfRvH+abtTEPijizo" crossorigin="anonymous"></script>
然后使用下面的jquery.min:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
连接到互联网并刷新。
P:S你也可以到以下地址下载jquery.min.js。jquery,只有87kb左右。然后把代码复制下来,保存为jquery.min.js在你的静态文件夹里,然后像这样连接到你的模板里。
<script src="{% static 'jquery.min.js' %}"></script>
然后你就不需要网络就能使用了 我想是你使用的jquery库的问题。
我以前也遇到过这种情况,我的解决方法是简单的放置Jquery,然后是Popper js,接着是Boostrap js------依次放置,我发现下拉功能是依赖于Popper和Jquery的。
看你的代码,我看到你是按照这个顺序来的,但是我不清楚你用django加载boostrap的方式。
请下载boostrap cdn,(和你下载Popper和Jquery的地方一样),重启服务器,用SHIFT + F5清除浏览器缓存,然后再试一次。
确保你有网络连接。
这是一个错误,在第23行。分号被我放错了。