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所示：

图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 上开源。

Bootstrap 按钮的外观相关推荐

Bootstrap按钮的外观
按钮的外观 Bootstrap中,使用 .btn 类来定义默认的按钮样式.默认按钮是灰色背景,并带有圆角.除 .btn 类之外,Bootstrap还为按钮提供了一组情景类,这些情景类通过为按钮设置不同 ...
Bootstrap按钮支持的元素
支持的元素 Bootstrap中,为 <a>.<button>.<input> 元素添加按钮相关的类,就可以让它使用Bootstrap提供的按钮样式,并拥有按钮的外 ...
iOS 11开发教程（十九）iOS11应用视图美化按钮之设置按钮的外观
iOS 11开发教程(十八)iOS11应用视图美化按钮之设置按钮的外观美化按钮说白了就是对按钮的属性进行设置,设置按钮的属性有两种方法:一种是使用编辑界面中的属性检查器:另一种是使用代码进行设置.以 ...
bootstrap 按钮颜色属性
bootstrap 按钮颜色属性有几种转载于:https://www.cnblogs.com/HUIWANG/p/11027889.html
Bootstrap 按钮组
按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.您可以通过 Bootstrap 按钮(Button) 插件添加可选的 JavaScript 单选框和复选框样式行为. ...
Bootstrap 按钮状态提示
按钮 Bootstrap按钮插件需要 bootstrap-button.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-button.js 文件. Bootstrap ...
Bootstrap 按钮菜单的尺寸
定义按钮菜单时,只需为按钮提供表示尺寸的类 .btn-large..btn-small 或 .btn-mini,就可以制作不同尺寸的按钮.如图 4‑14所示: 图4-14 Bootstrap按钮菜单的 ...
Bootstrap 按钮下拉菜单
按钮下拉菜单,就为按钮添加一个下拉菜单,当用户点击按钮时,再显示或隐藏下拉菜单.只需把按钮和下拉菜单包装在一个 .btn-group 中,并为按钮添加 .dropdown-toggle 类和 data ...
Bootstrap 按钮
基本按钮通过将button标签中的class设置为对应的类,可以将button设置为不同的css格式,首先设置类为btn,不设置情况下为默认的html按钮格式,设置后变为bootstrap的基本按钮 ...

Bootstrap 按钮的外观

Bootstrap 按钮的外观相关推荐

最新文章

热门文章