Bootstrap 折叠(Collapse)插件使用实例

关键属性:

data-toggle="collapse"

data-target="#runCarDis"    需要展开收起的内容

id="runCarDis"

class="collapse in panel-collapse"

<p id="carOrWorkoutTitle" class="cat_title" data-toggle="collapse" data-target="#runCarDis">
    全国开工车辆分布</p>
<div id="runCarDis" class="collapse in panel-collapse">
    <div id="wholeAnalysis">
        <!--全国开工车辆分布 -->
        <div class="iov-12">
            <div style="margin-left: 89%">
                <input  name="status" type="checkbox" data-size="small" checked>
            </div>
            <div id="carDisMap">
            </div>
        </div>
    </div>
</div>

效果:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在IDEA中配置Bootstrap框架的Collapse插件,需要先引入Bootstrap框架: 1. 下载Bootstrap框架,解压后将css、js和fonts文件夹复制到项目的webapp目录下; 2. 在HTML文件中引入Bootstrap框架的CSS和JS文件,如下所示: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap Collapse Plugin Demo</title> <link rel="stylesheet" href="webapp/css/bootstrap.min.css"> </head> <body> <!--折叠面板--> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 折叠面板1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body"> 折叠面板内容1 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 折叠面板2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> 折叠面板内容2 </div> </div> </div> </div> <script src="webapp/js/jquery.min.js"></script> <script src="webapp/js/bootstrap.min.js"></script> </body> </html> ``` 在以上代码中,使用Bootstrap框架提供的折叠面板组件,并且使用data-toggle和data-parent属性实现了Collapse插件的效果。 注意:在使用Collapse插件时,需要引入jQuery库和Bootstrap框架的JS文件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值