django学习入门系列之第四点《BootStrap依赖》

文章目录

  • 往期回顾


  • BootStrap依赖于JavaScript的类库,JQuery下载

  • 下载JQuery,在界面上应用JQuery

  • 在页面上应用BootStrap和avaScript的类库【JQuery是avaScript的类库】

JQuery的官网:

jQuery

  • 如果要应用JQuery
    • 则要在body里面导入文件
<script src="/static/js/js.js"></script>
<script src="/static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

整体样例代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 图标库  --><link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css"><!-- 图标库  --><link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.min.css"><!-- 开发版本  --><link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css"><!-- 生产版本(压缩版)   --><link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css"></head>
<body><nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav><!-- js文件(3.7版本)  -->
<script src="/static/js/js.js"></script>
<!-- bootstrap的js动态效果文件  -->
<script src="/static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>

在这里插入图片描述

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1:用户注册】
7.【案例2:用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】
10.【CSS基础样式介绍1】
11.【CSS基础样式介绍2】
12.【CSS基础样式介绍3】
13.【CSS基础样式介绍3】
14.【案例 小米商城头标】
15.【案例 小米商城头标总结】
16.【案例 小米商城二级菜单】
17.【案例 商品推荐部分】
18.【伪类简单了解】
19.【position】
20.【案例 小米商城中app图标代码】
21.【边框及总结】
22.【BootSrap初了解】
23.【BootSrap的目录栏】
24.【BootSrap的栅格系统】
25.【案例 博客案例】
26.【案例 登录】
27.【案例 后台管理样例】
28.【图标】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/872889.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[Java后端面试题1]2024-07-16

TIME_WAIT与CLOSE_WAIT的区别 TIME_WAIT 和 CLOSE_WAIT 是 TCP 连接状态的一部分&#xff0c;用于描述连接在不同阶段的状态。它们有以下主要区别&#xff1a; TIME_WAIT 定义: 这是主动关闭连接的一方在发送了最后一个 ACK 后进入的状态。出现原因: 确保远程 TCP 协议收到最…

react中状态管理useState

