1 <!-- 1、btn 申明按钮 2 按钮颜色 3 2、btn-default 默认按钮样式 4 3、btn-primay 5 4、btn-success 6 5、btn-info 7 6、btn-warning 8 7、btn-danger 9 8、btn-link 10 11 按钮尺寸 12 9、btn-lg 13 10、btn-md 14 11、btn-xs 15 16 12、btn-block 宽度是父级宽100%的按钮 17 18 按钮的激活和不能点击转态 19 13、active 20 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">a标签按钮</a> 43 <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">xs尺寸</a> 54 <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 href="#" class="btn btn-info active">按钮处于激活状态</a> 67 <a href="#" class="btn btn-info disabled">按钮失去点击功能</a> 68 </div> 69 70 <br> 71 <br> 72 <!-- 有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>