响应式前端框架Bootstrap系列（7）按钮

按钮是前端最常用到的组件，bs提供有关按钮的样式有分为独立按钮、按钮组和按钮插件三种。

独立按钮，可用于, , 或 元素上。

（1）颜色样式：

.btn-default：默认/标准按钮
.btn-primary：主要
.btn-success：成功
.btn-info：信息
.btn-warning：警告
.btn-danger：危险

演示代码：

默认按钮 原始按钮 成功按钮 信息按钮 警告按钮 危险按钮

效果图：

（2）大小样式：

.btn-lg：制作一个大按钮
.btn-sm：制作一个小按钮
.btn-xs：制作一个超小按钮

（3）显示样式：

.btn-block：块级按钮(拉伸至父元素100%的宽度)
.btn-link：让按钮看起来像个链接 (仍然保留按钮行为)，可用于标签
.active：按钮被点击
.disabled：禁用按钮

演示代码：

原始按钮（大）
默认按钮（大）
原始按钮
默认按钮
原始按钮（小）
默认按钮（小）
原始按钮（特别小）
默认按钮（特别小）



链接按钮
块级元素

效果图：

按钮组，指将多个按钮放在一起形成一个独立组件。

（1）按钮组样式：

.btn-group：该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。
.btn-toolbar：该 class 有助于把几组

结合到一个

中，一般获得更复杂的组件。

（2）大小样式：

.btn-group-lg：大按钮组

btn-group-sm：小按钮组

btn-group-xs：特小按钮组

（3）布局样式（默认水平布局）：

.btn-group-vertical，垂直按钮组

演示代码：

水平按钮组

	按钮1
	按钮2
	按钮3






垂直按钮组

	按钮1
	按钮2
	按钮3





大小不同按钮组

	按钮1
	按钮2
	按钮3


	按钮1
	按钮2
	按钮3


	按钮1
	按钮2
	按钮3

  效果图：

按钮插件，是指由bs提供的具有特殊效果的按钮组件，实际上用处不多，本篇介绍按钮加载和按钮开关两种。按钮加载是指当点击按钮后触发.button('loading')方法，按钮处于某种状态中，如加载。当触发.button('complete')后表示状态完成。

.button('toggle')，切换快关状态。赋予按钮被激活的外观。您可以使用 data-toggle 属性启用按钮的自动切换。$().button('toggle')
.button('loading')，当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 属性的值。
.button('reset')，重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。

演示代码：

	
		
		
		
		
		
		
		
	

	
		

			
加载状态
			点击加载
			

			

			
单个开关
			开关按钮
			

			

			
自定义
			
开关按钮
			

			

			
多选开关
			

				
        			 选项 1
    			
				
        			 选项 2
    			
				
        			 选项 3
    			
			
			

			

			
单选开关
			

				
        			 选项 1
    			
				
        			 选项 2
    			
				
        			 选项 3
    			
			
		
	
	

效果图：