在Bootstrap中，主要的表单结构有三种。一种是默认的垂直的表单。第二种是内联表单（只需要添加.form-inline属性就好），这两种表单都是很少使用的。最主要的使用的就是水平表单。

<form class="form-horizontal">
	<div class="form-group form-group-sm">
		<label for="firstName" class="control-label col-md-2">姓氏</label>
			<div class="col-md-10">
				<input type="text" class="form-control" id="firstName" placeholder="请输入姓氏"/>
			</div>					
		</div>
	<div class="form-group form-group-lg">
		<label for="lasttName" class="control-label col-md-2">名字</label>
			<div class="col-md-10">
				<input type="text" class="form-control" id="lasttName" placeholder="请输入名字"/>
			</div>					
	</div>
		<div class="form-group">
			<div class="col-md-10 col-md-offset-2">
				<div class="checkbox">
					<label >
						<input type="checkbox" />记住我的名字
					</label>
				</div>
			</div>
		</div>
                <div class="form-group">
    	                <div class="col-md-8 col-md-offset-2">
				<button type="submit" class="btn btn-danger btn-lg">登录</button>
			</div>
	        </div>
			</form>

这就是一个常见的水平表单的结构和页面展示的效果。

单选和多选框以及控件尺寸

<!--单选和多选框（水平布局）-->
<label class="checkbox-inline"><input type="checkbox" />爱好：打球</label>
<label class="checkbox-inline"><input type="checkbox" />爱好：听歌</label>
<label class="radio-inline"><input type="radio" name="sex" value="options1" checked/>性别：男</label>
<label class="radio-inline"><input type="radio" name="sex" value="options2" />性别：女</label>
			
<!--控件尺寸-->
<input type="button" class="input-lg" value="我最大"/ >
<input type="button" value="我是默认的大小"/>
<input type="button" class="input-sm" value="我比较小"/>

这就是单选和多选框的基本结构以及它的控件大小的设置，垂直布局的设置和这个类似，去掉后面的inline后缀就好了。

输入框组

<!--表单元素-输入框组-->
<div class="input-group">
	<input type="text" />
	<input type="button" value="点击搜索"/>
</div>

这个结构也比较简单，添加.input-group的类名在输入框组的父元素标签上就好。

按钮

用.btn表示按钮样式，用于<a>,<input>,<button>上都可以，考虑到兼容性问题，推荐应用到<button>上，

按钮有七种的样式，.btn-default表示默认样式，其他的六种都是不同的情景色的区分。另外按钮还有五种尺寸

<!--表单元素-按钮-->
<!--按钮的情景色-->
<button class="btn btn-success">登录</button>
<button class="btn btn-primary">登录</button>
<button class="btn btn-default">登录</button>
<button class="btn btn-danger">登录</button>
<button class="btn btn-warning">登录</button>
<button class="btn btn-info">登录</button>
<button class="btn btn-link">登录</button>
			
<!--按钮的尺寸-->
<button class="btn btn-success btn-lg">登录</button>
<button class="btn btn-success btn-sm">登录</button>
<button class="btn btn-success btn-xs">登录</button>
<button class="btn btn-success btn-default">登录</button>
<button class="btn btn-success btn-block">登录</button>

除了普通的按钮之外，Bootstrap还提供了一些功能性的按钮，下面给大家介绍一个实用的加载中的按钮

<!--加载状态-->
<button class="btn btn-info" data-loading-text="Loading..." type="button" id="btnLoad">登录</button>
<script type="text/javascript">
	$(function(){
		$("#btnLoad").click(function(){
			var $this=$(this);
			$this.button("loading");
			setTimeout(function(){
			$this.button('reset');
			},1000)
		  })
	})
</script>

这个功能性按钮需要配合JS事件实现，在按钮未被按下时时正常的状态，在按钮按下后，显示如下的状态

此时按钮不能再次点击，在一秒钟之后按钮重置为之前的状态。

其实Bootstrap还有复选框组合按钮组，结构和之前的输入框组类似，这里就不再赘述了。

好了，关于表单的部分已经讲的差不多了，下一篇我会和大家继续讲解Bootstrap的常用的菜单组件。