Bootstrap笔记4—表单

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="">密&nbsp;码：</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">密&nbsp;码：</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>