Forty-seventh section of the bootstrap jQuery button

  . 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>

 

Guess you like

Origin www.cnblogs.com/kogmaw/p/12506470.html