版权声明：只是总结,如有雷同纯属巧合 \ 几乎所有的常态加班都是老板无能 https://blog.csdn.net/luke199257/article/details/81273344
表单样式
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>