Bootstrap3实用教程
2.7.2 按钮的外观
阅读(

Bootstrap基础

Bootstrap全局样式

概述

栅格系统

排版

源代码

表格

表单

按钮

支持的元素

按钮的外观

Bootstrap中,使用 .btn 类来定义默认的按钮样式。默认按钮是灰色背景,并带有圆角。除 .btn 类之外,Bootstrap还为按钮提供了一组情景类,这些情景类通过为按钮设置不同的背景颜色,来表示不同的含义。见下表:

使用上表所列出的情景类,可以快速创建一个带有预定义样式的按钮。如:

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

效果如图 2‑72所示:

按钮的外观
图2-72 按钮的外观

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

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验