bootstrap专栏 06.组件 14.折叠

全栈开发

已于 2022-04-03 11:19:00 修改

阅读量114

点赞数

分类专栏： bootstrap 文章标签： bootstrap

于 2022-03-18 17:51:10 首次发布

本文链接：https://blog.csdn.net/m0_66351881/article/details/123563651

版权

bootstrap 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

# 14.折叠

[toc]{type: "ol", level: [3]}

### 折叠
```html
<p>
    <!--链接-->
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false"
       aria-controls="collapseExample">
        Link with href
    </a>
    <!--按钮-->
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample"
            aria-expanded="false" aria-controls="collapseExample">
        Button with data-target
    </button>
</p>
<div class="collapse" id="collapseExample">
    <div class="card card-body">
        Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user
        activates the relevant trigger.
    </div>
</div>
```
![折叠-折叠-点击前](14.折叠-折叠-点击前.png)
![折叠-折叠-点击后](14.折叠-折叠-点击后.png)