• 首页
• 域名注册
• 虚拟主机
• 网站建设
• 服务器租用
• 营销推广
• 网站程序
• 前端开发
• 移动互联网
• 企业邮箱

• 当前位置：创新互联 >> 常见问题 >> 前端开发 >> bootstrap教程 >> bootstrap按钮button标签或元素组件样式状态类

bootstrap按钮button标签或元素组件样式状态类

• 作者：创新互联 文章来源：网页前端技术 点击数： 更新时间：2016-03-19
• Bootstrap 提供了很多丰富按钮供开发者使用。
  

  1.可作为按钮使用的标签或元素

  //转化成普通按钮

  <a href="###" class="btn btn-default">Link</a>
  <button class="btn btn-default">Button</button>
  <input type="button" class="btn btn-default" value="input">
  

  
  Bootstrap button注意事项有三点：
  

  (1).bootstrap针对button组件的注意事项

  虽然按钮类可以应用到<a> 和<button> 元素上，但是，导航和导航条组件只支持<button> 元素。

  (2).bootsrtrap链接被作为按钮使用时的注意事项

  如果<a> 元素被作为按钮使用-- 并用于在当前页面触发某些功能-- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置role="button" 属性。

  (3).bootstrap按钮跨浏览器展现

  我们总结的最佳实践是：强烈建议尽可能使用<button> 元素来获得在各个浏览器上获得相匹配的绘制效果。

  另外，我们还发现了Firefox <30 版本的浏览器上出现的一个bug，其表现是：阻止我们为基于<input> 元素所创建的按钮设置line-height 属性，这就导致在Firefox 浏览器上不能完全和其他按钮保持一致的高度。

  
  

  2.bootstarp button预定义样式

  //一般信息

  
  

  <button class="btn btn-info">Button</button>
  

  样式	说明
  btn-default	默认样式
  btn-success	成功样式
  btn-info	一般信息样式
  btn-warning	警告样式
  btn-danger	危险样式
  btn-primary	首选项样式
  btn-link	链接样式

  
  
  

  3.bootstrap button尺寸大小

  //从大到小的尺寸

  <button class="btn btn-lg">Button</button>
  <button class="btn">Button</button>
  <button class="btn btn-sm">Button</button>
  <button class="btn btn-xs">Button</button>
  

  
  

  4.bootstrap块级按钮

  //块级换行

  <button class="btn btn-block">Button</button>
  <button class="btn btn-block">Button</button>
  

  
  

  5.bootstrap button激活状态

  //激活按钮

  <button class="btn active">Button</button>
  

  
  

  6.bootstrap button禁用状态

  //禁用按钮

  <button class="btn active disabled">Button</button>
  

• bootstrap表单form元素组件样式类 :上一篇
  Bootstrap表格table属性样式类介绍 :下一篇