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 ...
随机推荐
- XFire完整入门教程
网上关于XFire入门的教程不少,要么是讲得很简单,就像Hello World一样的程序,要么就是通过IDE集成的工具来开发的,这对于不同的人群有诸多不便,关于XFire的一些详细的信息就不再多讲,可 ...
- 扩展卡尔曼滤波（MRPT）
EKF relies on a linearisation of the evolution and observation functions which are good approximatio ...
- JQ完成表格单元格顺序的上移下调
如有指教及疑问,欢迎留言 HTML代码 <table class="exampletable"> <thead> <tr> <th> ...
- 安卓解析json，使用BaseAdapter添加至ListView中，中间存储用JavaBean来实现
这是一个小练习,要求解析一个提供的json文件.并将其中的id,title值获取,以ListView形式展示出来.(开发工具是android studio) 下面开始: 首先我想到的是先把json文件 ...
- 轻松解决U盘中病毒，文件变成.exe执行文件的问题
U盘中的文件都变成.exe可执行文件是怎么回事?告诉你,你的U盘中病毒了,那么如何清除呢?小编现在就告诉你几个简单方法,轻松就能搞定U盘中病毒问题. 方法1: (1)首先使用杀毒软件把U盘杀杀毒,除去 ...
- 读《编写可维护的JavaScript》第七章总结
第七章 事件处理 7.1 典型用法 作者首先给了个我们一个处理事件的方法.看起来也没啥俩样,不过后来给出的优化方法很值得学习: // 不好的写法 function handleClick(even ...
- 27.solr集群
搭建solr集群整个架构: 前提: (1)zookeeper集群 (2)最好做系统间拷贝免密码(频繁复制东西输密码太麻烦) (3)软件solr.*.zip zookerper.*.tar.gz i ...
- 命令行用sublime打开当前目录
执行 ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" subl 就可以在命令行用 ...
- 我的git学习
当遇到不想commit的,而status已经现实出来了,可以使用 git rm -r --cached "fine name or 文件夹" 出现 Git – fatal: U ...
- ueditor .net版本上传图片功能配置
1.官网下载 UEditor .Net最新版:官方网址:http://ueditor.baidu.com/website/download.html#ueditor UTF-8版 和GBK版选择疑 ...