首页 > 代码库 > Bootstrap 按钮
Bootstrap 按钮
摘要：这篇笔记主要是关于bootstrap提供的定义按钮的不同样式 。
1.按钮样式总结
以下样式可以用在<a>、<button>、<input>元素上。
因为：<a role="button" href="http://www.mamicode.com/#">、<input type="button">、<input type="submit">等表现出来的是按钮的形状
不过还是建议在<button>元素上使用按钮class，避免跨浏览器的不一致问题。
用法：<button class="btn btn-default">按钮</button>
样式示例：
<!-- 标准的按钮 --><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>
结果：
1.1 按钮大小
上表显示，.btn-lg、.btn-sm、 .btn-xs、.btn-md(正常大小)、.btn-block是用来调整按钮大小的类。
代码示例：
<div class="container"> <div> <button class="btn btn-danger btn-lg">btn-lg</button> <button class="btn btn-primary btn-md">btn-md</button> <button class="btn btn-info btn-sm">btn-sm</button> <button class="btn btn-success btn-xs">btn-xs</button> <button class="btn btn-warning btn-block">btn-block(与父元素同宽)</button> </div></div>
显示如下：
1.2 按钮状态
bootstrap提供了按钮激活、禁用等状态的类。
按钮处于激活状态（active）时，其外观会发生变化，呈现深色的背景、边框和阴影，<a href="http://www.mamicode.com/#" class="btn btn-primary active" role="button">。
按钮处于禁用状态（disabled）时，按钮颜色会变淡50%，并失去渐变，点击时不会发生任何变化，<button class="btn btn-primary active">；
这两种状态都能用于按钮元素<button>和锚元素<a>
注意！
与表单输入框等禁用状态不同，锚元素的禁止状态是由类决定的，不是属性。例如，<a href="http://www.mamicode.com/#" class="btn btn-primary disabled" role="button">。；
按钮元素的禁用状态是由disabled属性决定的。例如，。<button class="btn btn-primary" disabled="disabled">。
2.字体图标（glyphicons）
字体图标是在web项目中使用的图标字体，bootstrap捆绑了200多种字体格式的字形。
2.1 用法
代码：<span class="glyphicon glyphicon-search"></span>
字体图标经常和按钮元素搭配使用:
<button class="btn btn-primary"> <span class="glyphicon glyphicon-search"></span>搜索</button><button class="btn btn-primary"> <span class="glyphicon glyphicon-user"></span>用户</button><button class="btn btn-default"> <span class="glyphicon glyphicon-home"></span>首页</button><button class="btn btn-info"> <span class="glyphicon glyphicon-shopping-cart"></span>购物</button>显示如下：
2.2 定制字体图标
通过改变字体的尺寸、颜色和应用文本阴影来进行定制图标。
尺寸：
<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px"> <span class="glyphicon glyphicon-user"></span> User</button><button type="button" class="btn btn-primary btn-lg" style="font-size: 30px"> <span class="glyphicon glyphicon-user"></span> User</button>
颜色：
<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);"> <span class="glyphicon glyphicon-user"></span> User</button><button type="button" class="btn btn-primary btn-lg" style="color: black;"> <span class="glyphicon glyphicon-user"></span> User</button>
文本阴影：
<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;"> <span class="glyphicon glyphicon-user"></span> User</button><button type="button" class="btn btn-primary btn-lg" style="text-shadow: red 9px 6px 6px;"> <span class="glyphicon glyphicon-user"></span> User</button>
Bootstrap 按钮