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 …...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件： 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要：设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP（Work-in-Progress）弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中，设立专门的紧急任务通道尤为重要，这能…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树 浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程
本文较长，建议点赞收藏，以免遗失。更多AI大模型应用开发学习视频及资料，尽在聚客AI学院。 本文全面剖析RNN核心原理，深入讲解梯度消失/爆炸问题，并通过LSTM/GRU结构实现解决方案，提供时间序列预测和文本生成…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索（基于物理空间 广播范围）2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
C# 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
Kafka入门-生产者
生产者 生产者发送流程： 延迟时间为0ms时，也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于：异步发送不需要等待结果，同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...