17Bootstrap5折叠

最新推荐文章于 2023-08-22 22:27:05 发布
最新推荐文章于 2023-08-22 22:27:05 发布
阅读量160 收藏 1
点赞数
分类专栏： Bootstrap5 文章标签： css 前端 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46452300/article/details/122016676
版权

17Bootstrap5折叠

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>菜鸟教程Bootstrap5折叠</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!--
.collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。
控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-bs-toggle="collapse" 属性。
 data-target="#id" 属性是对应折叠的内容 (<div id="demo">)。
注意: <a> 元素上你可以使用 href 属性来代替 data-bs-target 属性:
-->
<div class="container mt-3">
    <h2>简单的折叠</h2>
    <p>点击按钮内容会再显示与隐藏之间切换。</p>
    <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">折叠</button>
    <div id="demo" class="collapse">
        这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。
        这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。
    </div>
</div>
<div class="container mt-3">
    <h2>简单的折叠</h2>
    <a href="#demo1" class="btn btn-primary" data-bs-toggle="collapse">简单的折叠</a>
    <div id="demo1" class="collapse">
        这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。
        这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。
    </div>
</div>
<!--
默认情况下折叠的内容是隐藏的，你可以添加 .show 类让内容默认显示:
-->
<div class="container mt-3">
    <h2>简单的折叠</h2>
    <a href="#demo2" class="btn btn-primary" data-bs-toggle="collapse">简单的折叠</a>
    <div id="demo2" class="collapse show">
        这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。
        这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。
    </div>
</div>
<!--
以下实例通过扩展卡片组件来显示简单的手风琴。
注意: 使用 data-bs-parent 属性来确保所有的折叠元素在指定的父元素下，
这样就能实现在一个折叠选项显示时其他选项就隐藏。
-->
<div class="container mt-3">
    <h2>手风琴实例</h2>
    <p><strong>注意：</strong> 使用 <strong>data-parent</strong> 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。</p>

    <div id="accordion">
        <div class="card">
            <div class="card-header">
                <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
                    选项一
                </a>
            </div>
            <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
                <div class="card-body">
                    #1 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
                    选项二
                </a>
            </div>
            <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
                <div class="card-body">
                    #2 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
                    选项三
                </a>
            </div>
            <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
                <div class="card-body">
                    #3 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

在这里插入图片描述

夏至xz
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
BootStrap折叠
秋城落叶的博客
03-31 357
Bootstrap折叠（Collapse）插件 折叠（Collapse）插件可以很容易地让页面区域折叠起来,创建折叠导航还是内容面板、允许很多内容选项 单击按钮以通过类更改显示和隐藏另一个元素 基本折叠: .collapse隐藏内容 .collapsing当过渡效果开始时被添加，当过渡效果完成时被移除 .collapse.in显示内容 通过data 属性:向元素添加d...
Bootstrap 折叠
书香水墨
07-25 852
一、Bootstrap 折叠 1.1 简单的折叠 .collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。 控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-toggle=“collapse” 属性。 data-target="#id" 属性是对应折叠的内容 (<div i...
Bootstrap之折叠（Collapse）
qq_47043261的博客
07-28 1977
关于折叠的简单用法我在代码的注释里了写的比较清楚了，想要学习这个组件的小伙伴自己看吧~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>折叠</title> <!-- 需要引入的样式 --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/&gt
Bootstrap系列之折叠（Collapse）
老__L的博客
06-05 7645
折叠（Collapse）
Bootstrap打造一个左侧折叠菜单的系统模板(一)
09-02
在本文中，我们将探讨如何使用Bootstrap构建一个左侧折叠菜单的系统模板。Bootstrap 是一个流行的前端开发框架，它提供了丰富的预定义样式、组件和JavaScript插件，使得创建响应式和移动设备优先的网页变得简单易行...
bootstrap手风琴下拉折叠_DEMO_bootstrap手风琴下拉折叠_
10-01
Bootstrap手风琴下拉折叠是一种常见的网页交互设计，它利用Bootstrap框架中的collapse插件和nav或accordion组件，实现内容的动态展开与折叠，为用户提供更直观的导航体验。在本DEMO中，开发者提供了一个无需额外说明...
Bootstrap实现可折叠分组侧边导航菜单
08-27
主要介绍了Bootstrap实现可折叠分组侧边导航菜单的相关资料,需要的朋友可以参考下
Bootstrap每天必学之折叠
09-02
Bootstrap每天必学之折叠，本文向大家讲解了Bootstrap折叠操作，感兴趣的小伙伴们可以参考一下
使用bootstrap写的关于table表格的显示和折叠效果
11-14
使用bootstrap，配合JQ写的关于table表格的显示和折叠效果。点击实现table表格的折叠后，显示+号，再次点击，伸展表格中的内容，并显示-号
Bootstrap4 折叠
12-13
Bootstrap4 折叠 Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。 实例 折叠 Lorem ipsum dolor text.... 实例解析 .collapse 类用于指定一个折叠元素 (实例中的 ); 点击按钮后会在隐藏与显示之间切换。 控制内容的隐藏与显示，需要在 或 元素上添加 data-toggle=”collapse” 属性。 data-target=”#id” 属性是对应折叠的内容 ( )。 注意: 元素上你可以使用 href 属性来代替 data-target 属性: 实例 Collapsible Lorem ipsum dolo
javascript 实现table展开折叠
10-24
javascript 实现table展开折叠,table的th部分不变，下端的tr折叠
基于Bootstrap网格系统的可折叠侧边栏特效
12-11
bootstrap-collapsible-sidebar是一款基于Bootstrap网格系统的可折叠侧边栏特效。该特效通过Bootstrap网格系统，少量的CSS和jQuery代码来完成类似侧边栏面板的折叠效果。
Bootstrap5 折叠
最新发布
shengyin714959的博客
08-22 528
Bootstrap5 折叠可以很容易的实现内容的显示与隐藏。和是用于定义组件行为和目标元素的自定义数据属性。"collapse""modal""tab"以下实例中，当按钮被点击时，data-bs-toggle="collapse" 属性触发了折叠菜单的行为，data-bs-target="#demo" 属性指定了折叠菜单的目标元素为 ID 为 demo 的 元素。
Bootstrap 折叠（Collapse）插件
boonyaxnn的博客
03-21 2446
1、使用折叠（Collapse）插件可以创建可折叠的分组或面板accordion： Bootstrap 折叠（Collapse）插件 点我展开，再点我折叠。Bootstrap组件 Bootstrap中包含了丰富的Web组件，根据这些组件
BootStrap笔记-折叠的使用
IT1995的博客
01-24 1203
运行截图如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CN_TEST1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!--
bootstrap---折叠效果
scwMason的博客
10-19 615
&lt;div class="container"&gt; &lt;div id="accordion"&gt; &lt;div class="card"&gt; &lt;div class="card-header"&gt; &lt;
Bootstrap折叠
前端小99的博客
03-22 616
&lt;div class="container"&gt;  &lt;h2&gt;简单的折叠&lt;/h2&gt;  &lt;p&gt;点击按钮内容会再显示与隐藏之间切换。&lt;/p&gt;  &lt;button type="button" class="btn btn-primary" data-toggle="collapse" da
Bootstrap折叠插件详解及实例
"Bootstrap基本插件学习笔记之折叠(22) - 主要介绍Bootstrap折叠插件的使用方法，提供了一个实例代码展示" Bootstrap是一款流行的前端框架，它提供了丰富的组件和插件，使得网页设计和开发更为便捷。折叠插件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夏至xz

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值