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 …...
visual studio 2022更改主题为深色
visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中，选择 环境 -> 常规 ，将其中的颜色主题改成深色 点击确定，更改完成...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接：A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串，只有在同时为 o 时输出 Yes 并结束程序，否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一） 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
九天毕昇深度学习平台 | 如何安装库？
pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子： 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...
高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数 在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...
IP如何挑？2025年海外专线IP如何购买？
你花了时间和预算买了IP，结果IP质量不佳，项目效率低下不说，还可能带来莫名的网络问题，是不是太闹心了？尤其是在面对海外专线IP时，到底怎么才能买到适合自己的呢？所以，挑IP绝对是个技…...
Java编程之桥接模式
定义 桥接模式（Bridge Pattern）属于结构型设计模式，它的核心意图是将抽象部分与实现部分分离，使它们可以独立地变化。这种模式通过组合关系来替代继承关系，从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...
纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序（Program） 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序，比如我们使用QQ，就启动了一个进程，操作系统就会为该进程分配内存…...