Bootstrap全局样式 - 表单

知识点

基本表单
<input><textarea><select>设置.form-control类,这些元素将会被设置为 width:100%;height:34px;
添加<label>与前面这些控件,一起包裹在.form-group中。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
基本表单

内联表单
为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
内联表单中的<input><textarea><select>这些控件的宽度被设为width:auto;,这个我们在写页面时需要去自定义设置。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
内联表单
一定要添加 label 标签

如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为 label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案,比如 aria-label、aria-labelledby 或 title 属性。如果这些都不存在,屏幕阅读器可能会采取使用 placeholder 属性,如果存在的话,使用占位符来替代其他的标记,但要注意,这种方法是不妥当的。

.sr-only
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
input-group-addon与btn-primary

水平排列的表单
通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。
<label>需要添加.control-label类来调整行高位置,与input等控件相对应显示;

    <form class="form-horizontal">
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-xs-2 control-label">name</label>
                <div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-xs-2 control-label">name</label>
                <div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-xs-2 control-label">name</label>
                <div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-xs-2 control-label">name</label>
                <div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
            </div>
        </div>
    </form>
水平排列的表单

静态控件
如果需要在表单中将一行纯文本和 label 元素放置于同一行,为 <p> 元素添加 .form-control-static 类即可。具体实例参照下面的实践。

焦点状态

focus

.form-control 元素的 :focus 状态

校验状态
Bootstrap 对表单控件的校验状态,使用时,添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式;
还可以针对校验状态为输入框添加额外的图标;只需设置相应的 .has-feedback 类并添加正确的图标;
反馈图标(feedback icon)只能使用在文本输入框 <input class="form-control"> 元素上。
实例:TODO:校验状态

控件尺寸
添加 .form-group-lg.form-group-sm 类,为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺;
用栅格系统中的列(column)包裹输入框或其任何父元素,都可很容易的为其设置宽度。


实践

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="Resource-type" content="Document"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表单</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <style>
        <!--
        .line{border-top:1px solid #afd9ee;margin:20px 0;}
        -->
    </style>
</head>
<body>
<div class="container">
    <!--基本表单格式-->
    <p>基本表单</p>
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
            <label for="exampleInputFile">File input</label>
            <input type="file" id="exampleInputFile">
            <p class="help-block">Example block-level help text here.</p>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> Check me out
            </label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>

    <div class="line"></div>
    <!--内联表单 width:auto; 一定要有label元素,label元素添加sr-only类,则该元素会被隐藏-->
    <p>内联表单</p>
    <form class="form-inline">
        <div class="form-group">
            <label for="exampleInputName2" class="sr-only">Name</label>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe" value="它之前的label元素被隐藏了">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail2">Email</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
        </div>
        <button type="submit" class="btn btn-default">Send invitation</button>
    </form>
    <br/>
    <form class="form-inline">
        <div class="form-group">
            <lable>价格:</lable>
            <div class="input-group">
                <div class="input-group-addon">input-group-addon</div>
                <input type="text" class="form-control" placeholder="" value=""/>
                <div class="input-group-addon">.00</div>
                <div class="input-group-btn">input-group-btn</div>
            </div>
        </div>
    </form>

    <div class="line"></div>
    <!--水平排列的表单-->
    <p>水平排列的表单</p>
    <form class="form-horizontal">
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-xs-2 control-label">name</label>
                <div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-xs-2 control-label">name</label>
                <div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-xs-2 control-label">name</label>
                <div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-xs-2 control-label">name</label>
                <div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
            </div>
        </div>
        <div class="clearfix"></div>
    </form>
    <div class="line"></div>
    <!--textarea-->
    <p>textarea</p>
    <textarea class="form-control" rows="5"></textarea>
    <div class="line"></div>
    <!--单选与复选-->
    <p>单选与复选</p>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="" name="checkbox"/>
            复选框按钮
        </label>
    </div>
    <div class="checkbox disabled">
        <label>
            <input type="checkbox" value="" name="checkbox" disabled/>
            复选框按钮,不可选disabled
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="radio"/>单选框
        </label>
        <label>
            <input type="radio" name="radio"/>单选框
        </label>
    </div>
    <div class="radio disabled">
        <label>
            <input type="radio" name="radio" disabled/>单选框不可选
        </label>
    </div>
    <div class="line"></div>
    <!--下拉列表(select)-->
    <p>下拉列表(select)</p>
    <select class="form-control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>

    <div class="line"></div>
    <!--静态控件-->
    <p>静态控件</p>
    <form class="form-horizontal"><!--单行显示-->
        <div class="form-group">
            <label class="col-sm-2 control-label">Email</label><!--sr-only-->
            <div class="col-sm-10">
                <p class="form-control-static">email@example.com</p><!--添加 form-control-static 类来设置p元素与label同行显示-->
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password">
            </div>
        </div>
    </form>
    <form class="form-inline"><!--一行显示-->
        <div class="form-group">
            <label class="sr-only">Email</label>
            <p class="form-control-static">email@example.com</p>
        </div>
        <div class="form-group">
            <label for="inputPassword2" class="sr-only">Password</label>
            <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-default">Confirm identity</button>
    </form>
    <div class="line"></div>
    <!--校验状态-->
    <p>校验状态</p>
    <form class="form-horizontal">
        <div class="form-group has-success">
            <label class="col-xs-2 control-label">has-success</label>
            <div class="col-xs-10"><input type="text" value="" name="" class="form-control"/></div>
        </div>
        <div class="form-group has-warning">
            <label class="col-xs-2 control-label">has-warning</label>
            <div class="col-xs-10"><input type="text" value="" name="" class="form-control"/></div>
        </div>
        <div class="form-group has-error">
            <label class="col-xs-2 control-label">has-error</label>
            <div class="col-xs-10"><input type="text" value="" name="" class="form-control"/></div>
        </div>
    </form>
    <div class="line"></div>
    <!--控件尺寸-->
    <p>控件尺寸</p>
    <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">
</div>

</body>
</html>

推荐阅读更多精彩内容

  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 7,938评论 3 183
  • 【表格】.table 类指定基本样式,.table-striped 条纹样式,.table-bordered 类为...
    gtt21阅读 60评论 0 2
  • HTML 表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。 0. 表单控件 ...
    EncyKe阅读 139评论 0 0
  • 这是在微博上看到的一篇文章,深有感触,于是转发过来。 人生最难跨过的一关,是自己那一关。唯一能够阻...
    小M姑娘阅读 124评论 0 1
  • 我有一副过得去的容貌,瘦削的身段,重点大学的绿本本,数年的财富管理工作经验。在大千世界中,或是一名普普通通的女子,...
    MissBright阅读 41评论 0 0