Bootstrap是一套相當好用的RWD Framework，除了擁有強大的網格系統外，再來就是內建這多網頁常會用到的特效，像是下拉選單、頁籤、廣告輪播….等，且使用上相當的簡易，完全無需寫到任何的Javascript碼，只要依照Bootstrap所設計的HTML標籤，立即就可產生出各式各樣酷炫的網頁特效，這對於完全不會javascript的朋友，也能輕鬆的套用。
而今天要來分享一個，也是大家在製作網頁時，常會用到的一個特效，那就是手風琴選單，這個特效相信許多朋友，或多或少都有在網路上，下載相關的jQuery套件，但在套用時，總是套的一個頭二個大，不是CSS發生衝突，就是javascript支援度的問題，因此現在透過Bootstrap內建的手風琴選單特效，不但完全不用寫到任何javascript，甚至使用上更加簡易，至於怎麼使用，現在也一塊來看看吧！
Step1
首先，在建立這個手風琴選單時，需先建一個id，而之後的手風琴選單，的data-parent要與id相同，因此當要有多個手風琴選單時，每個panel-group的id名稱需不同才可以喔！
Step2
接著一個手風琴選單的組成，會分別二個區塊，一個是選單按鈕，一個是點選展開的內容。
Step3
而每一組的手風琴選項的選單id也不可重覆，甚至起始值的部分，只需在panel-collapse後方加in，一開始這個手風琴選單就會展開。
Step4
而其它的，需在手風琴選項的後方加入class=”collasped”。
Step5
當設定好後，預設值會依剛所指定的in開啟，並且點到選單時，會將上一個關閉，並展開所點選的，是不是超EZ呀！因此使用Bootstrap的朋友，千萬可別錯過了。
[範例預覽]