Bootstrap 提供了一些選項來定義按鈕的樣式，具體如下表所示： 以下樣式可用于< a >, < button >, 或 < input > 元素上： <table border="1" cellpadding="2" cellspacing="0" style="font-size:undefined; border-collapse:collapse; margin-top:10px; margin-bottom:10px"><tbody style="background-color:inherit"><tr style="background-color:inherit"><th style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:98.4000015258789px"><span style="font-family:Comic Sans MS; font-size:14px">類</span></th><th style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:436px"><span style="font-family:Comic Sans MS; font-size:14px">描述</span></th></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">.btn</span></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">為按鈕添加基本樣式</span></td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:27.0000030517578px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">.btn-default</span></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:27.0000030517578px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">默認/標準按鈕</span></td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:30.199993896484386px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">.btn-primary</span></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:30.199993896484386px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">原始按鈕樣式（未被操作）</span></td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">.btn-success</span></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">表示成功的動作</span></td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">.btn-info</span></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">該樣式可用于要彈出信息的按鈕</span></td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">.btn-warning</span></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">表示需要謹慎操作的按鈕</span></td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">.btn-danger</span></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">表示一個危險動作的按鈕操作</span></td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">.btn-link</span></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">讓按鈕看起來像個鏈接 (仍然保留按鈕行為)</span></td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">.btn-lg</span></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">制作一個大按鈕</span></td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">.btn-sm</span></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">制作一個小按鈕</span></td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">.btn-xs</span></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">制作一個超小按鈕</span></td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">.btn-block</span></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">塊級按鈕(拉伸至父元素100%的寬度)</span></td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:24.5999755859375px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">.active</span></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:24.5999755859375px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">按鈕被點擊</span></td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">.disabled</span></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><span style="font-family:Comic Sans MS; font-size:14px">禁用按鈕<br/></span></td></tr></tbody></table> 首先看下不同顏色的按鈕： ~~~ <html lang="en"> <head> <!--網站編碼格式，UTF-8 國際編碼，GBK或 gb2312 中文編碼--> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="Keywords" content="關鍵詞一，關鍵詞二"> <meta name="Description" content="網站描述內容"> <meta name="Author" content="Yvette Lau"> <meta name = "viewport" content = " width = device-width, initial-scale = 1 "> <title>BootstrapDemo</title> <!--css js 文件的引入--> <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> </head> <body style="padding: 20px;"> <!-- 標準的按鈕 --> <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">鏈接按鈕</button> </body> </html> ~~~ 效果：  btn-default / btn-primary /btn-success/ btn-info/ btn-warning/ btn-danger/ btn-link給按鈕加上了不同的樣式。 ### 按鈕大小 鑒于head部分都是相同的，只列出Body的內容。 ~~~ <body style="padding: 20px;width:500px;"> <!-- 標準的按鈕 --> <button type="button" class="btn btn-default">默認按鈕</button> <button type="button" class="btn btn-lg btn-default">大的默認按鈕</button> <br/><br/> <!-- 提供額外的視覺效果，標識一組按鈕中的原始動作 --> <button type="button" class="btn btn-primary">原始按鈕</button> <button type="button" class="btn btn-sm btn-primary">小的原始按鈕</button> <br/><br/> <!-- 表示一個成功的或積極的動作 --> <button type="button" class="btn btn-success">成功按鈕</button> <button type="button" class="btn btn-xs btn-success">特別小的成功按鈕</button> <br/><br/> <!-- 用于要彈出信息的按鈕 --> <button type="button" class="btn btn-info">信息按鈕</button><br/><br/> <button type="button" class="btn btn-block btn-info">塊級信息按鈕</button> </body> ~~~ 效果如下所示：  ### 按鈕狀態 按鈕分為active和disabled兩種狀態、 激活狀態：按鈕呈現出被按壓的外觀，即背景顏色變深、深色邊框和陰影。 禁用狀態：按鈕顏色會變淡 50%，并失去漸變 看具體的例子： ~~~ <body style="padding: 20px;width:500px;"> <!-- 標準的按鈕 --> <button type="button" class="btn btn-default">默認按鈕</button> <button type="button" class="btn btn-default active">激活的默認按鈕</button> <br/><br/> <!-- 提供額外的視覺效果，標識一組按鈕中的原始動作 --> <button type="button" class="btn btn-primary">原始按鈕</button> <button type="button" class="btn btn-primary active">激活的原始按鈕</button> <br/><br/> <!-- 表示一個成功的或積極的動作 --> <button type="button" class="btn btn-success">成功按鈕</button> <button type="button" class="btn btn-success active">激活的成功按鈕</button> <br/><br/> <!-- 用于要彈出信息的按鈕 --> <button type="button" class="btn btn-info">信息按鈕</button> <button type="button" class="btn btn-info active">激活的信息按鈕</button> <br/><br/> <button type="button" class="btn btn-default">默認按鈕</button> <button type="button" class="btn btn-default disabled">禁用的默認按鈕</button> <br/><br/> <!-- 提供額外的視覺效果，標識一組按鈕中的原始動作 --> <button type="button" class="btn btn-primary">原始按鈕</button> <button type="button" class="btn btn-primary disabled">禁用的原始按鈕</button> <br/><br/> <!-- 表示一個成功的或積極的動作 --> <button type="button" class="btn btn-success">成功按鈕</button> <button type="button" class="btn btn-success disabled">禁用的成功按鈕</button> <br/><br/> <!-- 用于要彈出信息的按鈕 --> <button type="button" class="btn btn-info">信息按鈕</button> <button type="button" class="btn btn-info disabled">禁用的信息按鈕</button> </body> ~~~  ### 按鈕標簽 a,input都可以表現的像一個按鈕，但是避免跨瀏覽器不一致，最好使用Button標簽。 ~~~ <body style="padding: 20px;"> <a class="btn btn-default" href="#" role="button">超鏈接按鈕</a> <button class="btn btn-default btn-primary" type="submit">button按鈕</button> <input class="btn btn-default btn-success" type="button" value="input按鈕"> <input class="btn btn-default btn-info" type="submit" value="submit按鈕"> </body> ~~~