怎樣創(chuàng)建一個 Panel ?

通過 .panel .panel-default .panel-body 三個類可以創(chuàng)建一個 Panel

<div class = "panel panel-default">
    <div class = "panel-body">
        這是一個最簡單 Panel
    </div>
</div>

01.PNG

怎樣為 Panel 添加一個 Heading ?

在 Panel 的 .panel-body 之前加入一個 .panel-heading 元素就可以為 Panel 添加一個 Heading

<div class = "panel panel-default">
    <div class = "panel-heading">
        面板的 Heading
    </div>

    <div class = "panel-body">
        ........
    </div>
</div>

帶 Heading 的面板

怎樣為 Panel 添加一個 Footer ?

在 Panel 的 .panel-body 之后加入一個 .panel-footer 元素就可以為 Panel 添加一個 Footer

<div class="panel panel-danger">
    <div class = "panel-heading">
        帶 Footer 的面板
    </div>
    <div class="panel-body">
        帶 Footer 的面板
    </div>

    <div class="panel-footer">這里是 Footer</div>
</div>

帶 Footer 的面板

怎樣為 Heading 增加預(yù)設(shè)樣式 ？

在 Heading 內(nèi)添加一個<h1> - <h6> 的標(biāo)簽，并設(shè)置 .panel-title 類，即可呈現(xiàn)為預(yù)設(shè)的樣式。

注意：<h1> - <h6> 均可使用，效果是一樣的

<!-- 不使用預(yù)設(shè)樣式 -->
<div class = "panel panel-success">
    <div class = "panel-heading">
        這里的 Heading 沒有設(shè)置預(yù)設(shè)樣式
    </div>

    <div class = "panel-body">
        面板內(nèi)容
    </div>
</div>

<!-- 使用預(yù)設(shè)樣式 -->
<div class = "panel panel-success">
    <div class = "panel-heading">
        <h6 class = "panel-title">
            這里的 Heading 內(nèi)部多了一個 <h6> 標(biāo)簽，設(shè)置了預(yù)設(shè)樣式
        </h6>
    </div>

    <div class = "panel-body">
        面板內(nèi)容
    </div>
</div>

預(yù)設(shè)樣式

怎樣在 Panel 的 Footer 中添加按鈕 ？

直接將按鈕包裹在一個 <div> 中，然后添加到 Footer 內(nèi)部即可，要注意下面兩點：

1. 必須為 Footer 添加 .clearfix 類，否則將破會 Footer 的布局
2. 包裹按鈕的 <div> 可以設(shè)置一個 .pull-right，讓按鈕向右側(cè)對齊

<div class="panel panel-default">
    <div class="panel-body">
        ......
    </div> 


    <div class="panel-footer clearfix">
        <div class="pull-right">
            <a href="#" class="btn btn-primary">了解更多</a>
            <a href="#" class="btn btn-default">返回</a>
        </div>
    </div>
</div>

為 Footer 添加按鈕

面板有幾種情景模式 ？

.panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger

<div class="panel panel-primary">
    ......
</div>


<div class="panel panel-success">
    ......
</div>


<div class="panel panel-info">
    ......
</div>


<div class="panel panel-warning">
    ......
</div>


<div class="panel panel-danger">
    ......
</div>

面板的情景模式

怎樣在面板中添加表格 ？

在 Panel 中添加一個 .table 即可在 Panel 中加入表格，可以保留 Panel 的 .panel-body

<!-- 帶 body 的面板表格 -->
<div class = "panel panel-default">
    <div class = "panel-heading">
        <h3 class = "panel-title">Panel title</h3>
    </div>

    <!-- 注意：這里保留了面板的 body -->
    <div class = "panel-body">
        這里是面板的 body
    </div>

    <!-- 注意：在這里添加了表格 -->
    <table class = "table">
        ......
    </table>
</div>


<!-- 不帶 body 的面板表格 -->
<div class = "panel panel-default">
    <div class = "panel-heading">Panel Heading</div>

    <table class = "table">
        ......
    </table>

</div>

表格面板

怎樣在面板中添加列表組 ？

在 Panel 中添加一個 .list-group 即可在 Panel 中加入列表組，同樣可以保留 Panel 的 .panel-body

<div class = "panel panel-default">
    <div class = "panel-heading">
        <h3 class = "panel-title">Panel title</h3>
    </div>

    <div class = "panel-body">
        這里是面板的 body
    </div>

    <ul class = "list-group">
        <li class = "list-group-item">Free Domain Name Registration</li>
        <li class = "list-group-item">Free Window Space hosting</li>
        ......
    </ul>
</div>

06.PNG