本网站只能被运行在支持JavaScript脚本的环境中

第3章 在Bootstrap中制作表单

本节概述

在Bootstrap中为按钮、表单等提供了基本样式。本节介绍在制作表单时开发者会经常使用到的样式。

表单的基本使用方法

在使用表单时,推荐为input元素等输入用元素指定form-control这个class。

除checkbox等一部分元素之外,不推荐在label元素内部放置其他input元素,而推荐通过for属性来指定label的绑定元素。另外推荐使用class属性值为form-group的div元素来封装input元素及label元素。

<form role="form">
    <div class="form-group">
        <label for="exampleInputEmail1">Email地址</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">密码</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
    </div>
    <div class="form-group">
        <label for="exampleInputFile">选择文件</label>
        <input type="file" id="exampleInputFile">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox">同意我们的条约
        </label>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>

一行表单

有时我们需要为用户登录制作一行表单。这时,可以将form元素的class属性值指定为form-inline,将label元素的class属性值指定为sr-only。这样,在智能手机的屏幕中,这些元素将为纵向排列。

<form class="form-inline" role="form">
    <div class="form-group">
        <label class="sr-only" for="exampleInputEmail2">Email地址</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入Email">
    </div>
    <div class="form-group">
        <label class="sr-only" for="exampleInputPassword2">密码</label>
        <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入密码">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox">记住密码
        </label>
    </div>
    <button type="submit" class="btn btn-default">登录</button>
</form>
当屏幕宽度大于768px时
当屏幕宽度小于768px时

什么是sr-only?

虽然从上图来看,sr-only用于隐藏元素,但是屏幕阅读器将阅读到其中的内容。

可以横向排列元素的表单

接下来介绍可以利用第2章中介绍的栅格系统的表单。首先将form元素的class属性值指定为form-horizontal。这样的话class属性值为form-group的div元素的作用就等于class属性值为row的元素。另外,可以通过栅格系统来指定class属性值为control-label的label元素的宽度,同时可以通过使用div元素封装input元素的方法来指定input元素的宽度。

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="请输入Email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox">记住密码
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登录</button>
        </div>
    </div>
</form>

定义方法不同的checkbox与radio元素

虽然通常使用for属性为label绑定input元素,但是也有例外,就是当针对checkbox与radio元素的时候。这时需要将input元素书写在label元素内部。

另外,在Bootstrap中使用复选框时,需要将div元素的class属性值设置为checkbox、在Bootstrap中使用单选框时,需要将div元素的class属性值设置为radio,在Bootstrap中使用选取框时,需要将select元素的class属性设置为form-control。

<div class="checkbox">
    <label>
        <input type="checkbox" value="">
        复选框
    </label>
</div>
<div class="radio">
    <label><input type="radio" value="" checked>单选框</label>
</div>
<select multiple class="form-control">
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

inline checkbox

当说明文字较短而想将多个checkbox元素或radio元素横向排列时,可以将用于checkbox元素的lable元素的class属性值指定为checkbox-inline,将用于radio元素的label元素的class属性值指定为radio-inline。

<div class="checkbox">
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
    </label>
</div>

静态元素

当需要在表单内显示静态信息时,可以将p元素的class属性值指定为control-static。

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <p class="form-control-static">email@example.com</p>
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
        </div>
    </div>
</form>

验证信息的显示

近些年在表单内验证(检查用户输入错误)的功能非常盛行。在Bootstrap中也提供了用于显示验证结果的class。使用方法为为form-group元素(class属性值为form-group的元素)追加has-[状态]class。

class 说明
has-success 当输入正确时显示为绿色
has-warning 当需要警告用户输入时显示为桔色
has-error 当输入错误时显示为红色

可以使用JavaScript或jQuery代码为元素切换使用表中所述class。

<div class="form-group has-success">
    <label class="control-label" for="inputSuccess1">输入无问题</label>
    <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
    <label class="control-label" for="inputWarning1">输入结果需要警告</label>
    <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
    <label class="control-label" for="inputError1">输入有错误</label>
    <input type="text" class="form-control" id="inputError1">
</div>

为验证使用图标

可以为验证使用图标。这时需要为输入框追加使用具有glyphicon这个class的span元素(图标的使用方法后文详述),同时为表单使用form-control-feedback这个class。

<div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess2">输入无问题</label>
    <input type="text" class="form-control" id="inputSuccess2">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
    <label class="control-label" for="inputWarning2">输入结果需要警告</label>
    <input type="text" class="form-control" id="inputWarning2">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError2">输入有错误</label>
    <input type="text" class="form-control" id="inputError2">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

修改元素尺寸

可以修改元素尺寸。

