django bootstrap html实现左右布局,带折叠按钮,左侧可折叠隐藏
一、实现的效果
在django项目中,需要使用bootstrap 实现一个左右分布的布局,左侧区域可以折叠隐藏起来,使得右侧的显示区域变大。(为了区分区域,左右加了配色,不好看的修改颜色即可)
点击折叠按钮,左侧区域隐藏,右侧区域铺满:
二、实现思路
1、使用col-md属性,让左右两个区域一开始占据一定的宽度,左边设置col-md-2,表示占据2列的宽度, 右侧设置col-md-10,表示占据10的宽度,也就是左右是10:2的比例;
2、添加一个折叠按钮,让按钮在两个区域中间的位置显示。
3、当点击折叠按钮时,通过js调整左右两侧的区域大小,以及内容的显示和隐藏。从而实现折叠效果。
三、程序实现
相关文章:

django bootstrap html实现左右布局,带折叠按钮,左侧可折叠隐藏
一、实现的效果 在django项目中,需要使用bootstrap 实现一个左右分布的布局,左侧区域可以折叠隐藏起来,使得右侧的显示区域变大。(为了区分区域,左右加了配色,不好看的修改颜色即可) 点击折叠按钮,左侧区域隐藏,右侧区域铺满: 二、实现思路 1、使用col-md属性,让左…...

Mapping温度分布验证选择数据记录仪时需要考虑的13件事
01 什么是温度分布验证? 温度分布验证是通过在规定的研究时间内测量定义区域内的多个点来确定特定温度控制环境或过程(如冷冻柜、冰箱、培养箱、稳定室、仓库或高压灭菌器)的温度分布的过程。温度分布验证的目标是确定每个测量点之间的差异&…...
【题解】 判断一个链表是否为回文结构
判断一个链表是否为回文结构 题目链接:判断一个链表是否为回文结构 解题思路1:借助数组 遍历链表将值都放在数组中,再遍历数组元素,判断该数组是否为一个回文结构 代码如下: bool isPail(ListNode* head) {ListNod…...

Microsoft Message Queuing Denial-of-Service Vulnerability
近期官方公布了一个MSMQ的拒绝服务漏洞,可能因为网络安全设备的更新,影响业务,值得大家关注。 漏洞具体描述参见如下: Name: Microsoft Message Queuing Denial-of-Service Vulnerability Description: Microsoft Message Queuing…...

软件设计师(五)软件工程基础知识
一、软件工程概述 软件开发和维护过程中所遇到的各种问题称为“软件危机”。 软件工程是指应用计算机科学、数学及管理科学等原理,以工程化的原则和方法来解决软件问题的工程,其目的是提高软件生产率、提高软件质量、降低软件成本。 #mermaid-svg-h3j6K…...
Java中的JUnit单元测试方法的使用
Java中的JUnit单元测试方法 使用步骤如下: 选中当前工程 - 右键选择:build path - add libraries - JUnit 4 - 下一步创建Java类,进行单元测试。 此时的Java类要求:① 此类是public的 ②此类提供公共的无参的构造器此类中声明单…...

一文学透设计模式——抽象工厂模式
创建者模式 抽象工厂模式 概念 抽象工厂模式是围绕一个超级工厂创建其他工厂。该超级工厂又称为其他工厂的工厂。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 这是很多地方对于抽象工厂模式的描述,说实话感觉不是特别好懂。…...
Vue3与Vue2区别和总结(1)
在2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) 既然vue2已经存在了六七年之久为什么还要研发vue3呢? 那就不得不提vue3带来的提升了 1.Vue3带来了什么 1.性能的提升 打包大小减少41% 初次…...

【华秋推荐】物联网入门学习模块 ESP8266
随着全球信息技术的不断进步和普及,物联网成为当今备受关注的技术热点之一。通过物理和数字设备之间的连接来实现自动化和互联互通的网络。无线传感器、云计算和大数据分析等技术,物联网使设备能够相互交流和共享信息,实现智能化的自动化操作…...

本科专科毕业论文如何选题-附1000多论文题目-论文选题--【毕业论文】
文章目录 本系列校训毕设的技术铺垫论文选题选题目的和意义:选题举例参考文献 配套资源 本系列校训 互相伤害互相卷,玩命学习要你管,天生我才必有用,我命由我不由天! 毕业论文不怕难,毕业设计来铺垫&#…...
pip安装jupyter notebook
之前电脑安装了anaconda,里面安装了jupyter notebook,用来做PPT之类的展示总让我觉得有点“炫酷”。 现在换了新电脑。没有anaconda,纯粹只是装了python3.11,然后突然也想手工安装下jupyter notebook,于是只能通过pip方…...

