Bootstrap页面布局23 - BS折叠内容

<div class='container-fluid'>
    <h3 class='page-header'>Bootstrap 折叠内容</h3>
    <!--如果用的a标签，href='#collapse1'-->
    <a href='#collapse1' class='btn btn-primary' data-toggle='collapse'>点击显示内容</a>

    <!--button标签中指向data-target='#collapse2'-->
    <button class='btn btn-primary' data-toggle='collapse' data-target='#collapse2'>点击显示内容2</button>
    
　　<!--类in表示默认显示这块内容-->
    <div class='collapse in' id='collapse1'>W3Cschoool菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</div>  
    <div class='collapse in' id='collapse2'>W3Cschoool菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想2。</div>  
</div>

效果如图：

 

实现手风琴效果

代码：

<div class='container-fluid'>
    <h3 class='page-header'>Bootstrap 折叠内容</h3>
        <div class='accordion' id='accordion1'>
            <div class='accordion-group'>
                <div class='accordion-heading'>
                    <!--
                        .accordion-toggle类：使a标签变成块级元素，方便用户点击
                        data-parent:同属这个id的所有的折叠内容在同一时间只显示一个折叠内容
                    -->
                    <a href='#collapse1' class='btn btn-primary accordion-toggle' data-parent='#accordion1' data-toggle='collapse'>点击显示内容1</a>
                </div>
                <div class='collapse in' id='collapse1'>
                    <!--.accordion-inner为内容添加合适的内边距-->
                    <div class='accordion-inner'>
                        W3Cschoool菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想1。
                    </div>
                </div>
            </div>
            
            <div class='accordion-group'>
                <div class='accordion-heading'>
                    <!--
                        .accordion-toggle类：使a标签变成块级元素，方便用户点击
                        data-parent:同属这个id的所有的折叠内容在同一时间只显示一个折叠内容
                    -->
                    <a href='#collapse2' class='btn btn-primary accordion-toggle' data-parent='#accordion1' data-toggle='collapse'>点击显示内容2</a>
                </div>
                <div class='collapse' id='collapse2'>
                    <!--.accordion-inner为内容添加合适的内边距-->
                    <div class='accordion-inner'>
                        W3Cschoool菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想2。
                    </div>
                </div>
            </div>
            
            <div class='accordion-group'>
                <div class='accordion-heading'>
                    <!--
                        .accordion-toggle类：使a标签变成块级元素，方便用户点击
                        data-parent:同属这个id的所有的折叠内容在同一时间只显示一个折叠内容
                    -->
                    <a href='#collapse3' class='btn btn-primary accordion-toggle' data-parent='#accordion1' data-toggle='collapse'>点击显示内容3</a>
                </div>
                <div class='collapse' id='collapse3'>
                    <!--.accordion-inner为内容添加合适的内边距-->
                    <div class='accordion-inner'>
                        W3Cschoool菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想3。
                    </div>
                </div>
            </div>
            
            <div class='accordion-group'>
                <div class='accordion-heading'>
                    <!--
                        .accordion-toggle类：使a标签变成块级元素，方便用户点击
                        data-parent:同属这个id的所有的折叠内容在同一时间只显示一个折叠内容
                    -->
                    <a href='#collapse4' class='btn btn-primary accordion-toggle' data-parent='#accordion1' data-toggle='collapse'>点击显示内容4</a>
                </div>
                <div class='collapse' id='collapse4'>
                    <!--.accordion-inner为内容添加合适的内边距-->
                    <div class='accordion-inner'>
                        W3Cschoool菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想4。
                    </div>
                </div>
            </div>
        </div>
     
</div>

如图：