# 按鈕(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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learnprogramming.gitbook.io/programlearned/bootstrap/button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.