Bootstrap-全局css样式之按钮
2015-06-14 16:53
706 查看
这里所说的按钮只是Bootstrap设计的能使标签或元素呈现按钮样式的属性,所以为
当然在实际开发中使用Bootstrap,我们可能在任何地方使用按钮,但是你也可能会发现并不是所有的按钮都能按照你的想法去呈现,所以,按钮使用的一些注意事项我们要记住。我们看看官网给我们提出的注意事项。
(1)针对组件的注意事项
虽然按钮类可以应用到
(2)链接被作为按钮使用时的注意事项
如果
(3)跨浏览器展现
我们总结的最佳实践是:强烈建议尽可能使用
另外,我们还发现了 Firefox <30 版本的浏览器上出现的一个 bug,其表现是:阻止我们为基于
我个人在使用中,发现了一个很不好的现象,就是使用<button>时候,为标签添加id属性,使用js操作button的时候,你会发现,在Bootstrap某些组件中JS操作不了这个button,但是当你把<button></button>换成<input />的时候,你会发现你的使用js控制了。具体什么原因我也不知道,也没什么时间深究,可能是Bootstrap的js设置了某些东西吧。所以建议大家在使用button时,需要js操作的,就用input或者a标签。
下面来看看预定义样式
提示:
上面提到的禁用状态类只是通过设置
更多有关Bootstrap的使用,请参考官方文档。
<a>、
<button>或
<input>元素添加按钮类(button class)即可使用 Bootstrap 提供的样式。
当然在实际开发中使用Bootstrap,我们可能在任何地方使用按钮,但是你也可能会发现并不是所有的按钮都能按照你的想法去呈现,所以,按钮使用的一些注意事项我们要记住。我们看看官网给我们提出的注意事项。
(1)针对组件的注意事项
虽然按钮类可以应用到
<a>和
<button>元素上,但是,导航和导航条组件只支持
<button>元素。
(2)链接被作为按钮使用时的注意事项
如果
<a>元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分,那么,务必为其设置
role="button"属性。
(3)跨浏览器展现
我们总结的最佳实践是:强烈建议尽可能使用
<button>元素来获得在各个浏览器上获得相匹配的绘制效果。
另外,我们还发现了 Firefox <30 版本的浏览器上出现的一个 bug,其表现是:阻止我们为基于
<input>元素所创建的按钮设置
line-height属性,这就导致在 Firefox 浏览器上不能完全和其他按钮保持一致的高度。
我个人在使用中,发现了一个很不好的现象,就是使用<button>时候,为标签添加id属性,使用js操作button的时候,你会发现,在Bootstrap某些组件中JS操作不了这个button,但是当你把<button></button>换成<input />的时候,你会发现你的使用js控制了。具体什么原因我也不知道,也没什么时间深究,可能是Bootstrap的js设置了某些东西吧。所以建议大家在使用button时,需要js操作的,就用input或者a标签。
下面来看看预定义样式
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button> <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
提示:
上面提到的禁用状态类只是通过设置
pointer-events: none来禁止
<a>元素作为链接的原始功能,但是,这一 CSS 属性并没有被标准化,并且 Opera 18 及更低版本的浏览器并没有完全支持这一属性,同样,Internet Explorer 11 也不支持。In addition, even in browsers that do support
pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. 因此,为了安全起见,建议通过 JavaScript 代码来禁止链接的原始功能。
更多有关Bootstrap的使用,请参考官方文档。
相关文章推荐
- MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件
- Bootstrap 引用的标准模板
- Bootstrap 模态框(Modal)插件
- Bootstrap居中方法
- bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form
- 基于Bootstrap3制作响应式布局网站(五)
- bootstrap modal 弹窗
- Asp.Net Mvc通用后台管理系统,bootstrap+easyui+权限管理+ORM
- 【原创】bootstrap框架的学习 第八课 -[bootstrap表单]
- bootstrap 提示、倒塌与旋转木马
- sass+compass+bootstrap三剑合璧高效开发记录
- bootstrap 表格、表单、面板、模态框
- 【原创】bootstrap框架的学习 第七课 -[bootstrap表格]
- 【原创】bootstrap框架的学习 第六课[bootstrap代码]
- 【原创】bootstrap框架的学习 第五课
- 【转】bootstrap模态框(modal)使用remote方法加载数据,只能加载一次的解决办法
- bootstrap 自定义
- Bootstrap3的栅格化样式
- Bootstrap 3 CSS classes with description
- [转]ASP.NET MVC Bootstrap极速开发框架