.btn 基础class
.btn-default 白底黑字的按钮
.btn-warning 红色按钮
.btn-success 绿色按钮
.btn-info 浅蓝色按钮
.btn-primary 深蓝色按钮
.btn-lg 大号按钮
.btn-sm 小号按钮
.btn-xs 超小号按钮
.btn-block 块级按钮
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>Bootstrap 101 Template</title> 8 9 <!-- Bootstrap --> 10 <link href="css/bootstrap.css" rel="stylesheet"> 11 12 <!--[if lt IE 9]> 13 <script src="js/html5shiv.min.js"></script> 14 <script src="js/respond.min.js"></script> 15 <![endif]--> 16 </head> 17 <body> 18 <div class="container"></div> 19 <h1>全局Css样式---按钮</h1> 20 <h3>三种形式的按钮</h3> 21 <button class="btn btn-default">button按钮</button> 22 <input type="button" class="btn btn-default" value="input按钮"> 23 <a href="#" class="btn btn-default">LINK按钮</a> 24 <h3>三种形式的按钮</h3> 25 <button class="btn ">button按钮</button> 26 <input type="button" class="btn " value="input按钮"> 27 <a href="#" class="btn ">LINK按钮</a> 28 29 <h3>按钮的常用颜色总共有五中常用颜色</h3> 30 <a href="#" class="btn btn-danger">红色按钮-危险色</a> 31 <a href="#" class="btn btn-warning">黄色按钮-警告色</a> 32 <a href="#" class="btn btn-success">绿色按钮-成功色</a> 33 <a href="#" class="btn btn-info">浅蓝色-提示色</a> 34 <a href="#" class="btn btn-primary">深蓝色按钮-基础色</a> 35 36 <h3>按钮的四种大小</h3> 37 <a href="#" class="btn btn-success btn-lg" >大号按钮</a> 38 <a href="#" class="btn btn-success" >默认号按钮</a> 39 <a href="#" class="btn btn-success btn-sm" >小号按钮</a> 40 <a href="#" class="btn btn-success btn-xs" >超小号按钮</a> 41 42 <h3>块级按钮</h3> 43 <a href="#" class="btn btn-primary btn-block" >深蓝色-块级按钮</a> 44 <a href="#" class="btn btn-info btn-block" >浅蓝色-块级按钮</a> 45 <a href="#" class="btn btn-danger btn-block" >红色-块级按钮</a> 46 <a href="#" class="btn btn-warning btn-block" >黄色-块级按钮</a> 47 <a href="#" class="btn btn-success btn-block" >绿色-块级按钮</a>