首页 > 其他分享 >django练手系列(四):制作网站的导航栏

django练手系列(四):制作网站的导航栏

时间:2023-12-30 15:11:57浏览次数:27  
标签:练手 Jquery 文件 新建 app Bootstrap django 文件夹 导航

外观部分:

一. 下载Bootstrap。网站的前端样式我采用的是Bootstrap v3。Bootstrap的网址是https://www.bootcss.com/。Bootstrap V3运行依赖Jquery,也需要安装Jquery。我使用的Jquery版本是Jquery-3.7.1。
二.文件夹规划。

1. 在app下新建static文件夹,存放静态文件。
2.在static下新建css,js,plugin文件夹,分别放置css文件,js文件,plugin文件。
3、在templates下新建app文件夹,app文件夹下新建layout文件夹,用来存放网页模板。
4、把下载好的bootstrap文件放到plugin文件夹中。
5、把下载好的Jquery文件复制到js文件夹中。
6、在layout文件夹下新建一个HTML文件,作为HTML的模板文件夹。

三.安装Bootstrap。
在layout文件夹下新建一个HTML文件,命名为basic.html;basic.html的代码如下:

<!DOCTYPE html>
<!--引入静态文件-->
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
</title>
<!--引入bootstrap-->
<link rel="stylesheet" href="{% static 'plugin/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
</head>
<body>
<!--引入jquery-->
<script type="text/javascript" src="{% static 'js/jquery-3.7.1.js' %}"> </script>
<!--引入bootstrap中的js代码-->
<script type="text/javascript" src="{% static 'plugin/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
</body>
</html>

四.在Bootstrap官网选择合适的导航栏样式,并把代码复制到basic.html。

标签:练手,Jquery,文件,新建,app,Bootstrap,django,文件夹,导航
From: https://www.cnblogs.com/shuxieben/p/17926677.html

相关文章

  • 在 Django 中使用 Vue.js 组件的步骤如下³⁴: 1. **安装 Vue.js**:首先,你需要在你的开
    在Django中使用Vue.js组件的步骤如下³⁴:1.**安装Vue.js**:首先,你需要在你的开发环境中安装Vue.js³。2.**创建Vue组件**:在Vue.js中,你可以创建一个新的Vue组件。例如,你可以在`src/components`文件夹下新建一个名为`Home.vue`的组件¹。3.**在Django模板中引......
  • 车载导航定制_智能车载终端安卓主板硬件解决方案
    智能车载一直是司机出行的得力助手,而集成了诸多强大功能的车载导航更是为驾驶者提供了更全面的驾驶辅助体验。从车辆行车记录、倒车影像,到AR实景导航、语音助手、ADAS辅助,再到云电子狗、蓝牙通话、影音娱乐等功能,这款车载导航系统为驾驶者带来了无与伦比的出行新体验。基于......
  • • django 的日志记录
    在setting.py中添加以下内容:importloggingimportdjango.utils.logimportlogging.handlersLOGGING={'version':1,'disable_existing_loggers':False,'formatters':{'standard':{'for......
  • 【HarmonyOS】ArkTS如何打开高德地图导航功能
     【关键字】鸿蒙应用开发、ArkTS、拉起高德地图、打开导航1、写在前面在应用开发的过程中,可能会遇到过这样的需求,拉起第三方导航应用,比如点击某个按钮直接跳转到高德地图导航的页面,那这个需求在鸿蒙中该如何实现呢?2、解决方案对于这个需求,其实实现起来也很简单,通过deeplink的方式,......
  • 要让你的Django网站可以供内网和外网访问,你需要进行以下设置: 1. **启动开发服务器**:
    要让你的Django网站可以供内网和外网访问,你需要进行以下设置:1.**启动开发服务器**:使用命令`./manage.pyrunserver0.0.0.0:8000`启动开发服务器。命令中需指定IP与监听端口,IP为0.0.0.0表示允许所有连接,端口8000必须未被占用¹。2.**修改settings.py**:编辑此开发服务器的set......
  • django 网页引用,路由分发
    1,网页引用1.1HelloWorld目录底下创建templates目录并建立runoob.html文件1.2修改HelloWorld/settings.py,修改TEMPLATES中的DIRS为 [os.path.join(BASE_DIR,'templates')]  2,路由分发#总路由fromapp01importurlsasapp01_urlsfromapp02importurlsas......
  • django 下拉列表
    1,html原生代码点击跳转<from><selectοnchange="window.location=this.value;"><optionvalue="a.html">用户管理</option><optionvalue="b.html">用户</option></select></form>注意onchange部分,这样即......
  • 【Django进阶】djangorestframework-jwt使用
    简介Jsonwebtoken(JWT),是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC7519).该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(SSO)场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息,以便于从资源服务器获取资......
  • 前端发送请求的时候 Content-Type 内容分类, django后端分别怎么接收
    前端发送请求时,常见的Content-Type内容类型包括:application/x-www-form-urlencoded这是最常见的内容类型,用于发送键值对形式的数据。数据被编码为URL查询字符串格式。Django后端可以通过request.POST来接收这些参数。multipart/form-data通常用于文件上传的表......
  • 2023最新中级难度Django面试题,包含答案。刷题必备!记录一下。
    好记性不如烂笔头内容来自面试宝典-中级难度Django面试题合集问:请解释Django的ORM是什么,它是如何工作的?Django的ORM(Object-RelationalMapping)是一种用于将数据库操作映射到Python对象上的技术。ORM提供了一种面向对象的方式来处理数据库,允许开发者通过定义模型......