表单

表单

　　基础表单

　　对于表单中的input、textarea、select，一般我都会加上类”form-control”,它设置元素的默认宽度为100%（并不是绝对，比如下述的内联表单）。并且每个元素（包括label和待输入元素）都会加上”form-group”。它的样式只有一个。margin-bottom:15px。
　　

<form action="">    <div class="form-group">        <label for="">用户名：</label>        <input type="text" class="form-control"/>    </div>    <div class="form-group">        <label for="">密码：</label>        <input type="password" class="form-control"/>    </div></form>

　　内联表单

　　通过给最外层元素（form-group的父元素）加上”form-inline”。表示所有表单元素都在一行显示（充足的宽度的情况下）。并且”.form-inline .form-group”展示为内联块元素（inline-block）。并且”.form-inline .form-control”的宽度是auto。这样可以保证在一行展示。
　　

<form action="" class="form-inline">    <div class="form-group">        <label for="">用户名：</label>        <input type="text" class="form-control"/>    </div>    <div class="form-group">        <label for="">密码：</label>        <input type="password" class="form-control"/>    </div></form>

　　水平表单

　　不同于普通表单和内联表单。如果要将label和input表单元素显示在一行，则需要使用”form-horizontal”。该类联合”form-group”使用，就相当于网格系统中的”row”。所以它的子类有”col-md-*”，而label的 “control-label”—-“.form-horizontal .control-label”，有文本右对齐的效果。如果不加这个，label和input的会显得不对齐。
　　

<form action="" class="form-horizontal">    <div class="form-group">        <label for="" class="control-label col-md-1">用户名：</label>        <div class="col-md-3">            <input type="text" class="form-control"/>        </div>    </div>    <div class="form-group form-group-sm">        <label for="" class="control-label col-md-1">密码：</label>        <div class="col-md-3">            <input type="password" class="form-control input-sm"/>        </div>    </div></form>

　　表单大小

　　控制input大小的是”input-sm”，”input-lg”，它们使input输入框比正常看起来更小或者更大。与此对应的是label中文本的大小。需要在父级”form-group”同时加上”form-group-sm”，”form-group-lg”。如上面一个demo的密码输入框。

输入框

　　在HTML5中，输入框（input）标签中的type支持了更多的类型。有text、password、datatime、datatime-local、date、month、time、week、number、email、url、search、tel和color。标签<input>上只有赋值了特定的type才能显示正确的样式。有些元素只有在手机上才能显示其效果。

下拉框select

　　与输入框类似。只是将input改成了select，同时加上了”form-control”类。
　　

<form action="" class="form-horizontal">    <div class="form-group">        <label for="" class="control-label col-md-2 col-md-pull-1">请选择：</label>        <div class="col-md-3 col-md-pull-1">            <select name="" id="" class="form-control">                <option value="">HTML</option>                <option value="">CSS</option>                <option value="">Javascript</option>                <option value="">JAVA</option>                <option value="">PHP</option>                <option value="">Nodejs</option>            </select>        </div>    </div></form>

　　col-md-pull-*是左偏移。

文本域

　　和上面类似。
　　

<form action="" class="form-horizontal">    <div class="form-group">        <label for="" class="control-label col-md-2 col-md-pull-1">textarea：</label>        <div class="col-md-3 col-md-pull-1">            <textarea name="" id="" rows="3" class="form-control">                hello            </textarea>        </div>    </div></form>

多选框和单选框

　　为了使radio和checkbox元素显示在一行，并且和label对齐。bootstrap提供了两种选择。其一：
　　

<div class="form-group">    <label for="" class="radio">        <input type="radio" name="sex"/>男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        <input type="radio" name="sex"/>女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        <input type="radio" name="sex"/>保密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    </label>    <label for="" class="checkbox">        <input type="checkbox"/>HTML&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        <input type="checkbox"/>CSS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        <input type="checkbox"/>JavaScript&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    </label></div>

