Bootstrap笔记7—折叠

最新推荐文章于 2023-07-24 22:23:07 发布

原创最新推荐文章于 2023-07-24 22:23:07 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

Bootstrap 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Bootstrap框架中的折叠组件使用方法，包括基础折叠、折叠组、多组折叠等不同应用场景，并展示了如何通过简单的HTML标签实现丰富的交互效果。

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>