django bootstrap html实现左右布局,带折叠按钮,左侧可折叠隐藏

一、实现的效果

     在django项目中,需要使用bootstrap 实现一个左右分布的布局,左侧区域可以折叠隐藏起来,使得右侧的显示区域变大。(为了区分区域,左右加了配色,不好看的修改颜色即可)

 点击折叠按钮,左侧区域隐藏,右侧区域铺满:


 二、实现思路

        1、使用col-md属性,让左右两个区域一开始占据一定的宽度,左边设置col-md-2,表示占据2列的宽度, 右侧设置col-md-10,表示占据10的宽度,也就是左右是10:2的比例;

        2、添加一个折叠按钮,让按钮在两个区域中间的位置显示。

        3、当点击折叠按钮时,通过js调整左右两侧的区域大小,以及内容的显示和隐藏。从而实现折叠效果。


 三、程序实现

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SOC FPGA之流水灯设计

一、DS-5简介 Altera Soc EDS开发套件的核心是Altera版ARM Development Studio 5(DS-5)工具包,为SoC器件提供了完整的嵌入式开发环境、FPGA自适应调试和对Altera工具的兼容。 1.1 DS-5 eclipse破解 首先下载破解器 然后进入cmd运行,进入到破解器所在文…

【八】mybatis 日志模块设计

mybatis 日志模块设计 简介:闲来无事阅读一下mybatis的日志模块设计,学习一下优秀开源框架的设计思路,提升自己的编码能力 模块设计 在Mybatis内部定义了4个级别:Error:错误 、warn:警告、debug:调试、trance,日志优…

【计算机网络】应用层协议 -- DNS协议

文章目录 1. DNS背景2. 域名简介3. 域名解析过程4. 使用dig查看DNS过程 1. DNS背景 DNS(Domain Name System,域名系统)协议,是一个用来将域名转化为IP地址的应用层协议。 TCP/IP当中通过IP地址和端口号的方式,来确定…

C语言之结构体篇(简)

结构体 结构体的认知结构体的声明一般声明特殊声明匿名结构体类型 结构体自引用结构体变量的定义与初始化结构体变量的定义结构体变量的初始化 结构体传参结构体内存对齐位段位段声明位段的内存分配位段跨平台问题: 结构体是由我们自己创造的一种类型,使得C语言有能…

js-匈牙利算法

匈牙利算法 素数伴侣新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个注脚注释也是必不可少的K…

H5打包封装小程序系统开发

H5打包封装小程序系统开发 H5打包封装小程序系统开发是指将H5页面打包封装成小程序的开发过程。下面是一个简单的步骤: 准备工作:首先,需要准备好H5页面的代码和资源文件。确保H5页面在浏览器中正常运行,并且没有依赖于浏览器特…

『赠书活动 | 第十六期』《深入浅出Java虚拟机:JVM原理与实战》

💗wei_shuo的个人主页 💫wei_shuo的学习社区 🌐Hello World ! 『赠书活动 | 第十六期』 本期书籍:《深入浅出Java虚拟机:JVM原理与实战》 赠书规则:评论区:点赞&#xff…

将Visio和Excel导出成没有白边的PDF文件

1、VISIO如何无白边导出pdf格式 在使用Latex时,要导入矢量图eps格式。但是VISIO无法输出eps格式,这就需要将其导出为pdf。但是导出pdf时,往往会有大量的白边。VISIO无白边导出pdf格式的方法如下: 1.文件——开发工具——显示sha…

并发 如何创建线程 多线程

进程:一个程序的执行过程 线程:一个方法就是一个线程 并发:多个线程抢夺一个资源 操作同一个对象 创建线程方法1 //创建线程方法1 继承Thread类 重写润方法 调用start开启线程 public class TestThead extends Thread{Overridepublic voi…

redis 高级篇 redis 源码的读取分析

一 redis源码分析 1.1 源码分析 1每一个kv键值对应有一个dictEntry。 2.底层数据结构

景联文科技高质量成品数据集上新啦!

景联文科技近期上新多个成品数据集,包含图像、视频等多种类型的数据,涵盖丰富的场景,可满足不同模型的多元化需求。 高质量成品数据集可用于训练和优化模型,使得模型能够更加全面和精准地理解和处理任务,更好地应对复…

eclipse was unable to locate its companion shared library

当转移或者Copy工程时, eclipse was unable to locate its companion shared library eclipse.ini 里面的路径配置错误导致 --launcher.library C:/Users/**/.p2/pool/plugins/org.eclipse.equinox. launcher.win32.win32.x86_64_1.2.700.v20221108-1024 -product …

17. Spring 事务

目录 1. 事务定义 2. MySQL 中的事务使用 3. 没有事务时的插入 4. Spring 编程式事务 5. Spring 声明式事务 5.1 Transactional 作用范围 5.2 Transactional 参数说明 5.3 Transactional 工作原理 1. 事务定义 将⼀组操作封装成一个执行单元(封装到一起…

人工智能安全-2-非平衡数据处理

0 提纲 现象与原因非平衡数据处理方法概览数据预处理层面特征层算法层面1 现象与原因 非平衡数据分类问题:在网络信息安全问题中,诸如恶意软件检测、SQL注入、不良信息检测等许多问题都可以归结为机器学习分类问题。这类机器学习应用问题中,普遍存在非平衡数据的现象。 产…

java系列之list集合分组

文章目录 前言一、list是什么?二、list集合分组总结 前言 在Java编程中,List集合是一种常用的数据结构,用于存储一组元素。有时候,我们需要对List集合中的元素进行分组操作,即将相同属性或特征的元素归类到一组。这种…

向 Maven 中央仓库上传一个修改过的基于jeecg的autoPOI的 jar包记录

1、注册https://issues.sonatype.org/账号 下面就代表注册好了,同时提交的工单也通过了 2、这里主要是goupId 需要进行认证,需要到域名注册商近一个txt的解析,以便确保这个是你的 通过下面来验证你的域名信息,这里主要是上面的工…

前端文件上传实践与后端处理——文件分块上传

文件上传是现代Web应用程序中常见的功能之一。在这篇博客中,我们将探讨一个简单但完整的前端文件上传实践,同时提供一个后端示例,演示如何处理上传的文件。我们将使用JavaScript作为前端语言,并结合Node.js作为后端环境。让我们开…

Postgresql源码(109)并行框架实例与分析

1 PostgreSQL并行参数 系统参数 系统总worker限制:max_worker_processes 默认8 系统总并发限制:max_parallel_workers 默认8 单Query限制:max_parallel_workers_per_gather 默认2 表参数限制:parallel_workers alter table tbl …

针对高可靠性和高性能优化的1200V硅碳化物沟道MOSFET

目录 标题:1200V SiC Trench-MOSFET Optimized for High Reliability and High Performance摘要信息解释研究了什么文章创新点文章的研究方法文章的结论 标题:1200V SiC Trench-MOSFET Optimized for High Reliability and High Performance 摘要 本文详…

Flask学习笔记_异步论坛(四)

Flask学习笔记_异步论坛(四) 1.配置和数据库链接1.exts.py里面实例化sqlalchemy数据库2.config.py配置app和数据库信息3.app.py导入exts和config并初始化到app上 2.创建用户模型并映射到数据库1.models/auth.py创建用户模型2.app.py导入模型并用flask-mi…