1.默认表单样式

class="form-control"是宽度100%占满整个容器 class="form-control"是两个表单之间相距15px; <div class="col-md-4"> <form action="#" method="post"> <fieldset> <legend>用户登录</legend> <div class="form-group"> <label for="">用户名：</label> <input type="text" class="form-control" name="name" placeholder="请输入用户名"> </div> <div class="form-group"> <label for="">密 码：</label> <input type="password" class="form-control" name="password" placeholder="请输入密码"> </div> <div class="checkbox"> <label><input type="checkbox" />记住密码</label> </div> <button type="submit" class="btn btn-default">登录</button> </fieldset> </form> </div>

2.表单一行显示

直接在表单加类class="form-inline"，如下：

<form action="#" method="post" class="form-inline">...</form>

3.表单不显示前面文字

在label里添加类class="sr-only"如下：

<div class="form-group"> <label for="" class="sr-only">用户名：</label> <input type="text" class="form-control" name="name" placeholder="请输入用户名"> </div> <div class="form-group"> <label for="" class="sr-only">密 码：</label> <input type="password" class="form-control" name="password" placeholder="请输入密码"> </div>

4.单选框和多选框

4.1垂直显示

checked是默认选中。

<form action="#" method="post"> <div class="checkbox"> <label><input type="checkbox" checked>苹果</label> </div> <div class="checkbox"> <label><input type="checkbox">香蕉</label> </div> <div class="checkbox"> <label><input type="checkbox">橙子</label> </div> <div class="radio"> <label><input type="radio" name="sex" value="M">男</label> </div> </form>

4.2一行显示

给label添加类比如多选框添加class="checkbox-inline"，单选框添加class="radio-inline"如下：

<div class="checkbox"> <label class="checkbox-inline"><input type="checkbox" checked>苹果</label> <label class="checkbox-inline"><input type="checkbox">香蕉</label> <label class="checkbox-inline"><input type="checkbox">橙子</label> </div>

5.状态

5.1页面加载完后输入框自动获得焦点

给input标签添加autofocus

<input type="text" class="form-control" autofocus name="name" placeholder="请输入用户名" >

5.2添加小图标

要添加两处：1.表单组要添加类has-feedback如下面第一行。2.sapn添加图标样式和form-control-feedback如下面的span标签。

<div class="form-group has-feedback"> <label for="" class="sr-only">用户名：</label> <input type="text" class="form-control" name="name" placeholder="请输入用户名"> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> </div>

5.3输入框前加图标

<div class="col-sm-3 col-sm-offset-2"> <div class="input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </span> <input type="text" class="form-control"> </div> </div>

5.4输入框后面加图标

<div class="col-sm-3 col-sm-offset-2"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon"> <span class="glyphicon glyphicon-search"></span> </span> </div> </div>