Bootstrap 組件之 Panel

一、簡介

Panel 指面板。這里 有例子。

一個典型的面板的代碼結構是這樣的：

.panel.panel-default
    .panel-heading
        .panel-title
            Title Text
    .panel-body
        Body Text
    .panel-footer
        Footer Text

除了使用 .panel-default 這個默認樣式，還可以使用的樣式有：

1. panel-primary。
2. panel-success。
3. panel-info。
4. panel-warning。
5. panel-danger。

Panel 強大得還有一點，就是能搭配其它組件使用，這些組件包括：表格（tables）和列表（list groups）。

二、搭配表格

<div class="panel panel-default">
    <div class="panel-heading">Panel heading</div>
    <table class="table">
        <!-- ... -->
    </table>
</div>

{提示} <table> 與 .panel-heading 是在一個層次的。

三、搭配列表

<div class="panel panel-default">
    <div class="panel-heading">Panel heading</div>
    <div class="panel-body">
        <p>some text</p>
    </div>
    <ul class="list-group">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>
</div>

{提示} .list-group 與 .panel-heading、.panel-body 是在一個層次的。

四、參考鏈接

http://getbootstrap.com/components/#panels

（完）