1、基本输入框(label与input垂直排布)
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form action="">
<div class="form-group">
<label for="email">邮箱:</label>
<input type="text" class="form-control" id="email">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" class="form-control">
</div>
</form>
</div>
</div>
</div>
1、.form-group 让每个输入框底部有一定的margin 让上下的input有一定的间距
2、.form-control 让input的宽为100%
3、建议使用label,有利于屏幕阅读器 的识别
4、<form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。在pc端展示所有的input水平展示,在移动端可能会分行(折叠)排列
5、input的宽度设置了form-control,变为100%,如果不需要那么长,使用栅格系统来控制他的宽度
2、label与input水平排布
<form class="form-horizontal">
<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">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
1、为form标签添加form-horizontal类名
3、在输入框的任意一侧添加额外元素或按钮。你还可以在输入框的两侧同时添加额外元素。
我们不支持在输入框的单独一侧添加多个额外元素(.input-group-addon 或 .input-group-btn)。
我们不支持在单个输入框组中添加多个表单控件。
更多例子请查看官网
https://v3.bootcss.com/components/#input-groups
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
4、设置input的尺寸
<div class="input-group input-group-lg">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
input-group-lg 大输入框
input-group-sm 小输入框