bootstrap-button

1.定义button

<a>, <button>, <input>均可以定义按钮

  <a class="btn btn-default" href="#" role="button">Link</a>
  <button class="btn btn-default" type="submit">Button</button>
  <input class="btn btn-default" type="button" value="Input">

2.button分类

<button type="button" class="btn btn-primary">原始按钮</button>
<button type="button" class="btn btn-success">成功按钮</button>
<button type="button" class="btn btn-default">默认按钮</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>

3.button大小

• btn-lg （大按钮）Large button
• btn-default （默认尺寸）Default button
• btn-sm （小按钮）Small button
• btn-xs （超小尺寸）Extra small button
• btn-block （块级元素）Block level button，可以将按钮拉伸至父元素100%的宽度，变为块级（block）元素

<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>

4.button状态

• 禁用状态
  表现颜色变淡，无法点击，为按钮添加 disabled="disabled" 实现

   <button type="button" class="btn btn-default">默认按钮</button>
   <button type="button" class="btn btn-default" disabled="disabled">禁用按钮</button>
   <br/><br/>
   <button type="button" class="btn btn-primary">原始按钮</button>
   <button type="button" class="btn btn-primary" disabled="disabled">禁用的原始按钮</button>

• 激活状态
  表现为 底色更深、边框夜色更深、向内投射阴影。通过 active 实现

<button type="button" class="btn btn-default ">默认按钮</button>
<button type="button" class="btn btn-default active">激活按钮</button>
<br/>
<button type="button" class="btn btn-primary ">原始按钮</button>
<button type="button" class="btn btn-primary active">激活的原始按钮</button>
```


![](https://img.haomeiwen.com/i3488005/443b0356ac41532b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

###5.按钮组
将一组按钮放在同一行里

```
<div class="btn-group">
    <button type="button" class="btn btn-default"> 1</button>
    <button type="button" class="btn btn-default"> 2</button>
    <button type="button" class="btn btn-default"> 3</button>
</div>
```

![](https://img.haomeiwen.com/i3488005/011cf3137141def8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  
> 参考：http://v3.bootcss.com/css/#buttons
http://www.runoob.com/bootstrap/bootstrap-buttons.html
http://v3.bootcss.com/components/#btn-groups