[secret,setSecret]useState(null)useEffect(() > {http.get(/api/suggest/qrcode/, { params: { uniqueid: store.uniqueid } }).then(res > {//异步获取的值不是实时返回的setSecret(res.secret);return http.get(/api/suggest/userinfo/, { params: { secret: secret …

Mysql8.4参考手册走读(六)

MySQL 8.4 常见问题解答&#xff1a;服务器 SQL 模式 问题答案什么是服务器 SQL 模式&#xff1f;服务器 SQL 模式定义了 MySQL 应支持的 SQL 语法和它应该执行哪种类型的数据验证检查。这使在不同环境中使用 MySQL 变得更加容易&#xff0c;并且将 MySQL 与其他数据库服务器一…

MySQL(7)内外连接+索引

目录 1.内外连接; 2. 索引; 1.内外连接: 1.1内连接: 语法: select 字段 from 表名 inner join 表名 on 字段限制; 1.2 外连接: 分为左右外连接; (1)左外连接: 语法: select * from 表名 left join 表名 on 字段限制. &#x1f330;查询所有学生的成绩&#xff0c;如果这个学生…

【C++】编程新思想,通过封装新的类创建新的数据类型

我们可以通过封装一个新的C++类来实现新的数据类型的定义。 目录 优点: 主要方法: show(); reset(); use(); change(); operator++(): operator++(int); operator--() ; self_increase(); self_reduction(); 完整代码: 优点: 用新的名字代替原有数据类型名…

什么才是好用的大模型?

随着大模型在千行百业的逐步落地&#xff0c;中国基础大模型正直面来自用户端的诸多拷问。 近日&#xff0c;随着OpenAI宣布禁止中国用户使用其API&#xff0c;更多的国产大模型都在提供替代方案和优惠措施&#xff0c;来吸引和支持开发者进行用户迁移。 这既是一次挑战&…

多多OJ评测系统 前端项目环境初始化 安装Vue脚手架 引入Arco Design组件

目录 确定环境 命令行输入 装一下脚手架 监测一下是否安装成功 创建一个项目 选择一系列的配置后 我们打开webStorm 配置脚手架后我们先运行 我们这边能获取到网址 其实我们脚手架已经帮我们做到了 接下来要引入相关的组件 选择用npm进行安装 我们建议的是完整引入…

UDP客户端、服务端及简易聊天室实现 —— Java

UDP 协议&#xff08;用户数据包协议&#xff09; UDP 是无连接通信协议&#xff0c;即在数据传输时&#xff0c;数据的发送端和接收端不建立逻辑连接&#xff0c;简单来说&#xff0c;当客户端向接收端发送数据时&#xff0c;客户端不会确认接收端是否存在&#xff0c;就会发出…

windows镜像下载网站

一个专注于提供精校、完整、极致的Windows系统下载服务的仓储站&#xff0c;网站托管于Github。 网站&#xff1a;https://hellowindows.cn/ 下载方式&#xff1a;ED2k&#xff0c;BT&#xff0c;百度网盘 MSDN - 山己几子木&#xff0c;提供Windows 11、Windows 10等不同版本…

单例模式Singleton

设计模式 23种设计模式 Singleton 所谓类的单例设计模式&#xff0c;就是采取一定的方法保证在整个的软件系统中&#xff0c;对某个类只能存在一个对象实例&#xff0c;并且该类只提供一个取得其对象实例的方法。 饿汉式 public class BankTest {public static void main(…

Qt模型/视图架构——委托(delegate)

一、为什么需要委托 模型&#xff08;model&#xff09;用来数据存储&#xff0c;视图&#xff08;view&#xff09;用来展示数据。因此&#xff0c;模型/视图架构是一种将数据存储和界面展示分离的编程方法。具体如下图所示&#xff1a; 由图可知&#xff0c;模型向视图提供数…

python 迭代器介绍 map() 函数

迭代器&#xff08;Iterator&#xff09;在Python中是一种可以记住遍历位置的对象。迭代器对象从集合的第一个元素开始访问&#xff0c;直到所有的元素被访问完为止。迭代器只能往前不会后退&#xff0c;也就是只能前进遍历&#xff0c;不能反向遍历或跳过元素。迭代器在Python…

oracle备份和恢复-----从全库备份中恢复用户库解题思路

文章目录 从全库备份中恢复用户库的思路备份全库恢复用户库 从全库备份中恢复用户库的思路 备份全库 第一步&#xff1a;使用系统用户将oracle整个导出备份----全库备份 1.exp system/system buffer65536 feedback100000 fully fileD:/exp.dmp logexp.log ---导出备份文件位…

响应式编程:Project Reactor与WebFlux

在现代Web应用程序中&#xff0c;响应式编程成为一种越来越流行的方法&#xff0c;以处理高并发和高吞吐量。响应式编程不仅仅是一种新的编程范式&#xff0c;它还引入了一套新的工具和技术来处理数据流和异步事件。本文将深入探讨Project Reactor与Spring WebFlux&#xff0c;…

3D问界—MAYA制作铁丝栅栏(透明贴图法)

当然&#xff0c;如果想通过建立模型法来实现铁丝栅栏的效果&#xff0c;也不是不行&#xff0c;可以找一下栅栏建模教程。本篇文章主要是记录一下如何使用透明贴图来实现创建铁丝栅栏&#xff0c;主要应用于场景建模&#xff0c;比如游戏场景、建筑场景等大环境&#xff0c;不…

PGCCC|【PostgreSQL】PG考证对工作上有什么好处# PG证书

认证 PostgreSQL 考证&#xff08;PostgreSQL Certification&#xff09;在工作上有以下几个好处&#xff1a; 增强专业能力&#xff1a;通过考证&#xff0c;可以系统地学习和掌握 PostgreSQL 数据库的知识和技能&#xff0c;提高自己的专业水平。 提升职业竞争力&#xff1…

CentOS 7 初始化环境配置详细

推荐使用xshell远程连接&#xff0c;如链接不上 请查看 CentOS 7 网络配置 修改主机名 hostname hostnamectl set-hostname xxx bash 关闭 SElinux 重启之后生效 配置yum源&#xff08;阿里&#xff09; 先备份CentOS-Base.repo&#xff0c;然后再下载 mv /etc/yum.repos…

JAVA Math类详细介绍

Math类常见方法&#xff1a; 1&#xff09;abs 绝对值 2&#xff09;pow 求幂 3&#xff09;ceil 向上取整 4&#xff09;floor 向下取整 5&#xff09;round 四舍五入 6&#xff09;sqrt 求开方 7&#xff09;random 求随机数 //思考:请写出获取 a-b之间的一个随机整数…

android R ext4 image打包脚本介绍

一、Android R打包指令使用介绍 &#xff08;1&#xff09;mkuserimg_mke2fs #./mkuserimg_mke2fs --help usage: mkuserimg_mke2fs [-h] [--android_sparse] [--journal_size JOURNAL_SIZE][--timestamp TIMESTAMP] [--fs_config FS_CONFIG][--product_out PRODUCT_OUT][--b…

小程序图片下载保存方法,图片源文件保存!

引言 现在很多时候我们在观看到小程序中的图片的时候&#xff0c;想保存图片的原文件格式的话&#xff0c;很多小程序是禁止保存的&#xff0c;即使是让保存的话&#xff0c;很多小程序也会限制不让保存原文件&#xff0c;只让保存一些分辨率很低的&#xff0c;非常模糊的图片…