育將電腦工作室 - 線上書籍

網站、部落格架設
========

### <font><font>一、基本實例</font></font>

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

```
<pre class="brush:as3;">
<div  class= "panel panel-default" > 
  <div  class= "panel-body" >
    Basic panel example
  </div> 
</div>
```

### <font><font>二、帶標題的面版</font></font>

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

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

```
<pre class="brush:as3;">
<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>
```

### <font><font>三、帶腳註的面版</font></font>

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

```
<pre class="brush:as3;">
<div  class= "panel panel-default" > 
  <div  class= "panel-body" >
    Panel content
  </div> 
  <div  class= "panel-footer" > Panel footer </div> 
</div>
```

```
<pre class="brush:as3;">
<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>
```

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown