Bootstrap-Button

全局CSS样式

1. 可作为按钮使用的标签或元素

为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式,示例如下：

<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">
<input class="btn btn-default" type="submit" value="Submit">

注意：

• 导航和导航条组件只支持 <button> 元素
• 如果 <a> 元素被作为按钮使用 ，并用于在当前页面触发某些功能，务必为其设置role="button"属性
• 尽可能使用<button> 元素来获得在各个浏览器上获得相匹配的绘制效果

2. 按钮颜色

通过6种预定义样式来控制按钮颜色，示例如下：

<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>

效果如下：

color.png

3. 按钮大小

使用.btn-lg、.btn-sm 或.btn-xs 就可以获得不同尺寸的按钮，示例如下：

 <p>
     <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
 </p>
 <p>
     <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
 </p>
 <p>
     <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
 </p>
 <p>
     <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
 </p>

效果如下：

尺寸.png

4. 块级元素

给按钮添加.btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素

<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>

效果如下：

block.png

5. 按钮状态

• 激活状态
  对于 <button>元素，是通过:active 状态实现的。对于<a> 元素，是通过.active类实现的

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<br>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>

效果如下：

active.png

• 禁用状态
  为 <button> 元素添加 disabled 属性，使其表现出禁用状态
  为基于 <a>元素创建的按钮添加 .disabled类

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

效果如下：

disabled.png

按钮组

1. 基本实例

通过按钮组容器把一组按钮放在同一行里

<div class="btn-group" role="group" >
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
</div>

效果如下：

btn-group.png

2.按钮工具栏

把一组 <div class="btn-group">组合进一个 <div class="btn-toolbar">中就可以做成更复杂的组件

<div class="btn-toolbar" role="toolbar">
     <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>
     <div class="btn-group">
       <button type="button" class="btn btn-default">按钮 4</button>
       <button type="button" class="btn btn-default">按钮 5</button>
       <button type="button" class="btn btn-default">按钮 6</button>
     </div>
</div>

效果如下：

btn-toolbar.png

3. 尺寸

<div class="btn-group btn-group-lg">
    <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>
    <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-default">按钮 4</button>
    <button type="button" class="btn btn-default">按钮 5</button>
    <button type="button" class="btn btn-default">按钮 6</button>
</div>
    <div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-default">按钮 7</button>
    <button type="button" class="btn btn-default">按钮 8</button>
    <button type="button" class="btn btn-default">按钮 9</button>
</div>

效果如下：

btn-group-*.png

4. 垂直排列

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <div class="btn-group-vertical">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下拉
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">下拉链接 1</a></li>
        <li><a href="#">下拉链接 2</a></li>
    </ul>
    </div>
</div>

效果如下：

btn-group-vertical.png