Bootstrap手风琴调用方法

yibin 2015-09-17 网站运营 623

手风琴效果是很常用的一种网站建设应用效果,你可以自己去编写代码,同样也可以直接采用Bootstrap提供的手风琴交互样式,让我们看看如何使用Bootstrap手风琴效果。


Bootstrap手风琴需要的调用文件

在Bootstrap中调用手风琴组件之前,需要确认项目中已经引入了bootstrap.js文件,然后我们就可以通过简单的几行代码实现手风琴效果。


Bootstrap手风琴效果使用方法

手风琴组件主要分成两个部分,一个是手风琴标题,一个是手风琴内容,让我们通过以下代码看看应该如何编写Bootstrap手风琴组件:<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Bootstrap手风琴组件标题一 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Bootstrap手风琴组件内容一 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Bootstrap手风琴组件标题二 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Bootstrap手风琴组件内容二 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Bootstrap手风琴组件标题三 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Bootstrap手风琴组件内容三 </div> </div> </div></div>以上结构看起来复杂,其实层层分析之后逻辑非常清晰,只需要按照这种逻辑结构编写即可,非常容易。


写在文章最后

Bootstrap的组件总是能够节省我们不少的开发时间,而且Bootstrap手风琴组件的交互效果也是非常赞的,有兴趣的朋友赶紧试试吧!


扫码添加微信

13013082126 扫描微信 建站咨询 优化咨询