Bootstrap 折叠（Collapse）插件使用实例

最新推荐文章于 2025-10-13 10:31:34 发布

原创最新推荐文章于 2025-10-13 10:31:34 发布 · 501 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

这篇博客展示了全国开工车辆的分布情况，通过一个可展开收起的面板，内含一个地图组件来直观展示数据。用户可以勾选状态来查看分布图，地图部分（id为'carDisMap'）提供了详细的视觉呈现。

关键属性：

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>

效果: