Bootstrap 面板
面板
Bootstrap 中的面板是一個帶邊框的盒子，內容在其中有填充。
一個基礎面板
面板使用 .panel 類建立，面板內的內容使用 .panel-body 類。
.panel-default 類用於設定面板的顏色。有關更多上下文類，請參閱本頁的最後一個示例。
面板標題
面板標題
面板內容
.panel-heading 類為面板新增標題。
示例
<div class="panel panel-default">
<div class="panel-heading">面板標題</div>
<div class="panel-body">面板內容</div>
</div>
自己動手試一試 »
面板頁尾
面板內容
.panel-footer 類為面板新增頁尾。
示例
<div class="panel panel-default">
<div class="panel-body">面板內容</div>
<div class="panel-footer">面板頁尾</div>
</div>
自己動手試一試 »
面板組
要將多個面板分組在一起，請將 .panel-group 類包裹的 <div> 放在它們周圍。
.panel-group 類會清除每個面板的底部邊距。
示例
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">面板內容</div>
</div>
<div class="panel panel-default">
<div class="panel-body">面板內容</div>
</div>
</div>
自己動手試一試 »
帶有上下文類的面板
要為面板著色，請使用上下文類（.panel-default、.panel-primary、.panel-success、.panel-info、.panel-warning 或 .panel-danger）。
示例
帶有 panel-default 類的面板
面板內容
帶有 panel-primary 類的面板
面板內容
帶有 panel-success 類的面板
面板內容
帶有 panel-info 類的面板
面板內容
帶有 panel-warning 類的面板
面板內容
帶有 panel-danger 類的面板
面板內容
