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

news2024/11/18 3:31:45

一、实现的效果

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

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


 二、实现思路

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

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

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


 三、程序实现

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

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

相关文章

JavaEE初阶之文件操作 —— IO

目录 一、认识文件 1.1认识文件 1.2树型结构组织 和 目录 1.3文件路径(Path) 1.4其他知识 二、Java 中操作文件 2.1File 概述 2.2代码示例 三、文件内容的读写 —— 数据流 3.1InputStream 概述 ​3.2FileInputStream 概述 3.3代码示例 3.4利用 Scanner 进行字…

procreate怎么插入图片?如何将图片插入到procreate图层里?

Procreate是一款运行在iPadOS上的强大的绘画应用软件,让创意人士随时把握灵感,通过简易的操作系统,专业的功能集合进行素描、填色、设计等艺术创作。procreate怎么插入图片?如何将图片插入到procreate图层里? 打开平板…

【二分+滑动窗口优化DP】CF883 I

Problem - 883I - Codeforces 题意: 思路: 首先,要让最大值最小,很显然要二分 那么就相当于有了一个极差的限制,看能不能分组,每组至少m个元素 那么就是考虑分段DP,直接n^2很容易写 但是n …

偶发odbc.ini文件被清空

现象:某个现场 odbc.ini 莫名其妙被清空,偶发情况,大概几周出现一次。 unixodbc官网地址–> https://www.unixodbc.org/ //2.3.7 BOOL _odbcinst_SystemINI( char *pszFileName, BOOL bVerify ) {FILE *hFile;char …

这个Python项目让古诗变得更易读,看完《长安三万里》惊艳了!

大家好,这里是程序员晚枫,最近在小红薯更新生活VLOG,被骂惨了! 周末和小明去看了一场电影:《长安三万里》。 看电影的过程中发生了一件尴尬的事情:很多诗词里的字我都不认识。 回家以后,我赶…

机器学习深度学习——非NVIDIA显卡怎么做深度学习(坑点排查)

👨‍🎓作者简介:一位即将上大四,正专攻机器学习的保研er 🌌上期文章:机器学习&&深度学习——数值稳定性和模型化参数(详细数学推导) 📚订阅专栏:机器…

systemverilog中fork..join, join_any, join_none的用法和解析

1、fork.. join, join_any以及join_none的用法进行总结 1.1、 fork..join fork..join: 必须等到statement1,statement2,statement3全部执行完之后,statement4才可以执行。fork…join内的所有语句都是并发执行(对于begin…end内…

浪涌保护器10/350us和8/20us是什么意思,两者有何区别?

在选择浪涌保护器的时候,浪涌保护器的防雷能力放电电流后面的单位一般是KA,KA后面还有个参数是10/350us或者8/20us,大家可能对这2个参数不太熟悉。 那么,浪涌保护器10/350us和8/20us是什么意思,两者有何区别呢&#x…

025 - max()函数

MAX() 函数: MAX 函数返回一列中的最大值。NULL 值不包括在计算中。 SQL MAX() 语法: SELECT MAX(column_name) FROM table_name; 注释:MAX 也可用于文本列,以获得按字母顺序排列的最高或最低值。 -- 实际操作(查询salary的最大值&#x…

【十万个等保小知识】等保测评报告是在等保整改之后发吗?

等保2.0政策已经严格落地执行了一段时间,但大家对于等保2.0政策还存在很多疑问,例如等保测评报告是在等保整改之后发吗?今天我们小编就来为大家简单回答一下,仅供参考哦! 等保测评报告是在等保整改之后发吗&#xff1f…

uniapp echarts 点击失效

这个问题网上搜了一堆,有的让你降版本,有的让你改源码。。。都不太符合预期,目前我的方法可以用最新的echarts。 这个方法就是由npm安装转为CDN,当然你可能会质疑用CDN这样会不稳定,那如果CDN的地址是本地呢&#xff1…

【数据库】将excel数据导入mysql数据库

环境:Windows10 mysql8以上 将你要导入的excel表另存为txt格式 打开txt格式文件,删除表头行并另存为并更改编码方式(由于与数据库的编码不同,会导致导入报错) 通过命令行登录数据库 winr cmd进入 进入装mysql的目录位…

css中的bfc是什么?

什么bfc? BFC(Block Formatting Context)块级 格式化 上下文。 BFC就是页面上的一个隔离的独立盒子,容器里面的子元素和外面的元素不会相互影响。 为什么要bfc? bfc是我们去主动触发的,并不是自动就存在的,它是帮助我们解决cs…

Zabbix报警机制、配置钉钉机器人、自动发现、主动监控概述、配置主动监控、zabbix拓扑图、nginx监控实例

day02 day02配置告警用户数超过50,发送告警邮件实施验证告警配置配置钉钉机器人告警创建钉钉机器人编写脚本并测试添加报警媒介类型为用户添加报警媒介创建触发器创建动作验证自动发现配置自动发现主动监控配置web2使用主动监控修改配置文件,只使用主动…

修改el-select或者el-input样式失效

下午改el-input和el-select这两个的样式真的烦,,,还不如写原生标签了。。 样式使用的是sass 我已经在样式器中挨着挨着去找了,把层级的类都写下来了 .select-wraper{//下拉框.el-select{.el-input .el-input__wrapper{backgrou…

复习之vsftp服务

一、vsftp服务简介 文件传输协议(File Transfer Protocol,FTP)是用于在网络上进行文件传输的一套标准协议,它工作在 OSI 模型的第七层 即应用层, 使用 TCP 传输而不是 UDP, 客户在和服务器建立连接前要经过…

浅说React-Dnd的使用

前言(学习原因) 近期在工作中遇到一个新的需求:具体大概效果看下面.gif 当时看到这个需求经师兄提醒知道了React-Dnd,想到了表格 Table - Ant Design里有一个可拖拽表格的效果,照搬到了项目里发现不太能满足我们的需求,就去搜了一…

逆波兰表达式求值

给你一个字符串数组 tokens ,表示一个根据 逆波兰表示法 表示的算术表达式。 请你计算该表达式。返回一个表示表达式值的整数。 注意: 有效的算符为 、-、* 和 / 。每个操作数(运算对象)都可以是一个整数或者另一个表达式。两个…

语义检索系统【全】:基于Milvus+ERNIE+SimCSE+IBN实现学术文献语义检索系统完整版

搜索推荐系统专栏简介:搜索推荐全流程讲解(召回粗排精排重排混排)、系统架构、常见问题、算法项目实战总结、技术细节以及项目实战(含码源) 专栏详细介绍:搜索推荐系统专栏简介:搜索推荐全流程讲解(召回粗排精排重排混排)、系统架构、常见问题、算法项目实战总结、技术…

PCB添加二维码

PCB添加二维码 1、PCB上添加二维码 在PCB上添加二维码,可以清楚的展示PCB板子的信息,包括:制板人员、时间以及这个板子所用的仪器。 2、如何在PCB上添加二维码(错误示例) 首先说一种错误的方法,试了很多…