　　label本身是inline-block的。但是.radio，.checkbox本身却是block的。
　　
　　所以用一个label包裹多个单选框或复选框，这样会显得很不专业（haha）。还有，很多的 也是很不美观的。So，第二种写法来了。
　　

<div class="form-group">    <label for="" class="radio-inline">        <input type="radio" name="sex"/>男    </label>    <label for="" class="radio-inline">        <input type="radio" name="sex"/>女    </label>    <label for="" class="radio-inline">        <input type="radio" name="sex"/>保密    </label>    <br />    <label for="" class="checkbox-inline">        <input type="checkbox" />HTML    </label>    <label for="" class="checkbox-inline">        <input type="checkbox" />CSS    </label>    <label for="" class="checkbox-inline">        <input type="checkbox" />JavaScript    </label></div>

表单验证

　　has-success：成功，绿色。
　　has-warning：警告，黄色。
　　has-error：错误，红色。
　　在”form-group”上加上对应的样式即可。为了更好的验证，我们还可以继续加上”has-feedback”。然后在input（”form-control”）后面元素同级加上”form-control-feedback”。语义清晰明了。代码如下：
　　

<form action="" class="form-horizontal">    <div class="form-group has-error has-feedback">        <label for="" class="control-label col-md-2 col-md-pull-1">用户名：</label>        <div class="col-md-3 col-md-pull-1">            <input type="text" class="form-control" />            <span class="form-control-feedback glyphicon glyphicon-remove"></span>        </div>    </div>    <div class="form-group has-warning has-feedback">        <label for="" class="control-label col-md-2 col-md-pull-1">密码：</label>        <div class="col-md-3 col-md-pull-1">            <input type="text" class="form-control" />            <span class="form-control-feedback glyphicon glyphicon-warning-sign"></span>        </div>    </div>    <div class="form-group has-success has-feedback">        <label for="" class="control-label col-md-2 col-md-pull-1">邮箱：</label>        <div class="col-md-3 col-md-pull-1">            <input type="text" class="form-control" />            <span class="form-control-feedback glyphicon glyphicon-ok"></span>            <span>格式正确</span>        </div>    </div></form>

按钮

　　多按钮与按钮风格

　　bootstrap中的按钮风格多样。button、a、input、span、div等都可以成为按钮，只要它具有”btn btn-样式”。但是为了更好的兼容性和可读性最好不要这样用，尽量使用button标签。
　　

<button class="btn btn-default">按钮</button><button class="btn btn-primary">按钮</button><button class="btn btn-info">按钮</button><button class="btn btn-link">按钮</button><button class="btn btn-success btn-xs">按钮</button><button class="btn btn-warning btn-sm">按钮</button><button class="btn btn-error btn-lg">按钮</button><!--btn-block使按钮独占一行--><button class="btn btn-default btn-block">按钮</button><button class="btn btn-primary btn-block">按钮</button><button class="btn btn-info btn-block">按钮</button><button class="btn btn-link btn-block">按钮</button><button class="btn btn-success btn-xs btn-block active">按钮</button><button class="btn btn-warning btn-sm btn-block focus">按钮</button><button class="btn btn-error btn-lg btn-block">按钮</button>

　　按钮大小

　　如上述，使用”btn-xs”，”btn-sm”，”btn-lg”可以设置按钮大小。

　　按钮状态

　　如上述，有效的有”active”，”focus”。

图片

　　img-responsive：响应式图片，主要针对响应式设计。
　　img-rounded：圆角。
　　img-circle：圆形。
　　img-thumbnail：缩略图，表现为外层加了一个边框。

图标

　　　bootstart内置了很多小图标。使用方式如下。其实在上面的”form-control-feedback”中已经使用了。其中”glyphicon”是必须的。
　　　<span class="glyphicon glyphicon-search"></span>

输入框组

