python測試開發django -141.Bootstrap 面板(Panels)

前言

面板組件用於把 DOM 組件插入到一個盒子中。創建一個基本的面板，只需要向

元素添加 class .panel 和 class .panel-default 即可

基礎面板

不帶標題的基本面板

<div class="container">
    <div class="panel panel-default">
        <div class="panel-body">
            這是一個基本的面板，沒有標題
        </div>
    </div>
</div>

顯示效果

面板標題

通過以下兩種方式來添加面板標題：

• 使用 .panel-heading class 可以很簡單地向面板添加標題容器。
• 使用帶有 .panel-title class 的

  -

  來添加預定義樣式的標題。

panel-heading標題面板

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

帶panel-title 的面板

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

面板腳注

面板分3個部分：標題，內容，腳注

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            面板標題
        </h3>
    </div>
    <div class="panel-body">
        這是一個基本的面板
    </div>
    <div class="panel-footer">
         作者：張無忌
    </div>
</div>

顯示效果

添加顏色

添加panel-primary，panel-success， panel-info，panel-warning，panel-danger添加不同顏色

<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-success">
    <div class="panel-heading">
        <h3 class="panel-title">面板標題</h3>
    </div>
    <div class="panel-body">
        這是一個基本的面板
    </div>
</div>
<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-warning">
    <div class="panel-heading">
        <h3 class="panel-title">面板標題</h3>
    </div>
    <div class="panel-body">
        這是一個基本的面板
    </div>
</div>
<div class="panel panel-danger">
    <div class="panel-heading">
        <h3 class="panel-title">面板標題</h3>
    </div>
    <div class="panel-body">
        這是一個基本的面板
    </div>
</div>

顯示效果