当前位置: 首页 > news >正文

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

一、实现的效果

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

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


 二、实现思路

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

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

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


 三、程序实现

http://www.lryc.cn/news/108382.html

相关文章:

  • Mapping温度分布验证选择数据记录仪时需要考虑的13件事
  • 【题解】 判断一个链表是否为回文结构
  • Microsoft Message Queuing Denial-of-Service Vulnerability
  • 软件设计师(五)软件工程基础知识
  • Java中的JUnit单元测试方法的使用
  • 一文学透设计模式——抽象工厂模式
  • Vue3与Vue2区别和总结(1)
  • 【华秋推荐】物联网入门学习模块 ESP8266
  • 本科专科毕业论文如何选题-附1000多论文题目-论文选题--【毕业论文】
  • pip安装jupyter notebook
  • STM32刷Micropython固件参考指南
  • 学生信息管理系统自动化测试
  • Java面向对象之toString()方法
  • MySQL(一)
  • 使用docker部署node和react应用
  • 对List集合、数组去重
  • AI相机“妙鸭相机”原理分析和手动实现方案
  • 关于计算机大学生秋招面试的那点事?(Golang篇)
  • Windows网络自学的第一天:创建线程
  • 正确的 Java 异常处理
  • RTT(RT-Thread)时钟管理
  • 基础实验篇 | uORB消息读写与自定义实验(二)
  • k8s pod数据存储Volumes
  • ZYNQ在Petalinux系统下双网口同网段的实现
  • 突破传统监测模式:业务状态监控HM的新思路 | 京东云技术团队
  • 7-16 验证“哥德巴赫猜想” (20 分)
  • GEE学习02 --设置Jupyter Notebook的打开路径
  • stm32与上位机电脑间最快的通信方式是什么?
  • pytorch学习——卷积神经网络——以LeNet为例
  • stm32 mpu6050 cubemx DMP法读取角度