参考手册
Bootstrap 3 教程
Bootstrap 3 下拉菜单
Bootstrap 3 选项卡

Bootstrap 折叠（Collapsible）

默认折叠

当您想要隐藏和显示大量内容时，折叠（Collapsible）非常有用:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta name="viewport" content="width=device-width, initial-scale=1">
  5.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  6.   <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  7.   <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  11. <div class="container">
  12.   <h2>简单的折叠</h2>
  13.   <p>点击按钮在显示和隐藏内容之间切换。</p>
  14.   <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  15.   <div id="demo" class="collapse">
  16.     武汉，简称 "汉"，别称江城，是湖北省省会，中部六省唯一的副省级市，特大城市，中国中部地区的中心城市。
  17.     作为中国经济地理中心，武汉有 "九省通衢" 之称，是中国内陆最大的水陆空交通枢纽和长江中游航运中心，其高铁网辐射大半个中国，是华中地区唯一可直航全球五大洲的城市。
  18.   </div>
  19. </div>
  21. </body>
  22. </html>
运行一下
实例解释

.collapse 类表示可折叠元素（在我们的实例中是一个 <div>）；这是只需单击按钮即可显示或隐藏的内容。

要控制（显示/隐藏）可折叠的内容，请向 <a> 或 <button> 元素添加 data-toggle="collapse" 属性。然后添加 data-target="#id" 属性，将按钮与可折叠内容（即 <div id="demo">）关联起来。

注意：对于 <a> 元素，可以使用 href 属性而不是 data-target 属性:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta name="viewport" content="width=device-width, initial-scale=1">
  5.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  6.   <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  7.   <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  11. <div class="container">
  12.   <h2>简单的折叠</h2>
  13.   <a href="#demo" class="btn btn-info" data-toggle="collapse">简单的折叠</a>
  14.   <div id="demo" class="collapse">
  15.     武汉，简称 "汉"，别称江城，是湖北省省会，中部六省唯一的副省级市，特大城市，中国中部地区的中心城市。
  16.     作为中国经济地理中心，武汉有 "九省通衢" 之称，是中国内陆最大的水陆空交通枢纽和长江中游航运中心，其高铁网辐射大半个中国，是华中地区唯一可直航全球五大洲的城市。
  17.   </div>
  18. </div>
  20. </body>
  21. </html>
运行一下

默认情况下，可折叠内容是隐藏的。但是，您可以添加 .in 来默认显示该内容:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta name="viewport" content="width=device-width, initial-scale=1">
  5.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  6.   <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  7.   <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  11. <div class="container">
  12.   <h2>简单的折叠</h2>
  13.   <p>点击按钮在显示和隐藏内容之间切换</p>
  14.   <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">简单的折叠</button>
  15.   <div id="demo" class="collapse in">
  16.     武汉，简称 "汉"，别称江城，是湖北省省会，中部六省唯一的副省级市，特大城市，中国中部地区的中心城市。
  17.     作为中国经济地理中心，武汉有 "九省通衢" 之称，是中国内陆最大的水陆空交通枢纽和长江中游航运中心，其高铁网辐射大半个中国，是华中地区唯一可直航全球五大洲的城市。
  18.   </div>
  19. </div>
  21. </body>
  22. </html>
运行一下

可折叠的面板

以下实例显示了一个可折叠面板:

折叠面板
面板主体
面板页脚
实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta name="viewport" content="width=device-width, initial-scale=1">
  5.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  6.   <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  7.   <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  11. <div class="container">
  12.   <h2>可折叠的面板</h2>
  13.   <p>单击可折叠面板以打开和关闭它</p>
  14.   <div class="panel-group">
  15.     <div class="panel panel-default">
  16.       <div class="panel-heading">
  17.         <div class="panel-title">
  18.           <a data-toggle="collapse" href="#collapse1">折叠面板</a>
  19.         </div>
  20.       </div>
  21.       <div id="collapse1" class="panel-collapse collapse">
  22.         <div class="panel-body">面板主体</div>
  23.         <div class="panel-footer">面板页脚</div>
  24.       </div>
  25.     </div>
  26.   </div>
  27. </div>
  29. </body>
  30. </html>
运行一下

可折叠的列表组

折叠的列表组
  • 第一项
  • 第二项
  • 第三项
页脚

