近期 Bootstrap 穩定版已經開發到 5.1 了！不過很多人還是用較舊的版本在進行網頁的開發，而我自己在用 Bootstrap 3.4.1 做面板（Panel）時，就發現了其一個很棒的功能，就是可折疊面板（Collapsible Panel）！面板本身分為頭（Head）、身（Body）、尾（Footer），前者可以放標題（Title）、中者可以放內容（Content）、後者可以放按鈕（Button）之類的東西，而所謂折疊，就是將身跟尾透過點擊頭的部分折起來或打開來。而面板本身支援語意類別（Contextual Classes），透過這個能將面板變得很多彩，有 .panel-default、.panel-primary、.panel-success、.panel-info、.panel-warning、.panel-danger 可做選擇使用。

▲ 可選樣式如圖。

所謂的「改良式」，是我自己覺得原來範例是要點標題才能做摺疊與打開，實在不方便！因此自行改良成點頭部的任何地方都可以做到這個動作，為此您需要加一段 CSS 讓游標能有變化：

.cursor-pointer {
  cursor: pointer;
}

接下來是 HTML 的部分：

<div class="container">
    <h2>多彩改良式可折疊面板 <span class="label label-default">By MNYA.TW</span></h2>
    <p>點擊可折疊或打開面板</p>
    <div class="panel-group">
        <!--分隔-->
        <div class="panel panel-default">
            <div class="panel-heading cursor-pointer" data-toggle="collapse" href="#collapse1">
                <h4 class="panel-title">標題（panel-default）</h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
                <div class="panel-body">內容</div>
                <div class="panel-footer">底部</div>
            </div>
        </div>
        <!--分隔-->
        <div class="panel panel-primary">
            <div class="panel-heading cursor-pointer" data-toggle="collapse" href="#collapse2">
                <h4 class="panel-title">標題（panel-primary）</h4>
            </div>
            <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">內容</div>
                <div class="panel-footer">底部</div>
            </div>
        </div>
        <!--分隔-->
        <div class="panel panel-success">
            <div class="panel-heading cursor-pointer" data-toggle="collapse" href="#collapse3">
                <h4 class="panel-title">標題（panel-success）</h4>
            </div>
            <div id="collapse3" class="panel-collapse collapse">
                <div class="panel-body">內容</div>
                <div class="panel-footer">底部</div>
            </div>
        </div>
        <!--分隔-->
        <div class="panel panel-info">
            <div class="panel-heading cursor-pointer" data-toggle="collapse" href="#collapse4">
                <h4 class="panel-title">標題（panel-info）</h4>
            </div>
            <div id="collapse4" class="panel-collapse collapse">
                <div class="panel-body">內容</div>
                <div class="panel-footer">底部</div>
            </div>
        </div>
        <!--分隔-->
        <div class="panel panel-warning">
            <div class="panel-heading cursor-pointer" data-toggle="collapse" href="#collapse5">
                <h4 class="panel-title">標題（panel-warning）</h4>
            </div>
            <div id="collapse5" class="panel-collapse collapse">
                <div class="panel-body">內容</div>
                <div class="panel-footer">底部</div>
            </div>
        </div>
        <!--分隔-->
        <div class="panel panel-danger">
            <div class="panel-heading cursor-pointer" data-toggle="collapse" href="#collapse6">
                <h4 class="panel-title">標題（panel-danger）</h4>
            </div>
            <div id="collapse6" class="panel-collapse collapse">
                <div class="panel-body">內容</div>
                <div class="panel-footer">底部</div>
            </div>
        </div>
        <!--分隔-->
    </div>
</div>

最後記得要在 <head> 至 </head> 中引入 Bootstrap 3.4.1 和 jQuery（我個人用 3.6 版），然後 JS 的引入要先 jQuery 再 Bootstrap，順序反了可不會運作！

CodePen 範例

See the Pen
Bootstrap：可折疊面板 by Feng, Cheng-Chi (@qwe987299)
on CodePen.

贊助廣告 ‧ Sponsor advertisements

《上一篇》莊頭北即熱式燃氣熱水器(屋外加強抗風型/天然瓦斯) 10L-TH-5107RF

《下一篇》Bootstrap 介紹與入門，Bootstrap 5 跟 Bootstrap 3 & 4 的差別

萌芽站長

您好，我是萌芽系列網站（Mnya Series Website）的站長&創始人，可以稱呼我「萌芽站長」。我的興趣與專長有登山、觀察地形、攝影、旅遊、網頁設計＆架設＆經營、動畫製作、圖片處理、資料彙整等。有任何問題或建議請至萌芽論壇發表。網站業務、商業合作的聯絡方式在「關於本站 → 團隊介紹 → 站長介紹」，很高興認識您！請多指教！

Bootstrap 3.4.1：多彩改良式可折疊面板

CodePen 範例

留言區 / Comments

萌芽站長

熱門文章

近期文章

頁面

其他操作