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 创建一个默认表单布局。

<form class="well">

    <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）。下面是一个实例：

<form class="well form-search">

    <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）。下面是一个实例：

<form class="well form-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）。下面是一个实例：

<form class="form-horizontal">

    <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>

在线查看

在不同的浏览器窗口查看上面实例。