Bootstrap 按钮
Posted 不重名
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap 按钮相关的知识，希望对你有一定的参考价值。
摘要：这篇笔记主要是关于bootstrap提供的定义按钮的不同样式 。
1.按钮样式总结
以下样式可以用在<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>
结果：
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="#" 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">。
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>
3.按钮组
3.1 基本的按钮组（.btn-group）
把带有类.btn 的按钮放在 .btn-group的容器中，形成按钮组。实例：
<div class="btn-group"> <button type="button" class="btn btn-default">按钮 1</button> <button type="button" class="btn btn-success">按钮 2</button> <button type="button" class="btn btn-primary">按钮 3</button> <button type="button" class="btn btn-default">按钮 4</button> </div>
显示：
3.2 按钮工具(.btn-toolbar)
把几组带有类 .btn-group 的组件放在带有 .btn-toolbar 的大容器中，形成更加复杂的组件。示例：
1 <div class="btn-toolbar" role="toolbar"> 2 <div class="btn-group"> 3 <button type="button" class="btn btn-default">按钮 1</button> 4 <button type="button" class="btn btn-default">按钮 2</button> 5 <button type="button" class="btn btn-default">按钮 3</button> 6 </div> 7 <div class="btn-group"> 8 <button type="button" class="btn btn-default">按钮 4</button> 9 <button type="button" class="btn btn-default">按钮 5</button> 10 <button type="button" class="btn btn-default">按钮 6</button> 11 </div> 12 <div class="btn-group"> 13 <button type="button" class="btn btn-default">按钮 7</button> 14 <button type="button" class="btn btn-default">按钮 8</button> 15 <button type="button" class="btn btn-default">按钮 9</button> 16 </div> 17 </div>
显示：
3.3 按钮大小（.btn-group-lg、.btn-group-md、.btn-group-sm、.btn-group-xs）
在<div class=".btn-group">中添加类 .btn-group-* 来改变整组按钮的大小。 如<dic class=".btn-group btn-group-lg">。
在以上按钮工具中改变按钮大小。例如，在第2行、第7行、第12行分别添加类 .btn-group-lg、.btn-group-sm、btn-group-xs。结果如下：
3.4 嵌套
在一个 .btn-groug 组件中嵌套另一个 .btn-group 组件，经常与下拉菜单一块使用。代码示例：
1 <div class="btn-group"> 2 <button type="button" class="btn btn-default">按钮 1</button> 3 <button type="button" class="btn btn-default">按钮 2</button> 4 <div class="btn-group"> 5 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 6 按钮3 <span class="caret"></span> 7 </button> 8 <ul class="dropdown-menu"> 9 <li><a href="#">下拉链接 1</a></li> 10 <li><a href="#">下拉链接 2</a></li> 11 </ul> 12 </div> 13 </div>
显示:
3.5 按钮组垂直（.btn-group-vertical）
把上面的程序的第1行和第4行中的<div class="btn-group">替换成<div class="btn-group-vertical">即可。结果显示如下：
4 按钮下拉菜单
4.1 基本的按钮下拉菜单
把按钮与下拉菜单结合使用，只需要在一个.btn-group中放置按钮和下拉菜单即可。代码示例如3.4中的嵌套代码。
4.2 分割的按钮下拉菜单
形如：
。其实是两个按钮组成，左边的按钮可以带有链接，也可以不带；右边的按钮与下拉菜单相结合，进而组成分割的按钮下拉菜单。
代码示例：
1 <div class="btn-group"> 2 <button class="btn btn-primary">按钮</button> 3 <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 4 <span class="caret"></span> 5 <span class="sr-only">下拉菜单触发器</span> 6 </button> 7 <ul class="dropdown-menu" role="menu"> 8 <li><a href="#">功能1</a></li> 9 <li><a href="#">功能2</a></li> 10 <li><a href="#">功能3</a></li> 11 <li class="divider"></li> 12 <li><a href="#">分离的链接</a></li> 13 </ul> 14 </div>
形如：
4.3 按钮下拉菜单的大小（.btn-lg、.btn-sm、.btn-xs）
向.btn-group中的<button>元素添加类 .btn-lg、.btn-sm、.btn-xs，即可改变 按钮下拉菜单的大小。形如：
4.4 按钮上拉菜单(dropup)向父容器 .btn-group 添加类 .dropup即可。代码示例;
1 <div class="btn-group dropup"> 2 <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 3 按钮1<span class="caret"></span> 4 </button> 5 <ul class="dropdown-menu" role="menu"> 6 <li><a href="#">功能1</a></li> 7 <li><a href="#">功能2</a></li> 8 <li><a href="#">功能3</a></li> 9 <li class="divider"></li> 10 <li><a href="#">分离的链接</a></li> 11 </ul> 12 </div>
显示如下：
以上是关于Bootstrap 按钮的主要内容，如果未能解决你的问题，请参考以下文章