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>