# 按鈕 輕松創建擁有不同樣式的漂亮按鈕。 ## 用法 要應用這個組件，在一個`&lt;a&gt;`或`&lt;button&gt;`元素中添加`.uk-button`類即可。現在你已經創建了一個按鈕。在`&lt;button&gt;`元素中添加`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> ``` * * * ## 按鈕組 創建一個按鈕組，在包裹著按鈕們的 `&lt;div&gt;` 元素中添加 `.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` 的 `&lt;div&gt;`元素中。這屬性也能用于按鈕組。 #### 示例  ### 標簽 ``` <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` 屬性的 `&lt;div&gt;` 元素包裹一組按鈕就行。這個也能用于按鈕組。 #### 示例  ### 標簽 ``` <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` 屬性到包含按鈕和下拉菜單的 `&lt;div&gt;` 元素中即可。 ### 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> ``` * * * ### 帶下拉菜單的按鈕組 使用按鈕組將按鈕分成左邊是標準行為的按鈕和右邊是帶下拉菜單的按鈕，僅需將他們用一個`&lt;div&gt;`元素包裹，然后在`&lt;div&gt;`中添加`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> ```