Bootstrap 表单输入（更多）
静态控件
如果您需要在水平表单内，在表单标签旁边插入纯文本，请在<p>元素上使用.form-control-static类
示例
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">电子邮件：</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
</form>
尝试一下 »
Bootstrap 输入组
.input-group类是一个容器，通过在输入框前面或后面添加图标、文本或按钮来增强输入框，作为“帮助文本”。
.input-group-addon类将图标或帮助文本附加到输入框旁边。
文本
示例
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="email" type="email" class="form-control" name="email" placeholder="电子邮件">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control" name="password" placeholder="密码">
</div>
<div class="input-group">
<span class="input-group-addon">文本</span>
<input id="msg" type="text" class="form-control" name="msg" placeholder="附加信息">
</div>
</form>
尝试一下 »
.input-group-btn将按钮附加到输入框旁边。这通常与搜索栏一起使用
示例
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="搜索">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
尝试一下 »
Bootstrap 表单控件状态
- 输入焦点 - 输入框的轮廓将被移除，并在获得焦点时应用一个阴影
- 禁用输入框 - 添加一个
disabled属性来禁用输入框 - 禁用字段集 - 添加一个
disabled属性到字段集来禁用其中的所有控件 - 只读输入框 - 添加一个
readonly属性到输入框，以防止用户输入 - 验证状态 - Bootstrap 包含错误、警告和成功消息的验证样式。要使用，请将
.has-warning、.has-error或.has-success添加到父元素 - 图标 - 您可以使用
.has-feedback类和图标添加反馈图标 - 隐藏标签 - 在不可见的标签上添加
.sr-only类
以下示例演示了上述某些表单控件状态在水平表单中的应用
示例
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">获得焦点</label>
<div class="col-sm-10">
<input class="form-control" id="focusedInput" type="text" value="单击以获得焦点">
</div>
</div>
<div class="form-group">
<label for="disabledInput" class="col-sm-2 control-label">禁用</label>
<div class="col-sm-10">
<input class="form-control" id="disabledInput" type="text" disabled>
</div>
</div>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput" class="col-sm-2 control-label">字段集禁用</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>禁用选择</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group has-success has-feedback">
<label class="col-sm-2 control-label" for="inputSuccess">
具有成功状态和图标的输入</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
<div class="form-group has-warning has-feedback">
<label class="col-sm-2 control-label" for="inputWarning">
具有警告状态和图标的输入</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputWarning">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
</div>
<div class="form-group has-error has-feedback">
<label class="col-sm-2 control-label" for="inputError">
具有错误状态和图标的输入</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
</form>
尝试一下 »
以下是内联表单中部分表单控件状态的示例
示例
<form class="form-inline">
<div class="form-group">
<label for="focusedInput">获得焦点</label>
<input class="form-control" id="focusedInput" type="text">
</div>
<div class="form-group">
<label for="inputPassword">禁用</label>
<input class="form-control" id="disabledInput" type="text" disabled>
</div>
<div class="form-group has-success has-feedback">
<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 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 for="inputError2">具有错误状态的输入</label>
<input type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
尝试一下 »
