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

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

<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 浏览器上不能完全和其他按钮保持一致的高度。

2.预定义样式

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

<!-- 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>

3.尺寸

需要让按钮具有不同尺寸吗?使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

<p>
<button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>
<button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">(默认尺寸)Default button</button>
<button type="button" class="btn btn-default">(默认尺寸)Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button>
<button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>
<button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
</p>

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。

<button type="button" class="btn btn-primary btn-lg btn-block">(块级元素)Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">(块级元素)Block level button</button>

4.激活状态

当按钮处于激活状态时,其表现为被按压下去(底色更深、边框夜色更深、向内投射阴影)。对于 <button> 元素,是通过 :active 状态实现的。对于 <a> 元素,是通过 .active 类实现的。然而,你还可以将 .active 应用到 <button> 上(包含 aria-pressed="true" 属性)),并通过编程的方式使其处于激活状态。

button 元素
由于 :active 是伪状态,因此无需额外添加,但是在需要让其表现出同样外观的时候可以添加 .active 类。

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

链接(<a>)元素
可以为基于 <a> 元素创建的按钮添加 .active 类。

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

5.禁用状态

通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。

button 元素
<button> 元素添加 disabled 属性,使其表现出禁用状态。

<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>

跨浏览器兼容性
如果为 <button> 元素添加 disabled 属性,Internet Explorer 9 及更低版本的浏览器将会把按钮中的文本绘制为灰色,并带有恶心的阴影,目前我们还没有解决办法。

链接(<a>)元素
为基于 <a> 元素创建的按钮添加 .disabled 类。

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

我们把 .disabled 作为工具类使用,就像 .active 类一样,因此不需要增加前缀。

链接的原始功能不受影响
上面提到的类只是通过设置 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入门七:按钮的更多相关文章

  1. Bootstrap <基础七>按钮

    任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a>, <butto ...

  2. Bootstrap<基础十三> 按钮组

    按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.你可以通过Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为. ...

  3. Bootstrap入门(十)组件4:按钮组与下拉菜单结合

    Bootstrap入门(十)组件4:按钮组与下拉菜单结合   先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) < ...

  4. Bootstrap入门(九)组件3:按钮组

    Bootstrap入门(九)组件3:按钮组   先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link h ...

  5. Bootstrap入门(七)组件1:字体图标

    Bootstrap入门(七)组件1:字体图标   包括200个来自 Glyphicon Halflings 的字体图标,允许 Bootstrap 免费使用. 部分可用图标截图: 所有图标都需要一个基类 ...

  6. Bootstrap入门(六)按钮和图片

    Bootstrap入门(六)按钮和图片   先引入本地的CSS文件 <link href="css/bootstrap.min.css" rel="styleshe ...

  7. BootStrap入门教程 (一)

    BootStrap入门教程 (一)   2011年,twitter的"一小撮"工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端 ...

  8. bootstrap 入门

    bootstrap 入门 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&q ...

  9. Bootstrap入门(三十)JS插件7:警告框

    Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...

随机推荐

  1. bzoj千题计划154:bzoj3343: 教主的魔法

    http://www.lydsy.com/JudgeOnline/problem.php?id=3343 high记录原始身高 HIGH记录每块排序之后的身高 不满一块的直接对high操作,重排之后再 ...

  2. HBase基本概念

    HBase是什么 HBase构建在 HDFS 之上的分布式列式键值存储系统.HBase内部管理的文件全部存储在HDFS中. HBase VS HDFS HDFS适合批处理场景 不支持数据随机查找 不适 ...

  3. JS设计模式——7.工厂模式(示例-XHR)

    XHR工厂 基本实现 var AjaxHandler = new Interface('AjaxHandler', ['request', 'createXHR']); var SimpleHandl ...

  4. Dream------scala--Tuple、Array、Map与文件操作

    1.Tuple(元组) 一般使用中,假设一个函数返回多个值,我们可以使用tuple接受这个(val (x,y) = myfunction) package com.wls.scala.hello /* ...

  5. 85.YCbCr与YUV的区别

    yuv色彩模型来源于rgb模型,该模型的特点是将亮度和色度分离开,从而适合于图像处理领域. YCbCr模型来源于yuv模型,应用于数字视频,ITU-R BT.601 recommendation 通过 ...

  6. Docker基础速成(一)

    Docker基础速成(一) 给亲爱的写的docker基础速成,按照步骤操作,实践出真知,希望有提纲挈领之功效 1.docker简介 Docker 轻量级容器,如图,类似于一个个集装箱,把复杂或者零散的 ...

  7. MySQL5.7之多源复制&Nginx中间件(下)【转】

    有生之年系列----MySQL5.7之多源复制&Nginx中间件(下)-wangwenan6-ITPUB博客http://blog.itpub.net/29510932/viewspace-1 ...

  8. vue总结 06组件

    组件基础 基本示例 这里有一个 Vue 组件的示例: // 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: func ...

  9. springboot配置fastjson后端往前端传输格式化

    import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.Spri ...

  10. 栈应用之 背包问题(Python 版)

    栈应用之 背包问题 背包问题描述:一个背包里可以放入重量为weight的物品,现有n件物品的集合s,其中物品的重量为别为w0,w1,...,wn-1.问题是能否从中选出若干件物品,其重量之和正好等于w ...