Bootatrap中的表单(2)
button:btn 圆角灰色按钮
button:btn btn-default 圆角灰色边框按钮
button:btn btn-success 绿色
button:btn btn-primary 蓝色
button:btn btn-info 浅蓝
button:btn btn-warning 黄色
button:btn btn-danger 红色
button:btn btn-link 链接按钮改
btn-lg,btn-sm 按钮变大,变小
active 按下状态
btn-block 撑满父级,全屏
属性:disabled="disabled"禁用按钮
把链接变成按钮 <a class="btn btn-danger" href="">这是</a>
小练习:
![](https://images2015.cnblogs.com/blog/1160039/201706/1160039-20170611094320934-568897799.png)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> 7 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 8 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 9 </head> 10 <body> 11 <button class="btn btn-default btn-lg">这是一个按钮</button> 12 <button class="btn btn-default btn-sm">这是一个按钮</button> 13 <button class="btn btn-default">这是一个按钮</button> 14 <button class="btn btn-success">这是一个按钮</button> 15 <button class="btn btn-primary">这是一个按钮</button> 16 <button class="btn btn-info">这是一个按钮</button> 17 <button class="btn btn-warning">这是一个按钮</button> 18 <button class="btn btn-danger">这是一个按钮</button> 19 <button class="btn btn-link">这是一个按钮</button> 20 </body> 21 </html>