4-4 面板

一、基本實例

默認的.panel組件所做的只是設置基本的邊框（border）和內補（padding）來包含內容。

<div  class= "panel panel-default" > 
  <div  class= "panel-body" >
    Basic panel example
  </div> 
</div>

二、帶標題的面版

通過.panel-heading可以很簡單地為面板加入一個標題容器。你也可以通過添加設置了.panel-title類的<h1> - <h6>標籤，添加一個預定義樣式的標題。

為了給鏈接設置合適的顏色，務必將鏈接放到帶有.panel-title類的標題標籤內。

<div  class= "panel panel-default" > 
  <div  class= "panel-heading" > Panel heading without title </div> 
  <div  class= "panel-body" >
    Panel content
  </div> 
</div>

<div  class= "panel panel-default" > 
  <div  class= "panel-heading" > 
    <h3  class= "panel-title" > Panel title </h3> 
  </div> 
  <div  class= "panel-body" >
    Panel content
  </div> 
</div>

三、帶腳註的面版

把按鈕或次要的文本放入.panel-footer容器內。注意麵版的腳註不會從情境效果中繼承顏色，因為他們並不是主要內容

<div  class= "panel panel-default" > 
  <div  class= "panel-body" >
    Panel content
  </div> 
  <div  class= "panel-footer" > Panel footer </div> 
</div>

<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>