Tad 教材網 - 線上書籍

:::

2. 格線系統 The Grid

4. 導覽列 Navigation next

Groundwork CSS
==============

###  列表

```
<pre class="brush:xml;">
<ol class="list">
  <li>會有漂亮的列表</li>
</ol>
```

###  按鈕尺寸

```
<pre class="brush:xml;">
<button class="small">小按鈕</button>
<button>一般按鈕</button>
<button class="large">大按鈕</button>
```

###  按鈕顏色

```
<pre class="brush:xml;">
<button>一般按鈕（藍）</button>
<button class="error">錯誤按鈕（紅）</button>
<button class="warning">警告按鈕（橘）</button>
<button class="success">成功按鈕（綠）</button>
<button class="disabled">無效按鈕（灰）</button>
```

###  按鈕樣式

```
<pre class="brush:xml;">
<button>一般小圓角按鈕</button>
<button class="square">矩形按鈕</button>
<button class="round">大圓角按鈕</button>
<button class="block">整區域按鈕</button>
```

###  按鈕綜合

```
<pre class="brush:php;">
<a class="small button">一般按鈕（小）藍色</a>
<a class="success button">成功按鈕（預設）綠色</a>
<a class="large error button">錯誤按鈕（大）紅色</a>
```

###  按鈕列表

```
<pre class="brush:php;">
<ul class="button-list">
  <li><a href="#" class="active">第一個按鈕（作用中）</a></li>
  <li><a href="#">第二個按鈕（正常按鈕）</a></li>
  <li><a href="#" class="disabled">第三個按鈕（鎖定中）</a></li>
</ul>
```

###  下拉選單按鈕

```
<pre class="brush:xml;">
<span class="dropdown button">下拉選單按鈕
  <ul>
    <li><a href="#"><i class="icon-home"></i> 下拉項目 1</a></li>
    <li><a href="#"><i class="icon-envelope-alt"></i> 下拉項目 2</a></li>
    <hr>
    <li><a href="#"><i class="icon-heart"></i> 下拉項目 3</a></li>
  </ul>
</span>
```

:::