> For the complete documentation index, see [llms.txt](https://learnprogramming.gitbook.io/programlearned/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learnprogramming.gitbook.io/programlearned/bootstrap/button.md).

# 按鈕(button)

## .btn 設計 `<button>` 元素使用。 但也可在 `<a>` 或 `<input>` 元素上使用

| 標籤           | 使用方法                                                            |
| ------------ | --------------------------------------------------------------- |
| a            | \<a class="btn btn-primary" href="#" role="button">Link\</a>    |
| button       | \<button class="btn btn-primary" type="submit">Button\</button> |
| input:button | \<input class="btn btn-primary" type="button" value="Input">    |
| input:submit | \<input class="btn btn-primary" type="submit" value="Submit">   |
| input:reset  | \<input class="btn btn-primary" type="submit" value="reset">    |

## 按鈕顏色樣式

* 改變按鈕顏色

| 顏色  | 對應的class      |
| --- | ------------- |
| 藍色  | btn-primary   |
| 灰色  | btn-secondary |
| 綠色  | btn-success   |
| 紅色  | btn-danger    |
| 黃色  | btn-warning   |
| 淺藍色 | btn-info      |
| 白色  | btn-light     |
| 黑色  | btn-dark      |
| 原生  | btn-link      |

* 若要改變外框顏色 : 加上 outline 即可
* 例子 : btn-outline-primary

## 按鈕大小樣式

| 小      | 大      | 區塊        |
| ------ | ------ | --------- |
| btn-sm | btn-lg | btn-block |

* 範例 ：

  ```markup
  <button type="button" class="btn btn-primary btn-block">level button</button>
  ```

## 啟用與停用

* 啟用：active
* 停用：disabled

| 狀態 | 標籤     | 用法    | 範例                                                                                      |
| -- | ------ | ----- | --------------------------------------------------------------------------------------- |
| 啟用 | a      | class | `<a href="#" class="btn btn-primary btn-lg active" role="button">link</a>`              |
| 啟用 | button | class | `<button type="button" class="btn btn-lg btn-primary active">button</button>`           |
| 啟用 | input  | class | `<input type="button" class="btn btn-secondary btn-lg active" value="input" >`          |
| 停用 | a      | class | `<a href="#" class="btn btn-primary btn-lg disabled" role="button">link</a>`            |
| 停用 | button | 標籤    | `<button type="button" class="btn btn-lg btn-primary" disabled>button</button>`         |
| 停用 | input  | 標籤    | `<input type="button" class="btn btn-secondary btn-lg active" disabled value="input" >` |

## 切換狀態

* 增加 data-toggle="button"
* 如預先需要切換按鈕，則須手動將 .active class 和 aria-pressed="true" 添加到 `<button>`&#x20;
* 範例 :&#x20;

  ```markup
  <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
  </button>
  ```

## 自行定義顏色管理工具

* 自行定義按鈕工具：<http://blog.koalite.com/bbg/>
* 定義出來的按鈕可以放在 css/my.css 中
* 若希望底色是透明的，可自行將背景顏色取代為 transparent