Bootstrap 折叠

  • 定义和使用

    当您要隐藏和显示大量内容时,可折叠项很有用:
    <div class="container">
       <h2>简单可折叠</h2>
       <p>单击按钮可在显示和隐藏内容之间切换。</p>
       <button type ="button" class ="btn btn-primary" data-toggle ="collapse" data-target ="#demo">
        简单可折叠
       </button>
       <div id ="demo" class ="collapse">
           简单可折叠的内容简单可折叠的内容简单可折叠的内容
       </div>
    </div>
    
    尝试一下
    输出结果如下:
      
         简单可折叠的内容简单可折叠的内容简单可折叠的内容  
    示例说明:
    .collapse 类指示可折叠元素(在我们的示例中为<div>); 这是将通过单击按钮显示或隐藏的内容。
    要控制(显示/隐藏)可折叠内容,请将 data-toggle="collapse" 属性添加到<a>或<button>元素。 然后添加 data-target="#id" 属性以将按钮与可折叠内容(<div id ="demo">)连接起来。
    注意:对于 <a> 元素,可以使用 href 属性而不是 data-target 属性:
    <div class="container">
       <a href="#demo" data-toggle="collapse">折叠</a>
       <div id="demo" class="collapse">
           简单可折叠的内容简单可折叠的内容简单可折叠的内容
       </div>
    </div>
    
    默认情况下,可折叠内容是隐藏的;但是,您可以添加 .show 类以默认显示内容:
    <div class="container">
       <a href="#demo" data-toggle="collapse">折叠</a>
       <div id="demo" class="collapse show">
           简单可折叠的内容简单可折叠的内容简单可折叠的内容
       </div>
    </div>
    
    尝试一下
  • 手风琴折叠

    下面的示例通过扩展 card 组件显示了一个简单的手风琴。
    使用 data-parent 属性可确保在显示可折叠项之一时,指定父项下的所有可折叠元素都将关闭。
    <div class="container">
      <div id="accordion">
        <div class="card">
          <div class="card-header">
            <a class="card-link" data-toggle="collapse" href="#collapseOne">
              可折叠组项目#1
            </a>
          </div>
          <div id="collapseOne" class="collapse show" data-parent="#accordion">
            <div class="card-body">
              Lorem ipsum dolor坐镇,奉献己任,圣埃塞莫德临时工和劳动大臣。 尽量不要抽烟,不要因抽烟而锻炼。
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
             可折叠组项目#2
          </a>
          </div>
          <div id="collapseTwo" class="collapse" data-parent="#accordion">
            <div class="card-body">
              Lorem ipsum dolor坐镇,奉献己任,圣埃塞莫德临时工和劳动大臣。 尽量不要抽烟,不要因抽烟而锻炼。
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
             可折叠组项目#3
            </a>
          </div>
          <div id="collapseThree" class="collapse" data-parent="#accordion">
            <div class="card-body">
              Lorem ipsum dolor坐镇,奉献己任,圣埃塞莫德临时工和劳动大臣。 尽量不要抽烟,不要因抽烟而锻炼。
            </div>
          </div>
        </div>
      </div>
    </div>
    
    尝试一下
    输出结果如下:
    Lorem ipsum dolor坐镇,奉献己任,圣埃塞莫德临时工和劳动大臣。 尽量不要抽烟,不要因抽烟而锻炼。
    Lorem ipsum dolor坐镇,奉献己任,圣埃塞莫德临时工和劳动大臣。 尽量不要抽烟,不要因抽烟而锻炼。
    Lorem ipsum dolor坐镇,奉献己任,圣埃塞莫德临时工和劳动大臣。 尽量不要抽烟,不要因抽烟而锻炼。