小白教程
所有教程
关于
Search
172.69.6.206
172.69.6.206
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Bootstrap5 折叠”的源代码
本页内容
上一节:
Bootstrap5_卡片
下一节:
Bootstrap5_导航
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:Bootstrap5 折叠}}[[Category:Bootstrap 5 教程|20]] = Bootstrap5 折叠 = Bootstrap5 折叠可以很容易的实现内容的显示与隐藏。 <sample title="" desc="" lang="html" hererun="1"> <button data-bs-toggle="collapse" data-bs-target="#demo">折叠</button> <div id="demo" class="collapse"> 这里是一些测试的内容。。。 </div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <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> </body> </html> </run> === 实例解析 === .collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。 控制内容的隐藏与显示,需要在 <a> 或 <button> 元素上添加 data-bs-toggle="collapse" 属性。 data-target="#id" 属性是对应折叠的内容 (<div id="demo">)。 '''注意:''' <a> 元素上你可以使用 href 属性来代替 data-bs-target 属性: <sample title="" desc="" lang="html" hererun="1"> <a href="#demo" data-bs-toggle="collapse">折叠</a> <div id="demo" class="collapse"> 这里是一些测试的内容。。。 </div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>简单的折叠</h2> <a href="#demo" class="btn btn-primary" data-bs-toggle="collapse">简单的折叠</a> <div id="demo" class="collapse"> 这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。 </div> </div> </body> </html> </run> 默认情况下折叠的内容是隐藏的,你可以添加 .show 类让内容默认显示: <sample title="" desc="" lang="html" hererun="1"> <div id="demo" class="collapse show"> 这里是一些测试的内容。。。 </div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>简单的折叠</h2> <a href="#demo" class="btn btn-primary" data-bs-toggle="collapse">简单的折叠</a> <div id="demo" class="collapse show"> 这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。 </div> </div> </body> </html> </run> 以下实例通过扩展卡片组件来显示简单的手风琴。 '''注意:''' 使用 data-bs-parent 属性来确保所有的折叠元素在指定的父元素下,这样就能实现在一个折叠选项显示时其他选项就隐藏。 <sample title="" desc="" lang="html" hererun="1"> <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> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <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> </run>
返回至“
Bootstrap5 折叠
”。
上一节:
Bootstrap5_卡片
下一节:
Bootstrap5_导航