# 按鈕
輕松創建擁有不同樣式的漂亮按鈕。
## 用法
要應用這個組件,在一個`<a>`或`<button>`元素中添加`.uk-button`類即可。現在你已經創建了一個按鈕。在`<button>`元素中添加`disabled`屬性可以禁用按鈕。
### 示例

### Code
```
<a class="uk-button" href="">...</a>
<button class="uk-button" type="button">...</button>
<button class="uk-button" type="button" disabled>...</button>
```
注意 在一個組(row)里顯示多個按鈕,你可以給它們添加一個頂部外邊距(top margin),這樣,在較小的視口中它們會堆疊顯示。僅需把[效果組件](utility.html) 中的 `data-uk-margin` 屬性添加到它們的父元素中即可。
* * *
## 色彩修飾
這里有幾個顏色修飾類可以使用。僅需添加下列類中的一個,即可得到不同的外觀。

* * *
## 尺寸修飾
往一個按鈕中添加`.uk-button-mini`,`.uk-button-small`或`.uk-button-large`類使該按鈕更小或更大。

* * *
### 滿寬按鈕
添加 [網格組件](grid.html) 中的 `.uk-width-1-1`類,該按鈕將占滿整個容器寬度。
### 示例

### 標簽
```
<button class="uk-button uk-width-1-1 uk-margin-small-bottom">...</button>
<button class="uk-button uk-width-1-1">...</button>
```
* * *
## 按鈕組
創建一個按鈕組,在包裹著按鈕們的 `<div>` 元素中添加 `.uk-button-group` 類即可。
### 示例

### 標簽
```
<div class="uk-button-group">
<a class="uk-button" href="">...</a>
<button class="uk-button">...</button>
<button class="uk-button">...</button>
</div>
```
* * *
## JavaScript
你可以通過JavaScript切換按鈕狀態。添加 `data-uk-button` 屬性即可。
### 示例

### 標簽
```
<button class="uk-button uk-button-primary" type="button" data-uk-button>Button</button>
```
* * *
### 復選按鈕
像復選框一樣切換一組按鈕的狀態,需要將這些按鈕包裹在帶有data屬性 `data-uk-button-checkbox` 的 `<div>`元素中。這屬性也能用于按鈕組。
#### 示例

### 標簽
```
<div data-uk-button-checkbox>
<button class="uk-button">...</button>
<button class="uk-button">...</button>
<button class="uk-button">...</button>
</div>
```
* * *
### 單選按鈕
想要按鈕組像下面例子中一樣只能按下一個?用帶有 `data-uk-button-radio` 屬性的 `<div>` 元素包裹一組按鈕就行。這個也能用于按鈕組。
#### 示例

### 標簽
```
<div data-uk-button-radio>
<button class="uk-button">...</button>
<button class="uk-button">...</button>
<button class="uk-button">...</button>
</div>
```
* * *
## 帶有下拉菜單的按鈕
按鈕可以用來觸發 [下拉菜單](dropdown.html)。只需要添加 `.uk-button-dropdown` 類名和 `data-uk-dropdown` 屬性到包含按鈕和下拉菜單的 `<div>` 元素中即可。
### Example

### Markup
```
<!-- This is the container enabling the JavaScript -->
<div class="uk-button-dropdown" data-uk-dropdown>
<!-- This is the button toggling the dropdown -->
<button class="uk-button">...</button>
<!-- This is the dropdown -->
<div class="uk-dropdown uk-dropdown-small">
<ul class="uk-nav uk-nav-dropdown">
<li><a href="">...</a></li>
<li><a href="">...</a></li>
</ul>
</div>
</div>
```
* * *
### 帶下拉菜單的按鈕組
使用按鈕組將按鈕分成左邊是標準行為的按鈕和右邊是帶下拉菜單的按鈕,僅需將他們用一個`<div>`元素包裹,然后在`<div>`中添加`data-uk-dropdown="{mode:'click'}"`屬性即可。 當然,下拉菜單也可以用于按鈕組中的一個按鈕。
#### 示例

#### Code
```
<div class="uk-button-group">
<!-- 標準按鈕 -->
<button class="uk-button">...</button>
<!-- 關聯JavaScript的容器 -->
<div data-uk-dropdown="{mode:'click'}">
<!-- 觸發下拉菜單的按鈕 -->
<a href="" class="uk-button">...</a>
<!-- 下拉菜單 -->
<div class="uk-dropdown uk-dropdown-small">
<ul class="uk-nav uk-nav-dropdown">
<li><a href="">...</a></li>
<li><a href="">...</a></li>
</ul>
</div>
</div>
</div>
```
- UIkit 中文文檔
- 開始使用
- 初學者
- 開始使用
- 如何自定義
- 布局示例
- 開發者
- 項目結構
- Less & Sass 文件
- 創建主題
- 創建樣式
- Customizer.json
- JavaScript
- 自定義前綴
- 核心組件
- 默認
- 基礎
- 打印
- 布局類組件
- 網格
- 面板/Panel
- 塊/Block
- 文章
- 評論/Comment
- 效果/Utility
- Flex 布局
- 覆蓋/Cover
- 導航類組件
- 導航菜單
- 導航欄
- 二級導航
- 面包屑/Breadcrumb
- 分頁
- 選項卡
- 縮略圖導航/Thumbnav
- 頁面元素
- 列表
- 描述列表
- 表格
- 表單
- 常用組件
- 按鈕
- 圖標
- 關閉/Close
- 徽章/Badge
- 提示框
- 縮略圖/Thumbnail
- 遮罩/Overlay
- 文本
- 列
- 動畫
- 對比度/Contrast
- JAVASCRIPT組件
- 下拉菜單
- 模態對話框
- 抽屜/Off-canvas
- 切換器/Switcher
- 撥動/toggle
- 滾動監聽/Scrollspy
- 平滑滾動
- 附加組件
- 布局類組件
- 動態網格
- 視差網格
- 導航類組件
- 圓點導航
- 滑動導航/Slidenav
- 動態分頁
- 常用組件
- 高級表單
- 文件表單/Form file
- 密碼表單
- 選擇表單
- 占位符
- 進度條/Progress
- JAVASCRIPT組件
- 燈箱/Lightbox
- 自動完成/Autocomplete
- 日期選擇器/Datepicker
- HTML 編輯器
- 滾動條/Slider
- 滑塊集/Slideset
- 幻燈片/Slideshow
- 視差/Parallax
- 手風琴/Accordion
- 通知/Notify
- 搜索/Search
- 可嵌套/Nestable
- 可排序/Sortable
- 附著/Sticky
- 時間選擇器
- 工具提示/Tooltip
- 上傳