怎樣創(chuàng)建一個(gè) Panel ?
通過 .panel .panel-default .panel-body 三個(gè)類可以創(chuàng)建一個(gè) Panel
<div class = "panel panel-default">
<div class = "panel-body">
這是一個(gè)最簡(jiǎn)單 Panel
</div>
</div>
01.PNG
怎樣為 Panel 添加一個(gè) Heading ?
在 Panel 的 .panel-body 之前加入一個(gè) .panel-heading 元素就可以為 Panel 添加一個(gè) Heading
<div class = "panel panel-default">
<div class = "panel-heading">
面板的 Heading
</div>
<div class = "panel-body">
........
</div>
</div>
帶 Heading 的面板
怎樣為 Panel 添加一個(gè) Footer ?
在 Panel 的 .panel-body 之后加入一個(gè) .panel-footer 元素就可以為 Panel 添加一個(gè) 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)添加一個(gè)<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)部多了一個(gè) <h6> 標(biāo)簽姑躲，設(shè)置了預(yù)設(shè)樣式
</h6>
</div>
<div class = "panel-body">
面板內(nèi)容
</div>
</div>
預(yù)設(shè)樣式
怎樣在 Panel 的 Footer 中添加按鈕 ？
直接將按鈕包裹在一個(gè) <div> 中崭闲，然后添加到 Footer 內(nèi)部即可肋联，要注意下面兩點(diǎn)：
- 必須為 Footer 添加
.clearfix類威蕉，否則將破會(huì) Footer 的布局 - 包裹按鈕的
<div>可以設(shè)置一個(gè).pull-right刁俭，讓按鈕向右側(cè)對(duì)齊
<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 中添加一個(gè) .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 中添加一個(gè) .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