在Bootstrap中提供2个用于修改元素字体大小的class。可以为input元素指定用于放大元素字体的input-lg与用于缩小元素字体的input-sm这两个class。

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

当需要修改元素宽度时,推荐使用栅格系统封装input元素。

<div class="row">
    <div class="col-xs-2">
        <input type="text" class="form-control" placeholder=".col-xs-2">
    </div>
    <div class="col-xs-3">
        <input type="text" class="form-control" placeholder=".col-xs-3">
    </div>
    <div class="col-xs-4">
        <input type="text" class="form-control" placeholder=".col-xs-4">
    </div>
</div>

元素的说明文字

在Bootstrap中,提供在input元素下部显示说明文字的方法。可以在class属性值为form-group的元素内放置使用了help-block这个class的元素(与input元素为兄弟元素)。

<div class="form-group">
    <input type="text" class="form-control" placeholder=".col-xs-2">
    <span class="help-block">说明文字。</span>
</div>

辅助说明按钮含义的设计

除了可以为按钮指定btn这个class之外,可以结合使用用于辅助说明按钮含义或状态的class。可以为按钮使用button元素、a元素以及input元素(type属性值为button或submit)。

<!-- 普通按钮 -->
<button type="button" class="btn btn-default">Default</button>

<!-- 蓝色按钮用于“下一步”、“登录”等等具有前向意义的按钮->
<button type="button" class="btn btn-primary">Primary</button>

<!-- 绿色按钮具有操作成功、结束的意义-->
<button type="button" class="btn btn-success">Success</button>

<!-- 浅蓝色按钮用于显示信息 -->
<button type="button" class="btn btn-info">Info</button>

<!--桔色按钮具有提示需要注意的意义-->
<button type="button" class="btn btn-warning">Warning</button>

<!--红色按钮具有提示操作不可逆、需要谨慎的意义。多数用于删除按钮-->
<button type="button" class="btn btn-danger">Danger</button>

<!-- 链接按钮 -->
<button type="button" class="btn btn-link">Link</button>

修改按钮尺寸

在Bootstrap中提供4种按钮尺寸,通过如下表所示的4个class来进行指定。

class 尺寸
btn-lg 大尺寸
(不指定) 标准尺寸
btn-sm 较小尺寸
btn-xs 超小尺寸
<p>
    <button type="button" class="btn btn-primary btn-lg">大按钮</button>
    <button type="button" class="btn btn-default btn-lg">大按钮</button>
</p>
<p>
    <button type="button" class="btn btn-primary">标准按钮</button>
    <button type="button" class="btn btn-default">标准按钮</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-sm">小按钮</button>
    <button type="button" class="btn btn-default btn-sm">小按钮</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-xs">超小按钮</button>
    <button type="button" class="btn btn-default btn-xs">超小按钮</button>
</p>

块级按钮

通常button元素被渲染为内联元素,但是有时需要被显示为占据整行(例如在登录界面中)。这时可以通过对齐追加btn-block这个class的方法将其显示为块级元素。

<button type="button" class="btn btn-primary btn-lg btn-block">登录</button>
<button type="button" class="btn btn-default btn-lg btn-block">注册</button>

Bootstrap 3中的图标

在Bootstrap 2中,依靠CSS sprite来实现图标。在Bootstrap 3中,依靠Web字体来实现图标,这样做的好处是可以灵活缩放图标大小,在视网膜屏幕中也可以清晰显示图标。同时,由于使用字体,开发者可以灵活设置图标颜色。

使用方法为,为空的span元素指定glyphicon这个class,同时指定需要显示的图标的class。

<span class="glyphicon glyphicon-[图标名]"></span>

官方网站中公布了可以使用的图标及图标名。

为按钮使用图标

与使用文字来说明按钮的作用相比,使用图标将更加直观漂亮。为了对按钮使用图标,可以为按钮追加使用具有glyphicon这个class的span元素。

例如当需要使用主页图标时,可以使用“glyphicon-home”class。

<button type="button" class="btn">主页
    <span class="glyphicon glyphicon-home"></span>
</button>
<button type="button" class="btn">下载
    <span class="glyphicon glyphicon-download"></span>
</button>

按钮组

可以使按钮成组显示。使用方法非常简单,为封装按钮的div元素指定btn-group这个class。〈/p>

<div class="btn-group">
    <button type="button" class="btn btn-default">左</button>
    <button type="button" class="btn btn-default">中央</button>
    <button type="button" class="btn btn-default">右</button>
</div>

按钮工具条

可以结合多个按钮组制作工具条。使用方法非常简单:为封装多个按钮组的div元素指定btn-toolbar这个class。

