Bootstrap學習筆記皮膚(Panels)

浪花一朵朵發表於2015-05-24
boot筆記

本文將講解Bootstrap皮膚(Panels).皮膚元件用於把DOM元件插入到一個盒子中。建立一個基本的皮膚，只需要向div元素新增class .panel和 panel-default即可，如下面的例項所示：

html

<h2>基本皮膚</h2>
<div class="panel panel-default">
    <div class="panel-body">這是一個基本的皮膚</div>
</div>

皮膚標題

我們可以通過以下兩種方式來新增皮膚標題：

使用panel-heading class 可以很簡單地向皮膚新增標題容器。to easily add a heading container to your panel.

使用帶有panel-title class 的<h1>-<h6>來新增預定義樣式的標題。

下面的示例這兩種方式：

html

<h2>皮膚標題</h2>
<div class="panel panel-default">
    <div class="panel-heading">
        不帶title的皮膚標題
    </div>
    <div class="panel-body">
        皮膚內容
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">帶title的皮膚標題</h3>
    </div>
    <div class="panel-body">
        皮膚內容
    </div>
</div>

皮膚腳註

我們可以在皮膚中新增腳註，只需要把按鈕或者副文字放在帶有class panel-footer的div中即可。下面的示例演示這一點：

來看html:

<h4>皮膚腳註</h4>
<div class="panel panel-default">
    <div class="panel-body">這是一個基本皮膚</div>
    <div class="panel-footer">
        皮膚腳註據新華社電 國務院臺灣事務辦公室主任張志軍23日在金門與臺灣方面陸委會主委夏立言會面，就當前兩岸關係形勢、政策和推進兩岸關係發展中的有關問題充分交換意見，並達成積極共識。

張志軍表示，廈門和金門雖一水之隔，卻因內戰交往隔絕了約半個世紀。廈門金門的這段經歷，是兩岸關係過去的縮影。讓人感到欣慰的是，自2008年以來，在兩岸同胞的共同努力下，兩岸雙方在堅持“九二共識”、反對“臺獨”的共同政治基礎上，開闢了兩岸關係和平發展新局面。“兩門”從炮聲隆隆的戰場，變為兩岸交流合作、共謀發展的前沿。今昔對比，我們雙方應下這麼一個決心，決不能讓兩岸關係再遭折騰，更不能走回頭路。相信這也是歷經風雨滄桑的兩岸同胞的共同心願。
    </div>
</div>

帶語境色彩的皮膚

使用語境狀態類 panel-primary,panel-success,panel-info,panel-warning,panel-danger,來設定帶境色彩的皮膚，例項如下：

html程式碼：

<h2>帶語境色彩的皮膚</h2>
<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">皮膚標題</h3>
    </div>
    <div class="panel-body">
        這是一個基本的皮膚
    </div>
</div>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">皮膚標題</h3>
    </div>
    <div class="panel-body">
        這是一個基本的皮膚
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">皮膚標題</h3>
    </div>
    <div class="panel-body">
        這是一個基本的皮膚
    </div>
</div>

<div class="panel panel-warning">
    <div class="panel-heading">
        <h3 class="panel-title">皮膚標題</h3>
    </div>
    <div class="panel-body">
        這是一個基本的皮膚
    </div>
</div>

帶表格的皮膚

為了在皮膚中建立一個無邊框的表格，我們可以在皮膚中使用 class .table.假設有個div包含panel-body我們可以向表格的頂部新增額外的邊框

用來分隔。如果沒有包含panel-body 的div 剛元件會無中斷地從皮膚頭部移到表格。

 下面來看一下帶表格的皮膚的效果和示例：

html

<h2>帶表格的皮膚</h2>
為了在皮膚中建立一個無邊框的表格，我們可以在皮膚中使用class table.假設有個div包含panel-body,我們可以向表格的頂部新增額外的邊框來分隔。如果沒有包含panel-body的div則元件會無中斷地從皮膚頭部移動到表格.

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">皮膚標題</h3>
    </div>
    <div class="panel-body">
        這是一個基本皮膚
    </div>
    <table class="table">
        <th>產品</th>
        <th>價格 </th>
        <tr>
            <td>產品 A</td>
            <td>200</td>
        </tr>
        <tr>
            <td>產品 B</td>
            <td>400</td>
        </tr>
    </table>

</div>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">皮膚標題</h3>
    </div>
@*    <div class="panel-body">
        這是一個基本皮膚
    </div>*@
    <table class="table">
        <th>產品</th>
        <th>價格 </th>
        <tr>
            <td>產品 A</td>
            <td>200</td>
        </tr>
        <tr>
            <td>產品 B</td>
            <td>400</td>
        </tr>
    </table>
</div>

帶列表組的皮膚

我們可以在任何皮膚中包含列表組，通過在div元素中新增panel和panel-default類來建立皮膚，並在皮膚中新增列表組。您可以從列表組一章中學習如何建立列表組。

來看效果：

html:

<div class="panel panel-default">
    <div class="panel-heading">皮膚標題</div>
    <div class="panel-body">
        <p>這是一個基本的皮膚內容。這是一個基本的皮膚內容是一個基本的皮膚內容。這是一個基本的皮膚內容是一個基本的皮膚內容。這是一個基本的皮膚內容是一個基本的皮膚內容。這是一個基本的皮膚內容是一個基本的皮膚內容。這是一個基本的皮膚內容</p>
    </div>
    <ul class="list-group">
        <li class="list-group-item">免費的域名註冊</li>
        <li class="list-group-item">免費的域名註冊</li>
        <li class="list-group-item">免費的域名註冊</li>
        <li class="list-group-item">免費的域名註冊</li>
    </ul>
</div>

本節完

相關文章