Bootstrap-Button

全局CSS样式

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

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

Link

Button

注意：

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

2. 按钮颜色

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

（默认样式）Default
（首选项）Primary
（成功）Success
（一般信息）Info
（警告）Warning
（危险）Danger

效果如下：

color.png

3. 按钮大小

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

 

     （大按钮）Large button
 
 

     （默认尺寸）Default button
 
 

     （小按钮）Small button
 
 

     （超小尺寸）Extra small button
 

效果如下：

尺寸.png

4. 块级元素

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

（块级元素）Block level button
（块级元素）Block level button

效果如下：

block.png

5. 按钮状态

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

Primary button


Primary link

效果如下：

active.png

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

Primary button
Primary link

效果如下：

disabled.png

按钮组

1. 基本实例

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

      Left
      Middle
      Right

效果如下：

btn-group.png

2.按钮工具栏

把一组

组合进一个

中就可以做成更复杂的组件

     

       按钮 1
       按钮 2
       按钮 3
     
     

       按钮 4
       按钮 5
       按钮 6
     

效果如下：

btn-toolbar.png

3. 尺寸

    按钮 1
    按钮 2
    按钮 3

    

    按钮 4
    按钮 5
    按钮 6

    

    按钮 7
    按钮 8
    按钮 9

效果如下：

btn-group-*.png

4. 垂直排列

    按钮 1
    按钮 2
    

    
        下拉
        
    
    

        
下拉链接 1
        
下拉链接 2
    
    

效果如下：

btn-group-vertical.png