Bootstrap <基础七>按钮
任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：
以下样式可用于<a>, <button>, 或 <input> 元素上：
| 类 | 描述 | |
|---|---|---|
| .btn | 为按钮添加基本样式 | |
| .btn-default | 默认/标准按钮 | |
| .btn-primary | 原始按钮样式（未被操作） | |
| .btn-success | 表示成功的动作 | |
| .btn-info | 该样式可用于要弹出信息的按钮 | |
| .btn-warning | 表示需要谨慎操作的按钮 | |
| .btn-danger | 表示一个危险动作的按钮操作 | |
| .btn-link | 让按钮看起来像个链接 (仍然保留按钮行为) | |
| .btn-lg | 制作一个大按钮 | |
| .btn-sm | 制作一个小按钮 | |
| .btn-xs | 制作一个超小按钮 | |
| .btn-block | 块级按钮(拉伸至父元素100%的宽度) | |
| .active | 按钮被点击 | |
| .disabled | 禁用按钮 |
下面的实例演示了上面所有的按钮 class：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 按钮选项</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body> <!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button> <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button> <!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button> <!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button> <!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button> <!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button> <!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button> </body>
</html>
结果如下所示：
按钮大小
下表列出了获得各种大小按钮的 class：
| Class | 描述 |
|---|---|
| .btn-lg | 这会让按钮看起来比较大。 |
| .btn-sm | 这会让按钮看起来比较小。 |
| .btn-xs | 这会让按钮看起来特别小。 |
| .btn-block | 这会创建块级的按钮，会横跨父元素的全部宽度。 |
下面的实例演示了上面所有的按钮 class：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 按钮大小</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body> <p>
<button type="button" class="btn btn-primary btn-lg">
大的原始按钮
</button>
<button type="button" class="btn btn-default btn-lg">
大的按钮
</button>
</p>
<p>
<button type="button" class="btn btn-primary">
默认大小的原始按钮
</button>
<button type="button" class="btn btn-default">
默认大小的按钮
</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">
小的原始按钮
</button>
<button type="button" class="btn btn-default btn-sm">
小的按钮
</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">
特别小的原始按钮
</button>
<button type="button" class="btn btn-default btn-xs">
特别小的按钮
</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block">
块级的原始按钮
</button>
<button type="button" class="btn btn-default btn-lg btn-block">
块级的按钮
</button>
</p> </body>
</html>
结果如下所示：
按钮状态
Bootstrap 提供了激活、禁用等按钮状态的 class，下面将进行详细讲解。
激活状态
按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。
下表列出了让按钮元素和锚元素呈激活状态的 class：
| 元素 | Class |
|---|---|
| 按钮元素 | 添加 .active class 来显示它是激活的。 |
| 锚元素 | 添加 .active class 到 <a> 按钮来显示它是激活的。 |
下面的实例演示了这点：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 按钮激活状态</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body> <p>
<button type="button" class="btn btn-default btn-lg ">
默认按钮
</button>
<button type="button" class="btn btn-default btn-lg active">
激活按钮
</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg ">
原始按钮
</button>
<button type="button" class="btn btn-primary btn-lg active">
激活的原始按钮
</button>
</p> </body>
</html>
结果如下所示：
禁用状态
当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。
下表列出了让按钮元素和锚元素呈禁用状态的 class：
| 元素 | Class |
|---|---|
| 按钮元素 | 添加 disabled 属性 到 <button> 按钮。 |
| 锚元素 | 添加 disabled class 到 <a> 按钮。 注意：该 class 只会改变 <a> 的外观，不会改变它的功能。在这里，您需要使用自定义的 JavaScript 来禁用链接。 |
下面的实例演示了这点：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 按钮禁用状态</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body> <p>
<button type="button" class="btn btn-default btn-lg">
默认按钮
</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">
禁用按钮
</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg ">
原始按钮
</button>
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">
禁用的原始按钮
</button>
</p>
<p>
<a href="#" class="btn btn-default btn-lg" role="button">
链接
</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">
禁用链接
</a>
</p>
<p>
<a href="#" class="btn btn-primary btn-lg" role="button">
原始链接
</a>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">
禁用的原始链接
</a>
</p> </body>
</html>
结果如下所示：
按钮标签
您可以在 <a>、<button> 或 <input> 元素上使用按钮 class。但是建议您在 <button> 元素上使用按钮 class，避免跨浏览器的不一致性问题。
下面的实例演示了这点：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 按钮标签</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body> <a class="btn btn-default" href="#" role="button">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="输入">
<input class="btn btn-default" type="submit" value="提交"> </body>
</html>
结果如下所示：
Bootstrap <基础七>按钮的更多相关文章
- Bootstrap<基础十三> 按钮组
按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.你可以通过Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为. ...
- Bootstrap<基础十四> 按钮下拉菜单
使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...
- Bootstrap <基础三十二>模态框（Modal）插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
- Bootstrap <基础三十一>插件概览
在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...
- Bootstrap <基础三十>Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...
- Bootstrap <基础二十九>面板（Panels）
Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...
- Bootstrap <基础二十八>列表组
列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...
- Bootstrap<基础二十七> 多媒体对象（Media Object）
Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...
- Bootstrap <基础二十六>进度条
Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...
随机推荐
- NiosII常用函数整理
NiosII常用函数整理 IO操作函数函数原型:IORD(BASE, REGNUM) 输入参数:BASE为寄存器的基地址,REGNUM为寄存器的偏移量函数说明:从基地址为BASE的设备中读取寄存器中偏 ...
- marquee 标签 文字滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- miniprofiler的对数据库的监测使用。以nancy，petapoco为例
miniprofiler的使用 miniprofiler的详细介绍请看这里http://miniprofiler.com/.(可以对数据库和页面等监控如 ado ef mvc mongodb) 本文以 ...
- kali4.0 安装32位库
一.前情提要: OS:Kali4.0 64bit 二.安装32位库: 错误方法:sudo apt-get install lib6-i386 正确方法如下: 1.先以root用户身份登陆: su ro ...
- NSJSONSerialization(json序列化)
//通过调用isValidJSONObject来判断Foundation对象是否可以转换为JSON数据 NSJSONSerialization isValidJSONObject:obj 我们能利用N ...
- Java一个汉字占几个字节（详解与原理）
1.先说重点: 不同的编码格式占字节数是不同的,UTF-8编码下一个中文所占字节也是不确定的,可能是2个.3个.4个字节: 2.以下是源码: @Test public void test1() thr ...
- Ubuntu中配置Thunderbird登录qq邮箱
1.打开thunderbird 2.开启QQ邮箱pop功能 登录网页版QQ邮箱(email.qq.com) 设置---->>账户---->> 3.配置thunderbird 注 ...
- java简单计算器
写的一个小计算器,留着以后看吧. import java.awt.BorderLayout; import java.awt.Button; import java.awt.Color; import ...
- jquery.trim() vs JS.trim()
如果你在IE8浏览器下开发网站,其实这是个假命题,因为原生的javascript 并不支持 .trim()方法,如果你写了类似document.getElementByID().trim();的代码, ...
- ${param.xxx}获取url中的参数
在项目中看到了一个很奇怪的EL表达式...${param.catid}...一直找不到param在哪里定义的...(主要是水平太屎...) 然后从网上查了一下才知道是啥... EL表达式${param ...