基本：

        <button class="btn btn-primary" data-toggle="collapse" data-target="#content">Bootstrap</button>

        <div class="collapse" id="content">

            <div class="well">11111111111111111111111111111111111111111111111111111111111111111</div>

        </div>

手风琴折叠：

        <div id="accordion" class="panel-group">

            <div class="panel panel-default">

                <div class="panel-heading">

                    <h4 class="panel-title">

                        <a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">第一部分链接</a>

                    </h4>

                </div>

                <div id="collapseOne" class="panel-collapse collapse in">

                    <div class="panel-body">

                        第一部分内容

                    </div>

                </div>

            </div>

            <div class="panel panel-default">

                <div class="panel-heading">

                    <h4 class="panel-title">

                        <a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">第一部分链接</a>

                    </h4>

                </div>

                <div id="collapseTwo" class="panel-collapse collapse">

                    <div class="panel-body">

                        第一部分内容

                    </div>

                </div>

            </div>

            <div class="panel panel-default">

                <div class="panel-heading">

                    <h4 class="panel-title">

                        <a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">第一部分链接</a>

                    </h4>

                </div>

                <div id="collapseThree" class="panel-collapse collapse">

                    <div class="panel-body">

                        第一部分内容

                    </div>

                </div>

            </div>

            <div class="panel panel-default">

                <div class="panel-heading">

                    <h4 class="panel-title">

                        <a href="#collapseFour" data-toggle="collapse" data-parent="#accordion">第一部分链接</a>

                    </h4>

                </div>

                <div id="collapseFour" class="panel-collapse collapse">

                    <div class="panel-body">

                        第一部分内容

                    </div>

                </div>

            </div>

        </div>

collapse折叠的更多相关文章

  1. element-ui Collapse 折叠面板源码分析整理笔记（十）

    Collapse 折叠面板源码: collapse.vue <template> <!--一组折叠面板最外层包裹div--> <div class="el-co ...

  2. vue+element ui项目总结点（五）Carousel 走马灯组件、Collapse 折叠面板、Tree 树形控件

    <template> <div class="ele_test_box"> <!-- 常用效果 Popover 弹出框组件 具体属性查看官方文档--& ...

  3. 基于BootStrap的Collapse折叠(包含回显展开折叠的对应状态)

    情况描述:为了改善页面上的input框太多,采用∧∨折叠展开,这个小东西来控制,第一次做,记录一下ヾ(◍°∇°◍)ﾉﾞ下边是Code 代码: //html代码 <div id="col ...

  4. Collapse 折叠面板

    通过折叠面板收纳内容区域 基础用法 可同时展开多个面板,面板之间不影响 <el-collapse v-model="activeNames" @change="ha ...

  5. （转）elasticsearch collapse 折叠字段应用

    转自:https://elasticsearch.cn/article/132 在 Elasticsearch 5.x 有一个字段折叠(Field Collapsing,#22337)的功能非常有意思 ...

  6. vue+ivew使用Collapse 折叠面板把全部面板展开

    1.需求: 在使用搜索功能时候,只显示搜索到的panel并且将搜索到的含有该专家的panel展开,如图                1.html,注意黄色部分,作为每个panel的key值,要唯一 ...

  7. amazeui学习笔记--js插件（UI增强3）--折叠面板Collapse

    amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse 一.总结 注意点: 1.data-am-collapse:这个东西就是展开折叠事件 2.am-collapse(包括其下属 ...

  8. AngularJs的UI组件ui-Bootstrap分享（二）——Collapse

    Collapse折叠控件使用uib-collapse指令 <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" xml ...

  9. ExtJs的expand和collapse

    最近在研究ExtJs的窗口组件(Ext.window),关于扩展显示expand和折叠显示collapse的一点心得记录一下,以便后查. var win2 = new Ext.window({ id ...

随机推荐

  1. HTML学习----------DAY2第四节

    HTML 文档是由 HTML 元素定义的. HTML 元素 HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 注释:开始标签常被称为开放标签(opening ...

  2. Android ImageView设置图片原理（下）

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 写完上一篇后,总认为介绍的知识点不多,仅仅是一种在UI线程解析载入图片.两种在子线程解析,在UI线程 ...

  3. Android Recovery OTA升级（一）—— make otapackage

    文件夹 文件夹 概述 make otapackage BUILT_TARGET_FILES_PACKAGE ota_from_target_files WriteFullOTAPackage Sign ...

  4. 【JavaScript】分秒倒计时器

    一.基本目标 在JavaScript设计一个分秒倒计时器,一旦时间完毕使button变成不可点击状态 详细效果例如以下图.为了说明问题.调成每50毫秒也就是每0.05跳一次表, 真正使用的时候,把wi ...

  5. javascript进阶课程--第一章--函数

    javascript进阶课程--第一章--函数 学习要点 了解内存管理 掌握全局函数的使用 知识点 基本类型和引用类型 基本类型值有:undefined,NUll,Boolean,Number和Str ...

  6. POSTGRESQL NO TABLE

    POSTGRESQL EXTENDING SQL GRIGGER PROCEDURAL

  7. Linux 串口终端调试工具minicom

    minicom是一个串口通信工具,就像Windows下的超级终端.可用来与串口设备通信,如调试交换机和Modem等,它的使用完全依靠键盘的操作. 一.安装: Linux各发行版因软件管理方式不同而不同 ...

  8. U-BOOT启动流程分析--start_armboot函数（二）

    第二阶段的功能: 初始化本阶段所需的硬件设备(主要设置系统时钟.初始化串口.Flash.网卡.USB) 检测系统内存映射(memory map) 将内核映像和根文件系统映象从Flash上读到RAM空间 ...

  9. java中锁的理解

    在并发编程中,经常遇到多个线程访问同一个 共享资源 ,这时候作为开发者必须考虑如何维护数据一致性,在java中synchronized关键字被常用于维护数据一致性.synchronized机制是给共享 ...

  10. 【Uva 10934】Dropping water balloons

    [Link]: [Description] 等价题意: 某人在1..n内选一个数x; 然后让你去猜; 你可以问他是不是在哪个范围里; 每次会告诉你YES或者NO; 问你在最坏的情况下猜出答案需要猜多少 ...