STM32刷Micropython固件参考指南
STM32刷Micropython固件指南 其实刷固件和普通的程序下载烧录无多大的差异,主要是其他因数的影响导致刷固件或刷完固件无法运行的情况和相关问题。 📑刷固件教程 固件下载。目前所支持的stm32型号有这些: stm32f0, stm32f4, stm32f7, stm32g…...

学生信息管理系统自动化测试
项目地址: http://82.156.151.156:8080/login.html 一、系统测试用例 二、测试实现过程 先是根据自己的项目设计了一个 UI 自动化测试用例, 然后根据这个测试用例使用了 selenium4自动化测试工具和 JUnit5单元测试框架结合实现的 web 自动化测试.。 测试模块划分…...
Java面向对象之toString()方法
toString()方法 toString()方法在Object类中定义,其返回值是String类型,返回类名和它的引用地址。在进行String与其它类型数据的连接操作时,自动调用toString()方法。 Date nownew Date(); System.out.println(“now”now); 相当于 System.…...
MySQL(一)
mysql简介 1、什么是数据库 ? 数据库(Database)是按照数据结构来组织、存储和管理数据的仓库,它产生于距今六十多年前,随着信息技术和市场的发展,特别是二十世纪九十年代以后,数据管理不再仅仅…...
使用docker部署node和react应用
使用docker部署node和react应用 Docker 使开发人员能够将所有应用程序打包到容器中。这些容器可以在任何安装了 Docker 的机器上运行,并且应用程序将是相同的。这是在多个系统上运行代码库克隆的好方法,并且我们可以确保它们都是相同的。 在本文中&…...
对List集合、数组去重
前言: 还记得在2021我发布的第一篇博客就是关于数组的去重,从那一刻开始,命运的齿轮开始转动…… 扯远了哈哈哈,我重新写这篇文章只是想让去重方式更加严谨(ps:我才不会说是因为技术成长了,看不上之前写的…...

AI相机“妙鸭相机”原理分析和手动实现方案
妙鸭相机 一个通过上传大约20张照片,生成专属自拍。在2023年7月末爆火,根据36Kr报道,妙鸭相机系阿里系产品,挂靠在阿里大文娱体系下,并非独立公司。 使用方法是上传20张自拍照片,之后可以选择模板生成自己…...

关于计算机大学生秋招面试的那点事?(Golang篇)
前言; Go语言(简称Golang)越来越受到开发者的关注和欢迎。它由Google公司于2009年推出,旨在提供更好的性能和并发性能。眼下,越来越多的公司在使用它,比如著名的云计算服务商AWS,以及知名电商京…...
Windows网络自学的第一天:创建线程
CreateThread函数: 该函数用于创建一个新的线程并在其上运行指定的函数,原型如下: HANDLE CreateThread(LPSECURITY_ATTRIBUTES lpThreadAttributes,SIZE_T dwStackSize,LPTHREAD_START_ROUTINE lpStartAddress,LPVOID …...

边缘计算医疗风险自查APP开发方案
核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...

centos 7 部署awstats 网站访问检测
一、基础环境准备(两种安装方式都要做) bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...

Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中,部分节点存储的数据量或访问量远高于其他节点,导致这些节点负载过高,影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

HashMap中的put方法执行流程(流程图)
1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中,其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下: 初始判断与哈希计算: 首先,putVal 方法会检查当前的 table(也就…...

MySQL 知识小结(一)
一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库,分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷,但是文件存放起来数据比较冗余,用二进制能够更好管理咱们M…...
DiscuzX3.5发帖json api
参考文章:PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下,适配我自己的需求 有一个站点存在多个采集站,我想通过主站拿标题,采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...

AD学习(3)
1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分: (1)PCB焊盘:表层的铜 ,top层的铜 (2)管脚序号:用来关联原理图中的管脚的序号,原理图的序号需要和PCB封装一一…...

高效的后台管理系统——可进行二次开发
随着互联网技术的迅猛发展,企业的数字化管理变得愈加重要。后台管理系统作为数据存储与业务管理的核心,成为了现代企业不可或缺的一部分。今天我们要介绍的是一款名为 若依后台管理框架 的系统,它不仅支持跨平台应用,还能提供丰富…...

C++中vector类型的介绍和使用
文章目录 一、vector 类型的简介1.1 基本介绍1.2 常见用法示例1.3 常见成员函数简表 二、vector 数据的插入2.1 push_back() —— 在尾部插入一个元素2.2 emplace_back() —— 在尾部“就地”构造对象2.3 insert() —— 在任意位置插入一个或多个元素2.4 emplace() —— 在任意…...