6. bootstrap 表单

 表单样式

1.普通表单

单独的表单控件会被自动赋予一些全局样式。

所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group中可以获得最好的排列。

2.内联表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

3.水平表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row了。

		<div class="container">
			<h1>普通表单</h1>
			<form action="#" method="post">
				<fieldset id="">
					<legend>用户登录</legend>
					<!--
						form-group : 底下15px的边距
						form-control : 自适应大小的输入框
						btn btn-default : 默认按钮样式
						checkbox : 整理为默认的样式,防止布局混乱
					-->
					<div class="form-group">
						<label>用户名</label>
						<input class="form-control" type="text" name="name" placeholder="输入用户名" />
					</div>
					<div class="form-group">
						<label>密码</label>
						<input class="form-control" type="password" name="name" placeholder="输入用户名" />
					</div>
					<div class="checkbox">
						<label><input type="checkbox" />记住密码</label>
					</div>
					<button class="btn btn-default" type="submit">登陆</button>
					
				</fieldset>				
			</form>
			<h1>内联表单</h1>
			<!--
				form-inline : 横向排列	
			-->
			<form class="form-inline" action="#" method="post">
				<fieldset id="">
					<legend>用户登录</legend>
					<div class="form-group">
						<label>用户名</label>
						<input class="form-control" type="text" name="name" placeholder="输入用户名" />
					</div>
					<div class="form-group">
						<label>密码</label>
						<input class="form-control" type="password" name="name" placeholder="输入用户名" />
					</div>
					<div class="checkbox">
						<label><input type="checkbox" />记住密码</label>
					</div>
					<button class="btn btn-default" type="submit">登陆</button>
				</fieldset>				
			</form>
			<h1>水平表单</h1>
			<!--
				form-inline : 横向排列	
			-->
			<form class="form-horizontal" action="#" method="post">
				<fieldset id="">
					<legend>用户登录</legend>
					<div class="form-group">
						<label class="col-xs-2">用户名</label>
						<div class="col-xs-4">
							<input class="form-control" type="text" name="name" placeholder="输入用户名" />
						</div>
						</div>
					<div class="form-group">
						<label class="col-xs-2">密码</label>
						<div class="col-xs-4">
							<input class="form-control" type="text" name="name" placeholder="输入用户名" />
						</div></div>
					<div class="checkbox">
						<label><input type="checkbox" />记住密码</label>
					</div>
					<button class="btn btn-default" type="submit">登陆</button>
				</fieldset>				
			</form>
		</div>

表单控件

并没有给特别的样式只是优化了细节的样式而已

            <h1>普通表单</h1>
			<form action="#" method="post">
				<fieldset id="">
					<legend>用户登录</legend>
					<div class="form-group">
						<label>用户名</label>
						<input class="form-control" type="text" name="name" placeholder="输入用户名" />
					</div>
					<div class="form-group">
						<label>密码</label>
						<input class="form-control" type="password" name="name" placeholder="输入用户名" />
					</div>
					<div class="radio">
						<label><input type="radio" name="sex"/>男</label>
						<label><input type="radio" name="sex"/>女</label>
					</div>
					<div class="checkbox">
						<label><input type="checkbox" />记住密码</label>
						<label><input type="checkbox" />记住密码</label>
						<label><input type="checkbox" />记住密码</label>
						<label><input type="checkbox" />记住密码</label>
					</div>
					<div class="form-group">
						<!-- 
							多选属性
						 -->
						 <label>多选菜单</label>
						<select name="" class="form-control" multiple="">
							<option value="">123</option>
							<option value="">123</option>
							<option value="">123</option>
							<option value="">123</option>
						</select>
					</div>
					<button class="btn btn-default" type="submit">登陆</button>
					
				</fieldset>				
			</form>