标签：
摘要：这篇笔记主要是关于bootstrap提供的定义按钮的不同样式 。
以下样式可以用在<a>、<button>、<input>元素上。
因为：<a role="button" href="#">、<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>
结果：
上表显示，.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>
显示如下：
bootstrap提供了按钮激活、禁用等状态的类。
按钮处于激活状态（active）时，其外观会发生变化，呈现深色的背景、边框和阴影，<a href="#" class="btn btn-primary active" role="button">。
按钮处于禁用状态（disabled）时，按钮颜色会变淡50%，并失去渐变，点击时不会发生任何变化，<button class="btn btn-primary active">；
这两种状态都能用于按钮元素<button>和锚元素<a>
注意！
与表单输入框等禁用状态不同，锚元素的禁止状态是由类决定的，不是属性。例如，<a href="#" class="btn btn-primary disabled" role="button">。；
按钮元素的禁用状态是由disabled属性决定的。例如，。<button class="btn btn-primary" disabled="disabled">。
字体图标是在web项目中使用的图标字体，bootstrap捆绑了200多种字体格式的字形。
代码：<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>
显示如下：
通过改变字体的尺寸、颜色和应用文本阴影来进行定制图标。
<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>
标签：
原文地址：http://www.cnblogs.com/buchongming/p/5809827.html
