BootStrap按钮标签及基本样式
按钮标签
在<a>,<button>或input元素上使用按钮class。但是为了避免跨浏览器的不一致性，建议使用<button>标签。
<!DOCTYPEhtml> <html> <head> <title>Bootstrap模板</title> <metacharset="utf-8"> <!--引入Bootstrap--> <linkhref="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"> </head> <body> <!--记录不同的标签使用bootstrap的btn类--> <aclass="btnbtn-default"href="#"role="button">链接</a> <buttonclass="btnbtn-default"type="submit">按钮</button> <inputclass="btnbtn-default"type="button"value="输入"> <inputclass="btnbtn-default"type="submit"value="提交"> <!--jQuery(Bootstrap的JavaScript插件需要引入jQuery)--> <scriptsrc="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <!--包括所有已编译的插件--> <scriptsrc="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
感觉link标签的不怎么明显，但是还是能够从边距上看出是一个button的，这里只是说明了怎样利用不同的标签来使用btnclass。
可以使用在以上标签的样式
基本样式
btn为按钮添加基本的按钮样式，一般与下面的类联合只用，这样可以保证按钮大小和边距的统一。
颜色
btn-default默认的按钮样式，就是白底黑字灰框，要跟btn联合使用，下同
btn-primary原始的按钮样式，蓝底白字
btn-success成功的样式，绿底白字
btn-info表示点击后会弹出信息，淡蓝色底白字
btn-warning表示需要谨慎操作的按钮，黄底白字
btn-danger表示危险的操作，红底白字
btn-link让按钮看起来像一个连接，仍然保持按钮的行为
大小
btn-lg比普通的图标要大的大图标
btn-sm小图标
btn-xs超小图标
btn-block块级按钮，拉伸至父元素100%的宽度
按钮这里并不能构成响应式分布，如果三个都写了，最后一个类会覆盖前面的样式。
状态
active表示按钮被激活，按钮会比普通的按钮宽一些
disableddisabled属性和disabled类都能将按钮禁用，两者效果相同。对于link，用disabled属性会让link显示出和button相同的效果。鼠标移上去就变成禁止的样式
<!--应用了disabled类的只是禁用了连接--> <aclass="btnbtn-dangerdisabled"role="button"href="#">应用disabled类</a> <!--使用了disabled属性则禁用了整个按钮--> <aclass="btnbtn-danger"role="button"disabled="disabled"href="#">应用disabled标签</a> <buttonclass="btnbtn-defaultbtn-dangerdisabled"type="submit">按钮</button>
以上所述是小编给大家介绍的BootStrap按钮标签及基本样式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！