Bootstrap從2.x升級到3.x之后，折疊的效果依舊保留，但是樣式表的類名卻被修改了，之前的.accordion被替換成了.panel-group，還有其他不少類名都被修改。
下面我們就介紹一下Bootstrap 3.x手風琴折疊效果代碼，與之前的2.x有了一些變化。
Bootstrap 2.x與3.x的變化：
- .accordion 替換成 .panel-group
- .accordion-group 替換成 .panel .panel-default
- .accordion-heading 替換成 .panel-heading
- .accordion-body 替換成 .panel-collapse
- .accordion-inner 替換成 .panel-body
效果圖：
代碼實例：
<!DOCTYPE html>
<html>
<head>
<title>bootstrap 3.0 學習 by 西部e網(wǎng) weste.net</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="panel-group" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> <a class="accordion-toggle" >潮流服飾</a> </div>
<div id="collapseOne" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">俄羅斯超模茱茱·艾凡雅克(Juju Ivanyuk)為烏克蘭版《時尚芭莎》拍攝時尚大片。該系列大片由知名攝影師Federica Putelli掌鏡，茱茱·艾凡雅克全力配合，海邊大片詮釋異域風情，超模完美身材性感至極。</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> <a class="accordion-toggle">美容護膚</a> </div>
<div id="collapseTwo" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">找到一款適合的發(fā)型，方臉型也能很有氣質(zhì)。那方臉女生又適合什么樣的發(fā)型呢？下面的發(fā)型圖片將給你答案。各位愛美的美眉趕快一起來看看吧。</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> <a class="accordion-toggle">健康養(yǎng)生</a> </div>
<div id="collapseThree" class="panel-collapse in" style="height: auto;">
<div class="panel-body">說起食物我們每天都離不開，我們每天都接觸而有些我們卻不了解，食物中的營養(yǎng)是非常豐富的，不同的食物有著不同的營養(yǎng)，我們對這些生活中常見的有哪些了解呢？</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>