关键词搜索

源码搜索 ×
×

BootStrap笔记-折叠的使用

发布2022-01-24浏览809次

详情内容

运行截图如下：

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CN_TEST1</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.  
  8. <!--    bootstrap css核心文件-->
  9.     <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
  10. <!--    bootstrap使用到了jquery，需要提前引用-->
  11.     <script src="js/jquery-3.5.1.min.js"></script>
  12. <!--    弹窗、提示、下拉菜单-->
  13.     <script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
  14. <!--    bootstrap核心文件-->
  15.     <script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
  16.  
  17. </head>
  18. <body>
  19.  
  20.     <div class="container-fluid">
  21.  
  22.         <button data-toggle="collapse" data-target="#demo">折叠</button>
  23.         <div id="demo" class="collapse">
  24.             Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
  25.             Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
  26.         </div>
  27.  
  28.         <br/>
  29.  
  30.         <a href="#demo2" data-toggle="collapse">Collapsible</a>
  31.         <div id="demo2" class="collapse">
  32.             Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
  33.             Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
  34.         </div>
  35.  
  36.         <br/>
  37.  
  38. <!--        风琴实例-->
  39.         <div id="accordion">
  40.             <div class="card">
  41.                 <div class="card-header">
  42.                     <a class="card-link" data-toggle="collapse" href="#collapseOne">
  43.                         选项一
  44.                     </a>
  45.                 </div>
  46.                 <div id="collapseOne" class="collapse show" data-parent="#accordion">
  47.                     <div class="card-body">
  48.                         Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
  49.                         Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello
  50.                     </div>
  51.                 </div>
  52.             </div>
  53.             <div class="card">
  54.                 <div class="card-header">
  55.                     <a class="card-link" data-toggle="collapse" href="#collapseTwo">
  56.                         选项二
  57.                     </a>
  58.                 </div>
  59.                 <div id="collapseTwo" class="collapse show" data-parent="#accordion">
  60.                     <div class="card-body">
  61.                         Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
  62.                         Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello
  63.                     </div>
  64.                 </div>
  65.             </div>
  66.             <div class="card">
  67.                 <div class="card-header">
  68.                     <a class="card-link" data-toggle="collapse" href="#collapseThree">
  69.                         选项三
  70.                     </a>
  71.                 </div>
  72.                 <div id="collapseThree" class="collapse show" data-parent="#accordion">
  73.                     <div class="card-body">
  74.                         Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
  75.                         Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello
  76.                     </div>
  77.                 </div>
  78.             </div>
  79.         </div>
  80.  
  81.     </div>
  82.  
  83. </body>
  84. </html>

解释：

①在div中使用collapse类指定折叠元素。点击按钮会显示和隐藏的话，需要在a或button上添加data-toggle="collapse"属性，data-target="#id"属性是对应折叠内容；

②<a>元素上可以使用href属性来代替data-target；

③data-parent属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示其他选项就隐藏。

相关技术文章

最新源码

下载排行榜
点击QQ咨询
开通会员
返回顶部
×
微信扫码支付 元
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载