bootstrap – panel + collapse + accordion + well

1000copy發表於2016-08-29
boot

有時候，你想要把內容放到一個看起來還漂亮的盒子裡面，那麼就可以考慮panel。panel就是一個可以選擇不同的邊線樣式、還可以有header和footer的盒子。這樣一個有頭有腳的元件，程式碼看起來是這樣的：

<div class="panel panel-default">
    <div class="panel-heading"> panel header</div>
    <div class="panel-body">plain text</div> 
    <div class="panel-footer ">panel footer</div>
</div>

介面外觀是這樣的：https://jsfiddle.net/1000copy…

在class內的panel指明這個標籤塊內是一個panel（聽起來有點彆扭：）。另外一個值panel-default指明panel的一種樣式。雖然panel-default暗示這是一個default（預設）的型別值，但是不寫和寫了的效果是不同的。你不妨試試，瞭解它們兩者的視覺差異。

第二行的panel-heading指明這是panel的header。這個header是可選的，不寫就沒有header。類似的panel-footer也是一樣的。

當你看到panel-default，可能會想起btn-default、btn-primary、btn-info等等？是的，對於panel而言也有類似的panel-primary、panel-info等等。

<div class="panel   panel-danger">
    <div class="panel-heading"> panel header</div>
    <div class="panel-body">plain text</div> 
    <div class="panel-footer ">panel footer</div>
</div>

這就是為什麼bootstrap聲稱自己是具備設計一致性的原因了吧。這樣的一致性，確實可以減輕學習的負擔，讓開發者更加容易舉一反三。

可以使用panel做一個模態對話方塊

要是在footer上放置按鈕，並靠右排放：

<div class="panel panel-default">
<div class="panel-heading">
      header
    </div>
    <div class="panel-body">plain text</div> 
    <div class="panel-footer clearfix">
        <div class="pull-right">
            <a href="#" class="btn btn-primary">Learn More</a>
            <a href="#" class="btn btn-default">Go Back</a>
        </div>
    </div>
</div>

看起來的外觀是：https://jsfiddle.net/1000copy…

手風琴選單

可以把多個panel組合起來，並且通過bootstrap本身的collapse外掛構建一個很有吸引力的，類似桌面軟體Microsoft Outlook的選單。習慣上它被稱為accordion

collapse(摺疊）

bootstrap提供一個外掛，可以讓開發者不寫一行JavaScript程式碼而可以展開和摺疊內容：

<input type="button" class="btn" data-toggle="collapse" data-target="#toggleDemo" value="Toggle Button">
<div id="toggleDemo" class="collapse in"><p>content</p></div>

點選按鈕Toggle Button，可以對div#toggleDemo做展開和摺疊操作。還記得data-字首的屬性嗎？它們由bootstrap的JavaScript程式碼引用，分別宣告如下：

data-toggle的做一個切換操作，操作為"collapse"。除了collapse，還可以做popover、modal、dropdown、tab等切換
data-target宣告操作的物件是"#toggleDemo"

你可以在被摺疊的目標上加入class的值in，標識預設為開啟的。如果不加，那麼預設為關閉的（被摺疊的）。

可摺疊的panel

利用摺疊外掛，就可以把一個有header的panel變成可摺疊的panel：

     <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-target="#c1">h1</a>
            </h4>
        </div>
        <div id="c1" class="in">
            <div class="panel-body">
                <p>content1</p>
            </div>
        </div>
    </div>

點選header內的連結多次，可以看到摺疊和展開的切換效果。

一個accordion選單，就是多個可摺疊panel組合得到的效果。如下程式碼展示了兩個panel的情況：

<div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-target="#c1">h1</a>
            </h4>
        </div>
        <div id="c1" class="panel-collapse collapse in">
            <div class="panel-body">
                <p>content1</p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-target="#c2">h1</a>
            </h4>
        </div>
        <div id="c2" class="panel-collapse collapse in">
            <div class="panel-body">
                <p>content1</p>
            </div>
        </div>
    </div>
</div>

儘管有點粗陋，但是它是可以工作的。

well

還有一個叫做well的元件。它也可以像panel一樣放置內容，它看起來是內凹的。需要一個看起來和其他內容不太相同的，類似插頁和插圖的盒子，可以使用它。和panel比起來簡單而粗陋的，它沒有header，footer，也不能設定-info、-warning等顏色差別，但是可以調節大小。

<div class="well well-lg">
  large well!
</div>
<div class="well well-sm ">
  small well!
</div>

它簡單到無話可說。

相關文章