下面显示了一个可折叠面板，其中包含一个列表组:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta name="viewport" content="width=device-width, initial-scale=1">
  5.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  6.   <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  7.   <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  11. <div class="container">
  12.   <h2>折叠的列表组</h2>
  13.   <p>单击可折叠面板以打开和关闭它</p>
  14.   <div class="panel-group">
  15.     <div class="panel panel-default">
  16.       <div class="panel-heading">
  17.         <div class="panel-title">
  18.           <a data-toggle="collapse" href="#collapse1">可折叠列表组</a>
  19.         </div>
  20.       </div>
  21.       <div id="collapse1" class="panel-collapse collapse">
  22.         <ul class="list-group">
  23.           <li class="list-group-item">第一项</li>
  24.           <li class="list-group-item">第二项</li>
  25.           <li class="list-group-item">第三项</li>
  26.         </ul>
  27.         <div class="panel-footer">页脚</div>
  28.       </div>
  29.     </div>
  30.   </div>
  31. </div>
  33. </body>
  34. </html>
运行一下

Accordion（折叠菜单）

上海
上海，简称 "沪" 或 "申"，是中华人民共和国省级行政区、直辖市、国家中心城市、超大城市、上海大都市圈核心城市，国务院批复确定的中国国际经济、金融、贸易、航运、科技创新中心。
武汉
武汉，简称 "汉"，别称江城，是湖北省省会，中部六省唯一的副省级市，特大城市，中国中部地区的中心城市，全国重要的工业基地、科教基地和综合交通枢纽，联勤保障部队机关驻地。
成都
成都，简称 "蓉"，别称蓉城、锦城，四川省辖地级市，是四川省省会、副省级市、超大城市、成渝地区双城经济圈核心城市，国务院批复确定的国家重要的高新技术产业基地、商贸物流中心和综合交通枢纽、西部地区重要的中心城市。

下面的实例通过扩展面板组件显示了一个简单的折叠菜单。

注意：使用 data-parent 属性可以确保在显示某个可折叠项时，指定父项下的所有可折叠元素都将关闭。

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta name="viewport" content="width=device-width, initial-scale=1">
  5.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  6.   <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  7.   <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  11. <div class="container">
  12.   <h2>Accordion 实例</h2>
  13.   <p><strong>注意:</strong> <strong>data-parent</strong> 属性确保在显示某个可折叠项时，将关闭指定父项下的所有可折叠元素。</p>
  14.   <div class="panel-group" id="accordion">
  15.     <div class="panel panel-default">
  16.       <div class="panel-heading">
  17.         <h4 class="panel-title">
  18.           <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">上海</a>
  19.         </h4>
  20.       </div>
  21.       <div id="collapse1" class="panel-collapse collapse in">
  22.         <div class="panel-body">上海，简称 "沪" 或 "申"，是中华人民共和国省级行政区、直辖市、国家中心城市、超大城市、上海大都市圈核心城市，国务院批复确定的中国国际经济、金融、贸易、航运、科技创新中心。</div>
  23.       </div>
  24.     </div>
  25.     <div class="panel panel-default">
  26.       <div class="panel-heading">
  27.         <h4 class="panel-title">
  28.           <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">武汉</a>
  29.         </h4>
  30.       </div>
  31.       <div id="collapse2" class="panel-collapse collapse">
  32.         <div class="panel-body">武汉，简称 "汉"，别称江城，是湖北省省会，中部六省唯一的副省级市，特大城市，中国中部地区的中心城市，全国重要的工业基地、科教基地和综合交通枢纽，联勤保障部队机关驻地。</div>
  33.       </div>
  34.     </div>
  35.     <div class="panel panel-default">
  36.       <div class="panel-heading">
  37.         <h4 class="panel-title">
  38.           <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">成都</a>
  39.         </h4>
  40.       </div>
  41.       <div id="collapse3" class="panel-collapse collapse">
  42.         <div class="panel-body">成都，简称 "蓉"，别称蓉城、锦城，四川省辖地级市，是四川省省会、副省级市、超大城市、成渝地区双城经济圈核心城市，国务院批复确定的国家重要的高新技术产业基地、商贸物流中心和综合交通枢纽、西部地区重要的中心城市。</div>
  43.       </div>
  44.     </div>
  45.   </div>
  46. </div>
  48. </body>
  49. </html>
运行一下

完整的 Bootstrap 折叠参考

有关所有折叠选项、方法和事件的完整参考，请访问本站的 Bootstrap JS 折叠参考.

Bootstrap 3 下拉菜单
Bootstrap 3 选项卡

分类导航

HTMLHTML5JAVASCRIPTCSSjQueryBootstrap 3 教程SassReactHTMl 颜色教程JSONXMLXPathTypeScriptAppML 教程XLinkXPointerXQueryXFormsXsltXML SchemaXSL-FOWeb ServiceWSDSOAPW3CSVGDHTMLTCP/IPjQuery Mobile 教程XHTML