<div class="btn-toolbar" role="toolbar">  
    <div class="btn-group">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>
        <button type="button" class="btn btn-default">3</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">4</button>
        <button type="button" class="btn btn-default">5</button>
        <button type="button" class="btn btn-default">6</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">7</button>
        <button type="button" class="btn btn-default">8</button>
        <button type="button" class="btn btn-default">9</button>
    </div>
</div>

设置按钮组的尺寸

与按钮相同,可以通过使用如下表所示的class来定义4种按钮组的尺寸。

class 说明
btn-group-lg 大尺寸
(不指定) 标准尺寸
btn-group-sm 小尺寸
btn-group-xs 超小尺寸

可以书写如下所示的代码:

<div class="btn-toolbar" role="toolbar">  
    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-default">左</button>
        <button type="button" class="btn btn-default">中</button>
        <button type="button" class="btn btn-default">右</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">左</button>
        <button type="button" class="btn btn-default">中</button>
        <button type="button" class="btn btn-default">右</button>
    </div>
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-default">左</button>
        <button type="button" class="btn btn-default">中</button>
        <button type="button" class="btn btn-default">右</button>
    </div>
    <div class="btn-group btn-group-xs">
        <button type="button" class="btn btn-default">左</button>
        <button type="button" class="btn btn-default">中</button>
        <button type="button" class="btn btn-default">右</button>
    </div>
</div>

纵向排列的按钮组

可以将按钮组中的按钮纵向排列,使用方法为为封装按钮组的div元素指定btn-group-vertical这个class,而不是btn-group这个class。

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">一</button>
    <button type="button" class="btn btn-default">二</button>
    <button type="button" class="btn btn-default">三</button>
</div>

尺寸正合适的按钮组

可以制作与父元素的宽度正好吻合的按钮组。制作方法为为使用btn-group的div元素追加使用btn-group-justified这个class。但是,请注意a元素与button元素的使用方法略有不同。

当使用a元素时只需要为父元素追加使用btn-group-justified这个class。

<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-default">1</a>
    <a href="#" class="btn btn-default">2</a>
    <a href="#" class="btn btn-default">3</a>
</div>

但是,当使用button元素时需要为每个按钮使用具有btn-group这个class的元素的div元素进行封装,最后同时使用具有btn-group与btn-group-justified这两个class的div元素进行封装。

<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-default">一</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">二</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">三</button>
    </div>
</div>

输入框组

基本输入框组

在BootStrap中可以通过输入框组的使用向基于文本的输入框添加作为前缀和后缀的文本或按钮。

输入框组的使用步骤如下所示:

  1. 把前缀后后缀元素放在一个class属性值为“input-group”的div元素中。
  2. 在该div元素中添加class属性值为“input-group-addon”的span元素中。
  3. 在该span元素中放置需要作为前缀或后缀的元素。
  4. 把该span元素放置在input元素的前面或者后面。
<form role="form">
    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="twitterhandle">
    </div>
    <br>
    <div class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-addon">.00</span>
    </div>
    <br>
    <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control">
        <span class="input-group-addon">.00</span>
    </div>
</form>

输入框组的大小

可以通过向class属性值为“input-group”的div元素添加使用“input-group-lg”、“input-group-sm”、“input-group-xs”class来改变输入框组的大小。输入框中的内容会自动调整大小。

<form role="form">
    <div class="input-group input-group-lg">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="Twitterhandle">
    </div><br>
    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="Twitterhandle">
    </div><br>
    <div class="input-group input-group-sm">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="Twitterhandle">
    </div>
</form>

复选框和单选框

可以把复选框和单选框用作为输入框组的前缀或者后缀元素。

<form role="form">
    <div class="row">
        <div class="col-lg-6">
            <div class="input-group">
                <span class="input-group-addon">
                    <input type="checkbox">
                </span>
                <input type="text" class="form-control">
            </div>
        </div>
        <br>
        <div class="col-lg-6">
            <div class="input-group">
                <span class="input-group-addon">
                    <input type="radio">
                </span>
                <input type="text" class="form-control">
            </div>
        </div>
    </div>
</form>

按钮

可以把按钮作为输入框组的前缀或者后缀元素,这个时候就不是为button元素的父span元素使用“input-group-addon”class,而是使用“input-group-btn”class。

<form role="form">
    <div class="row">
        <div class="col-lg-6">
            <div class="input-group">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">
                    按钮一
                    </button>
                </span>
                <input type="text" class="form-control">
             </div><!-- /input-group -->
        </div>
        <br>
        <div class="col-lg-6">
            <div class="input-group">
                <input type="text" class="form-control">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">
                    按钮二
                    </button>
                </span>
            </div>
        </div>
    </div>
</form>