Bootstrap全局样式 - 表单

作者: 蝴蝶结199007 | 来源:发表于2017-06-09 19:14 被阅读149次

知识点

基本表单
<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全局样式 - 表单

知识点

一定要添加 label 标签

实践

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Web前端之路

我爱编程