## 按鈕 **可作為按鈕使用的標簽或元素** 為`<a>`、`<button>`或`<input>`元素添加按鈕類（button class）都可使用 Bootstrap 提供的樣式。 ```html <a href="" class="btn btn-default" role="button">link 鏈接</a> <button class="btn btn-default" type="submit">button 按鈕</button> <input type="button" class="btn btn-default" value="input"> <input type="submit" class="btn btn-default" value="submit"> ```  **注意** ： （1）雖然按鈕類可以應用到`<a>`和`<button>`元素上，但是，導航和導航條組件只支持`<button>`元素。 （2）如果`<a>`元素被作為按鈕使用， 并用于在當前頁面觸發某些功能，而不是用于鏈接其他頁面或鏈接當前頁面中的其他部分，那么，必須給 a 標簽添加`role="button"`屬性。 ***** **預定義樣式** 使用下面列出的類可以快速創建一個帶有預定義樣式的按鈕。 ```html <button type="button" class="btn btn-default">默認樣式</button> <button type="button" class="btn btn-primary">首選項</button> <button type="button" class="btn btn-success">成功</button> <button type="button" class="btn btn-info">一般信息</button> <button type="button" class="btn btn-warning">警告樣式</button> <button type="button" class="btn btn-danger">危險</button> <button type="button" class="btn btn-link">link 鏈接</button> ```  **尺寸** 如果需要不同尺寸的按鈕，使用`.btn-lg`、`.btn-sm`或`.btn-xs`就可以獲得不同尺寸的按鈕。 ```html <p> <button type="button" class="btn btn-primary btn-lg">（首選項）大按鈕</button> <button type="button" class="btn btn-default btn-lg">（默認樣式）大按鈕</button> </p> <p> <button type="button" class="btn btn-primary">（首選項）默認尺寸1</button> <button type="button" class="btn btn-default">（默認樣式）默認尺寸2</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">（首選項）小按鈕</button> <button type="button" class="btn btn-default btn-sm">（默認樣式）小按鈕</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">（首選項）超小按鈕</button> <button type="button" class="btn btn-default btn-xs">（默認樣式）超小按鈕</button> </p> ```  通過給按鈕添加`.btn-block`類可以將其拉伸至父元素100%的寬度，而且按鈕也變為了塊級（block）元素。 ***** **激活狀態** 當按鈕處于激活狀態時，其表現為被按壓下去（底色更深、邊框夜色更深、向內投射陰影）。對于`<button>`元素，是通過`:active`狀態實現的。對于`<a>`元素，是通過`.active`類實現的。 **1.** button 元素 由于`:active`是偽狀態，按下就會處于激活狀態，但是如果需要讓 button呈現出同樣外觀的時候可以添加`.active`類。 ```html <button type="button" class="btn btn-primary btn-lg active">primary button</button> ``` 激活后的狀態 ：  **2.** 鏈接（`<a>`）元素 可以為基于`<a>`元素創建的按鈕添加`.active`類。 ```html <a href="javascript:;" class="btn btn-primary btn-lg active" role="button">primary button</a> ``` 激活后的狀態 ：  ***** **禁用狀態** 通過為按鈕的背景設置`opacity`屬性就可以呈現出無法點擊的效果。 **1.** button 元素 為`<button>`元素添加`disabled`屬性，讓按鈕表現出禁用狀態。 ```html <button type="button" class="btn btn-primary btn-lg active" disabled="disabled">primary button</button> ```  注意：跨瀏覽器兼容性。如果為`<button>`元素添加`disabled`屬性，Internet Explorer 9 及更低版本的瀏覽器將會把按鈕中的文本繪制為灰色，并帶有陰影， 目前還沒有解決辦法。  **2.** 鏈接（`<a>`）元素 給`<a>`元素創建的按鈕添加`.disabled`類。 ```html <a href="javascript:;" class="btn btn-primary btn-lg active disabled" role="button">primary button</a> ```  注意：a 標簽的鏈接的原始功能不受影響，如果不需要鏈接功能，建議通過 JavaScript 代碼來禁止鏈接的原始功能。