　　输入框组是一个”input-group”。我们需要加一些后缀（比如邮箱后缀）和前缀（金钱符号￥、$等）则需要使用到”input-group-addon”或者”input-group-btn”。语义简单清晰。如下：
　　

<!--邮箱--><div class="input-group">    <input type="text" class="form-control" />    <span class="input-group-addon">@gmail.com</span></div><!--货币--><div class="input-group">    <span class="input-group-addon">$</span>    <input type="text" class="form-control">    <span class="input-group-addon">.00</span></div><!--单选--><div class="input-group">    <span class="input-group-addon">        <input type="radio"/>    </span>    <input type="text" class="form-control"/></div><!--多选--><div class="input-group">    <span class="input-group-addon">        <input type="checkbox"/>    </span>    <input type="text" class="form-control" /></div><!--淘宝输入框组--><div class="input-group">    <div class="input-group-btn">        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">            请选择<span class="caret"></span>        </button>        <ul class="dropdown-menu">            <li><a href="javascript:void(0)">宝贝</a></li>            <li><a href="javascript:void(0)">店铺</a></li>        </ul>    </div>    <input type="text" class="form-control" />    <span class="input-group-btn">        <button class="btn btn-primary">搜索</button>    </span></div>

综合实例

　　下面提供一个综合案例，是表单的基本样式。

<div class="container">    <form action="" class="form-horizontal">        <div class="form-group has-error has-feedback">            <label for="" class="control-label col-md-2 col-sm-4">用户名</label>            <div class="col-md-9 col-sm-4">                <input type="text" class="form-control <!--input-sm-->">                <span class="form-control-feedback glyphicon glyphicon-remove"></span>            </div>        </div>        <div class="form-group">            <label for="" class="control-label col-md-2 col-sm-4">密码</label>            <div class="col-md-9 col-sm-4">                <input type="password" class="form-control"/>            </div>        </div>        <div class="form-group">            <label for="" class="col-md-2 control-label">邮箱</label>            <div class="col-md-9">                <div class="input-group">                    <input type="text" class="form-control"/>                    <span class="input-group-addon">@gmail.com </span>                </div>            </div>        </div>        <div class="form-group">            <label for="" class="control-label col-md-2 col-sm-4">性别</label>            <div class="col-md-9 col-sm-4">                <label for="" class="radio-inline">                    <input type="radio" name="sex"/>男                </label>                <label for="" class="radio-inline">                    <input type="radio" name="sex"/>女                </label>            </div>        </div>        <div class="form-group">            <label for="" class="control-label col-md-2 col-sm-4">爱好</label>            <div class="col-md-9 col-sm-4">                <label for="" class="checkbox-inline">                    <input type="checkbox"/>篮球                </label>                <label for="" class="checkbox-inline">                    <input type="checkbox"/>足球                </label>                <label for="" class="checkbox-inline">                    <input type="checkbox"/>乒乓球                </label>            </div>        </div>        <div class="form-group">            <label for="" class="control-label col-md-2 col-sm-4">textarea</label>            <div class="col-md-9 col-sm-4">                <textarea class="form-control" rows="3"></textarea>            </div>        </div>        <div class="form-group col-md-12">            <button class="btn btn-primary btn-block">提交</button>        </div>    </form></div>

小结

　　“form-horizontal”，”form-inline”都是表单组最外层的标签。
　　一个表单组以”form-group”作为父元素。类似的还有”input-group”，以及以后可能会将的”button-group”。它们都可以设置大小。”form-group-lg”，”input-lg”，”input-group-lg”，”btn-lg”等。
　　验证样式有”has-error”，”has-success”，”has-warning”。同元素可以加上”has-feedback”。以便让验证更完整。
　　按钮有很多样式，大小可以设置。
　　图片常用的四个样式。
　　bootstarp内置了很多图标。
　　输入框组以”input-group”开头，子元素有”input-group-addon”，”input-group-btn”等等。