Bootstrap笔记7—折叠

来源：互联网发布：java异步日志编辑：程序博客网时间：2024/05/01 02:18

Bootstrap中文网

1. 基础折叠

这里写图片描述
展示如下：

这里写图片描述

<body>    <div class="container">        <!-- 按钮 -->        <button class="btn btn-default" data-toggle="collapse" data-target="#shows">按钮</button>        <!-- 折叠内容 -->        <div id="shows" class="collapse">            <div class="well">                我是折叠的内容            </div>        </div>    </div></body>

2. 折叠一组

这里写图片描述

<body>    <div class="container">        <!-- 折叠组 -->        <div class="panel-group">            <div class="panel panel-default">                <!-- 折叠panel头部 -->                <div class="panel-heading">                    <h4 class="panel-title">                    <a href="#" data-toggle="collapse" data-target="#chanel_demo">栏目管理</a>                    </h4>                </div>                <!-- 折叠panel内容 -->                <div class="collapse panel-collapse" id="chanel_demo"><!-- 添加一个collapse类会默认隐藏折叠内容 -->                    <div class="panel-body">                        <ul>                            <li><a href="#">增加文章</a></li>                            <li><a href="#">增加标题</a></li>                        </ul>                                           </div>                </div>                          </div>        </div>    </div></body>

3.折叠多组

这里写图片描述

<body>    <div class="container">        <!-- 折叠组 -->        <div class="panel-group">            <!-- 第一个功能 -->            <div class="panel panel-default">                <!-- 折叠panel头部 -->                <div class="panel-heading">                    <h4 class="panel-title">                    <a href="#" data-toggle="collapse" data-target="#chanel_demo1">第一个折叠标题</a>                    </h4>                </div>                <!-- 折叠panel内容 -->                <div class="collapse in panel-collapse" id="chanel_demo1"><!-- 添加一个collapse类会默认隐藏折叠内容 -->                    <div class="panel-body">                        <ul>                            <li><a href="#">折叠内容一</a></li>                            <li><a href="#">折叠内容二</a></li>                        </ul>                                           </div>                </div>                          </div>            <!-- 第二个功能 -->            <div class="panel panel-default">                <!-- 折叠panel头部 -->                <div class="panel-heading">                    <h4 class="panel-title">                    <a href="#" data-toggle="collapse" data-target="#chanel_demo2">第二个折叠标题</a>                    </h4>                </div>                <!-- 折叠panel内容 -->                <div class="collapse panel-collapse" id="chanel_demo2">                    <div class="panel-body">                        <ul>                            <li><a href="#">折叠内容一</a></li>                            <li><a href="#">折叠内容二</a></li>                        </ul>                                           </div>                </div>                          </div>                  </div>    </div></body>

4. 折叠多组只显示一组折叠内容

这里写图片描述

<body>    <div class="container">        <!-- 折叠组 -->        <div class="panel-group" id="panelcontainer">            <!-- 第一个功能 -->            <div class="panel panel-default">                <!-- 折叠panel头部 -->                <div class="panel-heading">                    <h4 class="panel-title">                    <a href="#" data-toggle="collapse" data-target="#chanel_demo1" data-parent="#panelcontainer">第一个折叠标题</a>                    </h4>                </div>                <!-- 折叠panel内容 -->                <div class="collapse in panel-collapse" id="chanel_demo1"><!-- 添加一个collapse类会默认隐藏折叠内容 -->                    <div class="panel-body">                        <ul>                            <li><a href="#">折叠内容一</a></li>                            <li><a href="#">折叠内容二</a></li>                        </ul>                                           </div>                </div>                          </div>            <!-- 第二个功能 -->            <div class="panel panel-default">                <!-- 折叠panel头部 -->                <div class="panel-heading">                    <h4 class="panel-title">                    <a href="#" data-toggle="collapse" data-target="#chanel_demo2" data-parent="#panelcontainer">第二个折叠标题</a>                    </h4>                </div>                <!-- 折叠panel内容 -->                <div class="collapse panel-collapse" id="chanel_demo2">                    <div class="panel-body">                        <ul>                            <li><a href="#">折叠内容一</a></li>                            <li><a href="#">折叠内容二</a></li>                        </ul>                                           </div>                </div>                          </div>                  </div>    </div></body>

5. 折叠–下拉菜单

这里写图片描述

<body>    <div class="container">        <!-- 折叠组 -->        <div class="panel-group">            <!-- 第一个功能 -->            <div class="panel panel-default">                <!-- 折叠panel头部 -->                <div class="panel-heading">                    <h4 class="panel-title">                    <a href="#" data-toggle="collapse" data-target="#chanel_demo1">第一个折叠标题</a>                    </h4>                </div>                <!-- 折叠panel内容 -->                <div class="collapse in panel-collapse" id="chanel_demo1">                    <ul class="list-group">                        <li class="list-group-item"><a href="#">折叠内容一</a></li>                        <li class="list-group-item"><a href="#">折叠内容二</a></li>                        <li class="list-group-item"><a href="#">折叠内容三</a></li>                    </ul>                </div>            </div>        </div>    </div>    </body>

0 0

Bootstrap笔记7—折叠

1. 基础折叠

2. 折叠一组

3.折叠多组

4. 折叠多组 只显示一组折叠内容

5. 折叠–下拉菜单

4. 折叠多组只显示一组折叠内容