Tad 教材網 - 線上書籍

:::

2. 格線系統 The Grid

4. 導覽列 Navigation next

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

###  列表

```

<ol class="list">
  <li>會有漂亮的列表</li>
</ol>
```

###  按鈕尺寸

```

<button class="small">小按鈕</button>
<button>一般按鈕</button>
<button class="large">大按鈕</button>
```

###  按鈕顏色

```

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

###  按鈕樣式

```

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

###  按鈕綜合

```

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

###  按鈕列表

```

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

###  下拉選單按鈕

```

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

:::

搜尋

進階搜尋

QR Code 區塊

https%3A%2F%2Fwww.tad0616.net%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D835

快速登入

書籍目錄

展開 | 闔起

線上使用者

129人線上 (66人在瀏覽線上書籍)

會員: 0

訪客: 129

更多…

MarkDown

搜尋

QR Code 區塊

快速登入

書籍目錄

線上使用者