首页 > 代码库 > Bootstrap页面布局23 - BS折叠内容
Bootstrap页面布局23 - BS折叠内容
<div class=‘container-fluid‘> <h3 class=‘page-header‘>Bootstrap 折叠内容</h3> <!--如果用的a标签，href=http://www.mamicode.com/‘#collapse1‘-->"color: #ff0000;">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=http://www.mamicode.com/‘#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=http://www.mamicode.com/‘#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=http://www.mamicode.com/‘#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=http://www.mamicode.com/‘#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>
如图：
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。