bootstrap表单样式

基本表单类样式列表

1.基础表单: 
<div class="form-group">
    <label for="username">username: </label>
    <input type="text" class="form-control" name=username" />
</div>

2.内联表单:
<div class="form-inline">
    ...
</div>

3.水平排列表单:（这种方式下建议使用栅格系统来控制他们的排列）
<div class="form-horizontal">
    <label for="username" class="col-lg-1">username</label>
    <div class="col-lg-3">
        <input type="text" class="form-control" name="username" />
    </div>
</div>

单选框和多选框样式

建议：每次定义单选框样式最好将每个选项都放在单独的label中

1,普通单选框
<div class="radio">
    <label>
        <input type="radio" name="sex" value="man" />男
    </label>
    <label
        <input type="radio" name="sex" value="woman" />女
    </label>
</div>

2.普通多选框
<div class="checkbox">
    <label>
        <input type="checkbox" name="favs" value="html" />html
    </label>
    <label>
        <input type="checkbox" name="favs" value="js" />js
    </label>
    <label>
        <input type="checkbox" name="favs" value="css" />css
    </label>
</div>

3.内联样式单选框
<label class="radio-inline">
    <input type="radio" name="sex" value="man" />男
</label>
<label class="radio-inline">
    <input type="radio" name="sex" value="woman" />女
</label

4.内联样式多选框（同内联单选框类似）

表单验证样式

1.颜色提示：（同form-group）

1.has-warning: 警告黄
2.has-error: 错误红
3.has-success：成功绿

2.图标提示

1.glyphicon glyphicon-ok: 成功图标提示
2.glyphicon glyphicon-remove: 错误图标提示
3.glyphicon glyphicon-warning-sign: 警告图标提示

还需要结合has-feedback + form-control-feedback来显示相应的图标样式及颜色

示例:
<div class="form-horizontal">
    <div class="form-group has-success has-feedback">
        <label for="username" class="control-label col-lg-1">username: </label>
        <div calss="col-lg-3">
            <input type="text" name="username" placeholder="your username: " />
            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            <!--也还可以添加些文字提示-->
            <!--<span>...</span>/ <span class="sr-only">不显示的提示</span>-->
        </div>
    </div>
</div>

创建输入框组

描述：将多个元素连接起来

input-group: 定义输入框组容器
input-group-addon：定义添加在输入框前面或者后面的元素

示例:
<div class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-lg-1" for="email">email: </label>
        <div class="input-group col-lg-5">
            <span class="input-group-addon">email</span>
            <input type="text" name="email" class="form-control" placeholder="your email" />
            <span class="input-group-addon">@qq.com</span>
        </div>
    </div>
</div>