按钮样式 可以用于 
按钮元素<button> 
超链元素<a> 
按钮类型的input元素 <input type="button"> 
提交类型的input元素 <input type="submit"> 
重置类型的input元素 <input type="reset">












* 原始样式按钮

把button标签变成了平面的,一般不使用
<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn">原始样式按钮</button>
* 默认按钮

无色按钮

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-default">默认按钮</button>
* 提交按钮

用于提交数据

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-primary">提交按钮</button>
* 成功按钮

一般用于一系列操作的最后一步,比如购物车的最后付款一步

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-success">成功按钮</button>
* 信息按钮

点击后,显示更多的信息

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-info">信息按钮</button>
* 警告按钮

一般用于修改行为的按钮

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-warning">警告按钮</button>
* 危险按钮

一般用于严重行为的按钮,比如删除

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-danger">危险按钮</button>
* 表现为连接

button标签会表现为一个超链,但是依然是一个button标签

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-link">表现为链接</button>
* 大一点的按钮

引起瞩目的按钮

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-lg">大一点的按钮</button>
* 小一点的按钮

放不下的时候,就用小一点的按钮

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-sm">小一点的按钮</button>
* 最小的按钮

还放不下就用这个

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-xs">最小的按钮</button>
* 宽屏按钮

水平方向占用父容器的100%

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-block">宽屏按钮</button>
* 激活状态按钮

按钮处于正在被按下状态,一般用于显示一个需要消耗较多时间的操作,比如上传一个图片

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn active">激活状态按钮</button>
* 无效按钮

按钮处于无效状态,不可点击,比如发了2秒钟后的红包

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn disabled">领红包</button>
* 多种按钮样式混用

多种按钮样式可以用在一起

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn disabled btn-danger btn-xs">发红包</button>


友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信