描述
Bootstrap Button(按钮)JavaScript 插件允许您加强按钮的功能。您可以控制按钮的状态,也可以为组件创建按钮组,比如工具条。
什么是必需的
您必须引用 jquery.js 和 bootstrap-button.js - 这两个 JavaScript 文件。它们都位于 docs/assets/js 文件夹内。
如何使用它
您可以不编写任何 JavaScript 只通过标记使用该插件,也可以通过 JavaScript 启用按钮。
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
|
禁用按钮
|
首先看下不同颜色的按钮:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<html lang= "en" >
<head>
<!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码-->
<meta http-equiv= "content-type" content= "text/html;charset=utf-8" />
<meta http-equiv= "X-UA-Compatible" content= "IE=edge" >
<meta name= "Keywords" content= "关键词一,关键词二" >
<meta name= "Description" content= "网站描述内容" >
<meta name= "Author" content= "Yvette Lau" >
<meta name = "viewport" content = " width = device-width, initial-scale = 1 " >
<title>BootstrapDemo</title>
<!--css js 文件的引入-->
<link rel= "stylesheet" type= "text/css" href= "../bootstrap-3.3.5-dist/css/bootstrap.min.css" >
</head>
<body style= "padding: 20px;" >
<!-- 标准的按钮 -->
<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>
|
效果:
btn-default / btn-primary /btn-success/ btn-info/ btn-warning/ btn-danger/ btn-link给按钮加上了不同的样式。
按钮大小
鉴于head部分都是相同的,只列出Body的内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<body style= "padding: 20px;width:500px;" >
<!-- 标准的按钮 -->
<button type= "button" class= "btn btn-default" >默认按钮</button>
<button type= "button" class= "btn btn-lg btn-default" >大的默认按钮</button>
<br/><br/>
<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
<button type= "button" class= "btn btn-primary" >原始按钮</button>
<button type= "button" class= "btn btn-sm btn-primary" >小的原始按钮</button>
<br/><br/>
<!-- 表示一个成功的或积极的动作 -->
<button type= "button" class= "btn btn-success" >成功按钮</button>
<button type= "button" class= "btn btn-xs btn-success" >特别小的成功按钮</button>
<br/><br/>
<!-- 用于要弹出信息的按钮 -->
<button type= "button" class= "btn btn-info" >信息按钮</button><br/><br/>
<button type= "button" class= "btn btn-block btn-info" >块级信息按钮</button>
</body>
|
效果如下所示:
按钮状态
按钮分为active和disabled两种状态、
激活状态:按钮呈现出被按压的外观,即背景颜色变深、深色边框和阴影。
禁用状态:按钮颜色会变淡 50%,并失去渐变
看具体的例子:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<body style= "padding: 20px;width:500px;" >
<!-- 标准的按钮 -->
<button type= "button" class= "btn btn-default" >默认按钮</button>
<button type= "button" class= "btn btn-default active" >激活的默认按钮</button>
<br/><br/>
<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
<button type= "button" class= "btn btn-primary" >原始按钮</button>
<button type= "button" class= "btn btn-primary active" >激活的原始按钮</button>
<br/><br/>
<!-- 表示一个成功的或积极的动作 -->
<button type= "button" class= "btn btn-success" >成功按钮</button>
<button type= "button" class= "btn btn-success active" >激活的成功按钮</button>
<br/><br/>
<!-- 用于要弹出信息的按钮 -->
<button type= "button" class= "btn btn-info" >信息按钮</button>
<button type= "button" class= "btn btn-info active" >激活的信息按钮</button>
<br/><br/>
<button type= "button" class= "btn btn-default" >默认按钮</button>
<button type= "button" class= "btn btn-default disabled" >禁用的默认按钮</button>
<br/><br/>
<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
<button type= "button" class= "btn btn-primary" >原始按钮</button>
<button type= "button" class= "btn btn-primary disabled" >禁用的原始按钮</button>
<br/><br/>
<!-- 表示一个成功的或积极的动作 -->
<button type= "button" class= "btn btn-success" >成功按钮</button>
<button type= "button" class= "btn btn-success disabled" >禁用的成功按钮</button>
<br/><br/>
<!-- 用于要弹出信息的按钮 -->
<button type= "button" class= "btn btn-info" >信息按钮</button>
<button type= "button" class= "btn btn-info disabled" >禁用的信息按钮</button>
</body>
|
按钮标签
a,input都可以表现的像一个按钮,但是避免跨浏览器不一致,最好使用Button标签。
1
2
3
4
5
6
|
<body style= "padding: 20px;" >
<a class= "btn btn-default" href= "#" role= "button" >超链接按钮</a>
<button class= "btn btn-default btn-primary" type= "submit" >button按钮</button>
<input class= "btn btn-default btn-success" type= "button" value= "input按钮" >
<input class= "btn btn-default btn-info" type= "submit" value= "submit按钮" >
</body>
|
以上内容给大家介绍了Bootstrap按钮相关知识,希望大家喜欢。
版权声明:若无特殊注明,本文皆为( yueshuo )原创,转载请保留文章出处。