:::

3. 按鈕 Buttons

列表

<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%2Fpage.php%3Ftbsn%3D29%26tbdsn%3D835

書籍目錄

展開 | 闔起

線上使用者

27人線上 (14人在瀏覽線上書籍)

會員: 0

訪客: 27

更多…