BootStrap按钮标签及基本样式_Javascript教程-查字典教程网
BootStrap按钮标签及基本样式
BootStrap按钮标签及基本样式
发布时间:2016-12-30 来源:查字典编辑
摘要:按钮标签在,或input元素上使用按钮class。但是为了避免跨浏览器的不一致性,建议使用标签。Bootstrap模板链接按钮感觉link标...

按钮标签

在<a>,<button>或input元素上使用按钮class。但是为了避免跨浏览器的不一致性,建议使用<button>标签。

<!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta charset="utf-8"> <> <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <> <a href="#" role="button">链接</a> <button type="submit">按钮</button> <input type="button" value="输入"> <input type="submit" value="提交"> <> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <> <script src="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 表示按钮被激活,按钮会比普通的按钮宽一些

disabled disabled属性和disabled类都能将按钮禁用,两者效果相同。对于link,用disabled属性会让link显示出和button相同的效果。鼠标移上去就变成禁止的样式

<> <a role="button" href="#">应用disabled类</a> <> <a role="button" disabled="disabled" href="#">应用disabled标签</a> <button type="submit">按钮</button>

以上所述是小编给大家介绍的BootStrap按钮标签及基本样式,希望对大家有所帮助,如果大家有任何疑问请给我们留言,小编会及时回复大家的。在此也非常感谢大家对查字典教程网的支持!

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类