Bootstrap 表单
简介
在本教程中，您将学习如何使用 Bootstrap 2.0 工具包来创建表单。
Bootstrap 已经为 input、textarea 和 select 等表单控件定义样式，支持列表和复选框，为禁用的表单控件定义样式，包括每个表单控件的错误、警告、成功状态。
自版本 2.0 起，Bootstrap 提供了四中类型的表单布局 -
- 垂直（默认）
- 搜索
- 内联
- 水平
在 Bootstrap 的上一个版本中，表单布局默认是水平布局。但是，自版本 2.0 起，垂直布局是默认布局。
创建垂直表单布局
为 bootstrap.css 中 .form-vertical class 的 Bootstrap 默认表单布局（即垂直表单）定义样式。但是由于这是默认表单布局，在通过默认布局创建表单的时候，不需要规定 .form-vertical class。下面的实例演示一个通过 Bootstrap 2.0 默认表单布局创建的表单。
.well class 用于创建表单的容器（当然，它还有其他用途）。这个 class 可在 bootstrap.css 中行号 1650 到 1663 找到。对于这个布局，输入框是块级的（block level）。下面的实例演示如何使用 Bootstrap 创建一个默认表单布局。
实例
<label>标签名称</label>
<input type="text" class="span3" placeholder="Type something…">
<span class="help-inline">相关帮助文档 ！</span>
<label class="checkbox">
<input type="checkbox"> 选中我
</label>
<button type="submit" class="btn">提交</button>
</form>
在线查看
创建搜索表单布局
使用位于 bootstrap.css 中行号为 962 到 1003 （这些行也包含了 .form-inline 的样式）的 .form-search class，来创建一个搜索表单。对于这个布局，输入框是块级的（block level）。下面是一个实例：
实例
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">搜索</button>
</form>
在线查看
创建内联表单布局
使用位于 bootstrap.css 中行号为 962 到 1003 （这些行也包含了 .form-search 的样式）的 .form-inline class，来创建一个内联表单。对于这个布局，输入框是内联的（inline）。下面是一个实例：
实例
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> 记住我
</label>
<button type="submit" class="btn">登录</button>
</form>
在线查看
创建水平表单布局
使用位于 bootstrap.css 中的 .form-horizontal class，来创建一个水平表单。对于这个布局，输入框是块级的（block level）。下面是一个实例：
实例
<fieldset>
<legend>Bootstrap 支持的控件</legend>
<div class="control-group">
<label class="control-label" for="input01">文本输入</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">除了自由格式文本，一些HTML5基于文本的输入像这样呈现。</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="optionsCheckbox">确认框</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" id="optionsCheckbox" value="option1">
选中选项，确认此项正确。
</label>
</div>
</div>
<div class="control-group">
<label class="control-label" for="select01">选择列表</label>
<div class="controls">
<select id="select01">
<option>something</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="multiSelect">多选</label>
<div class="controls">
<select multiple="multiple" id="multiSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="fileInput">文件上传</label>
<div class="controls">
<input class="input-file" id="fileInput" type="file">
</div>
</div>
<div class="control-group">
<label class="control-label" for="textarea">文本区域</label>
<div class="controls">
<textarea class="input-xlarge" id="textarea" rows="3"></textarea>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">保存修改</button>
<button class="btn">取消</button>
</div>
</fieldset>
</form>
在线查看
Bootstrap 表单控件的浏览器状态
当输入字段获得焦点或者输入字段被禁用或者字段只读时，Bootstrap 已经为这些定义样式。在 bootstrap.css 中从行号 677 到 697，为获得焦点的输入框和输入域元素定义了样式。
首先，Webkit "outline" 作为 ":focus" 的值使用，但是现在已经变为 " box-shadow"。
下面是一个实例，展示了获得焦点的输入框、只读的输入框、禁用的输入框、禁用的复选框和禁用的按钮的样式如何改变。
实例
<fieldset>
<legend>Bootstrap支持的控件</legend>
<div class="control-group">
<label class="control-label" for="input01">焦点输入</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">除了自由格式文本，一些HTML5基于文本的输入像这样呈现。</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">只读输入</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01" readonly="true">
<p class="help-block">除了自由格式文本，一些HTML5基于文本的输入像这样呈现。</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">禁用输入</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01" disabled>
<p class="help-block">除了自由格式文本，一些HTML5基于文本的输入像这样呈现。</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="optionsCheckbox" reado>确认框 (禁用)</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" id="optionsCheckbox" value="option1" disabled>
选中选项，确认此项正确。
</label>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" disabled>保存修改 (禁用按钮)</button>
<button class="btn">取消</button>
</div>
</fieldset>
</form>
在线查看
为表单验证定义样式
Bootstrap 2.0 可以为验证表单时的错误、警告、成功状态定义样式。这是很好的特性，由于当用户提交表单数据发生错误时，或者需要生成一个警告时，甚至是通知用户已经成功提交数据时，需要向用户展示不同的样式。
这里有一个实例：
实例
<fieldset>
<legend>表单验证错误，警告或成功</legend>
<div class="control-group error">
<label class="control-label" for="inputError">输入错误</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">请纠正错误</span>
</div>
</div>
<div class="control-group warning">
<label class="control-label" for="inputWarning">输入警告</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">出现一些错误</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">成功输入</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">成功输入</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="selectError">选择成功</label>
<div class="controls">
<select id="selectError">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<span class="help-inline">选择成功</span>
</div>
</div>
</fieldset>
</form>
点我分享笔记