. 1 <-! . 1, Button BTN affirmed 2 button color . 3 2, BTN-default default button style . 4 . 3, BTN-PRIMARY KEY . 5 . 4, BTN-Success . 6 . 5, BTN-info . 7 . 6, BTN-warning . 8 . 7, BTN -danger . 9 . 8, BTN-Link 10 . 11 button size 12 is . 9, BTN LG- 13 is 10, BTN-MD 14 . 11, BTN XS- 15 16 12 is, BTN-Block width is 100% of the width of the parent button . 17 18 is a button and activation clicks not transited . 19 13 is, Active 20 is 14, Disabled 21 22 23 15、btn-group 定义按钮组 --> 24 <!DOCTYPE html> 25 <html lang="en"> 26 <head> 27 <meta charset="UTF-8"> 28 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 29 <title>Document</title> 30 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script> 31 <script type="text/javascript" src="./js/bootstrap.min.js"></script> 32 <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"> 33 <style type="text/css"> 34 35 </style> 36 </head> 37 <body> 38 <div class="container"> 39 <div class="row"> 40 <input type="button" name="" value="按钮" class="btn btn-primary"> 41 <a href="#" class="btn btn-info">a标签按钮</a> 42 <a href="#" class="btn btn-success"43 is>A</A button tag> <a href="#" class="btn btn-default">a标签按钮</a> 44 <a href="#" class="btn btn-warning">a标签按钮</a> 45 <a href="#" class="btn btn-danger">a标签按钮</a> 46 <a href="#" class="btn btn-link">a标签按钮</a> 47 </div> 48 <br> 49 <br> 50 <div class="row"> 51 <a href="#" class="btn btn-info btn-lg">lg尺寸</a> 52 <a href="#" class="btn btn-info btn-md">md尺寸</a> 53 <a href="#" class="btn btn-info btn-xs">54 is>A</Size xs <a href="#" class="btn btn-info btn-default">默认尺寸</a> 55 </div> 56 57 <br> 58 <br> 59 <div class="row"> 60 <a href="#" class="btn btn-info btn-lg btn-block">宽度是100%的按钮</a> 61 </div> 62 63 <br> 64 < br > 65 < div class = "Row" > 66 < A the href = "#" class = "BTN BTN-info Active" > button is active </ A > 67 < A the href = "#" class = " Disabled-info BTN BTN " > button click function loss </ A > 68 </ div > 69 70 < br > 71 is < br > 72 <!- There Group -> 73 <div class="row"> 74 <a href="#" class="btn btn-primary">步骤一</a> 75 <a href="#" class="btn btn-default">步骤二</a> 76 <a href="#" class="btn btn-default">步骤三</a> 77 </div> 78 79 <br> 80 <br> 81 <!-- 无group --> 82 <div class="row"> 83 <div class="btn-group"> 84 <a href="#" class="btn btn-primary">步骤一</a> 85 <a href="#" class="btn btn-default">步骤二</a> 86 <a href="#" class="btn btn-default">步骤三</a> 87 </div> 88 </div> 89 90 <br> 91 <br> 92 <div class="row"> 93 <div class="btn-group"> 94 <input type="button" name="" value="步骤一" class="btn btn-primary"> 95 <input type="button" name="" value="步骤二" class="btn btn-default"> 96 <input type="button" name="" value="步骤三" class="btn btn-default"> 97 </div> 98 </div> 99 </div> 100 </body> 101 </html>