Bootstrap2用户指南
3.5.1 按钮的外观
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

排版

源代码

表格

表单

按钮

按钮的外观

Bootstrap提供了 .btn 类,用来定义默认的按钮效果。默认按钮是灰色背景,并带有圆角。可以为页面上的任何元素(如,<a>、<button>、<input> 等)添加 .btn 类,让它看起来像一个按钮。如:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

效果如图 3‑56所示:

Bootstrap按钮
图3-56 Bootstrap按钮

.btn 类的设计相对复杂,它综合应用了CSS3的大部分特效,如文本阴影、渐变背景、圆角、盒阴影等,而IE9不支持圆角的渐变背景,因此IE9删除了渐变效果。 IE在显示被禁用的按钮时也有问题,它将文本显示为灰色,并带有很难看的阴影,这个实在无法修复。

作为最佳实践,为了确保在各个浏览器具有一致的渲染效果,建议你根据使用上下文,选择合适的元素。如果你使用 input,就让你的按钮使用 <input type="submit">。

除了 .btn 类之外,Bootstrap还为按钮提供了一组情景样式类,用来设置按钮的背景颜色,以便在不同上下文中搭配合适的色彩。这些情景类见表:

按钮 class="" 描述
btn 带渐变的标准灰色按钮
btn btn-primary 提供额外的视觉感, 可在一系列的按钮中指出主要操作
btn btn-info 默认样式的替代样式
btn btn-success 表示成功或积极的动作
btn btn-warning 提醒应该谨慎采取这个动作
btn btn-danger 表示这个动作危险或存在危险
btn btn-inverse 备用的暗灰色按钮,不依赖于语义和用途
btn btn-link 简化一个按钮, 使它看起来像一个链接,同时保持按钮的行为

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验