第四十七节 jQuery之bootstrap按钮 

  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>

 

posted @ 2020-03-16 20:49  kog_maw  阅读(202)  评论(0)    收藏  举报