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

2021/10/27 436 0 網站技術 , HTML , CSS , Bootstrap

近期 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

留言區 / Comments

萌芽論壇