• bootstrap中的按钮的使用(样式表)
  • 超级玛丽 发表于 2015/4/22 17:18:00 | 分类标签: bootstrap 按钮 样式
  •  

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

    为 <a><button> 或 <input> 元素添加按钮类(button class)即可使用 Bootstrap 提供的样式。

    Link   
    复制
    <a class="btn btn-default" href="#" role="button">Link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <input class="btn btn-default" type="button" value="Input">
    <input class="btn btn-default" type="submit" value="Submit">

    针对组件的注意事项

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

    链接被作为按钮使用时的注意事项

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

    跨浏览器展现

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

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

    预定义样式

    使用下面列出的类可以快速创建一个带有预定义样式的按钮。

         
    复制
    <!-- Standard button -->
    <button type="button" class="btn btn-default">(默认样式)Default</button>
    
    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
    <button type="button" class="btn btn-primary">(首选项)Primary</button>
    
    <!-- Indicates a successful or positive action -->
    <button type="button" class="btn btn-success">(成功)Success</button>
    
    <!-- Contextual button for informational alert messages -->
    <button type="button" class="btn btn-info">(一般信息)Info</button>
    
    <!-- Indicates caution should be taken with this action -->
    <button type="button" class="btn btn-warning">(警告)Warning</button>
    
    <!-- Indicates a dangerous or potentially negative action -->
    <button type="button" class="btn btn-danger">(危险)Danger</button>
    
    <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
    <button type="button" class="btn btn-link">(链接)Link</button>

    Conveying meaning to assistive technologies

    为按钮添加不同的颜色只是一种视觉上的信息表达方式,但是,对于使用辅助技术 -- 例如屏幕阅读器 -- 的用户来说,颜色是不可见的。建议,确保通过颜色表达的信息或者通过内容自身表达出来(按钮上的文字),或者通过其他方式 -- 例如通过 .sr-only 类隐藏的额外文本 -- 表达出来。


  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:超级玛丽
  • 加入时间:2013/6/13 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