Bootstrap 按钮
(1)颜色
btn
btn-default
btn-primary
btn-success
btn-info
btn-warning
btn-danger
(2)大小
btn-lg
btn-sm
btn-xs
(3)块级按钮
btn-block
(4)状态
active
disabled
(5)按钮组
btn-group
(6)按钮组大小
btn-group-lg
btn-group-sm
btn-group-xs
(7)垂直按钮组
btn-group-vertical
(8)下拉框按钮组
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <div class="row clearfix"> <div class="col-md-12 column"> <button class="btn">按钮</button> <button class="btn btn-default">按钮</button> <button class="btn btn-primary">按钮</button> <button class="btn btn-success">按钮</button> <button class="btn btn-info">按钮</button> <button class="btn btn-warning">按钮</button> <button class="btn btn-danger">按钮</button> </div> <div class="col-md-12 columl"> <div style="width: 300px;"> <button class="btn btn-block btn-warning">块级按钮</button> </div> </div> <div class="col-md-12 columl"> <div> <button class="btn btn-lg btn-primary">大按钮</button> <button class="btn btn-sm btn-primary">中按钮</button> <button class="btn btn-xs btn-primary">小按钮</button> </div> </div> <div class="col-md-12 columl"> <div> <button class="btn btn-default active">已点击按钮</button> <button class="btn btn-default disabled">不可点击按钮</button> </div> </div> <div class="col-md-12 columl"> <div class="btn-group"> <button type="button" class="btn btn-primary">按钮组</button> <button type="button" class="btn btn-warning">按钮组</button> <button type="button" class="btn btn-primary">按钮组</button> </div> </div> <div class="col-md-12 columl"> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-warning">小按钮组</button> <button type="button" class="btn btn-primary">小按钮组</button> <button type="button" class="btn btn-warning">小按钮组</button> </div> </div> <div class="col-md-12 columl"> <div class="btn-group-vertical btn-group-xs"> <button type="button" class="btn btn-success">垂直小按钮组</button> <button type="button" class="btn btn-success">垂直小按钮组</button> <button type="button" class="btn btn-success">垂直小按钮组</button> </div> </div> <div class="col-md-12 columl"> <div class="btn-group"> <button type="button" class="btn btn-primary">下拉按钮组</button> <button type="button" class="btn btn-primary">下拉按钮组</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 下拉按钮组 <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">下拉链接</a></li> <li><a href="#">下拉链接</a></li> </ul> </div> </div> </div> </div> </body> </html>