面板樣式除了內容之外，還有壹個面板頭部可以添加標題，讓我們通過這篇文章看看Bootstrap面板樣式的使用方法。
Bootstrap面板基本樣式
直接調用面板樣式也非常容易，只需要通過以下代碼即可實現：
<div class="panel panel-default"> <div class="panel-body"> Basic panel example </div> </div>
該樣式僅僅包含了面板樣式的內容部分，而沒有加入頭部，適用於不需要頭部的面板內容。
Bootstrap面板帶標題樣式
上面提到的面板樣式是沒有帶標題的，在壹些情況下不夠用，所以Bootstrap面板還提供了帶有標題的面板樣式，讓我們看看應該怎麽去使用：
<div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">面板標題</h3> </div> <div class="panel-body"> 面板內容 </div> </div>
上面這壹部分代碼是最為標準的帶有標題的面板結構，為了適應閱讀設備以及SEO搜索引擎優化元素，最好將標題放入h1-h5的標簽中。
Bootstrap面板帶註腳樣式
如果壹些解釋說明類的文字無法在面板標題很好地表現出來，可以通過註腳的形式來進行說明，Bootstrap面板同樣提供了註腳這個樣式：
<div class="panel panel-default"> <div class="panel-body"> 面板內容 </div> <div class="panel-footer">面板註腳</div> </div>
通過主次關系來進行標題或者是註腳的選擇，是用好面板組件的關鍵。
Bootstrap面板有意義的樣式
和其他Bootstrap組件壹樣，Bootstrap面板樣式同樣具有有意義的樣式，通過引用這幾個樣式可以將該面板的作用直觀展現出來，同樣也是那幾種顏色和樣式名稱：
<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>
Bootstrap面板與表格結合
如果妳需要在面板中引入表格樣式，那麽也可以很方便地實現：
<div class="panel panel-default"> <div class="panel-heading">面板標題</div> <table class="table"> 表格內容 </table> </div>
Bootstrap面板與列表結合
就像開頭所說的壹樣，如果妳想要在面板中引入列表，那也真是再合適不過了，通過以下代碼便可輕松實現：
<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">列表項目1</li> <li class="list-group-item">列表項目2</li> <li class="list-group-item">列表項目3</li> <li class="list-group-item">列表項目4</li> <li class="list-group-item">列表項目5</li> </ul> </div>