Bootstrap 表单输入框 (更多)
静态控件
如果您需要在水平表单中将纯文本插入表单标签旁边，请在 <p> 元素上使用 .form-control-static 类
示例
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">Email:</label>
<div class="col-sm-10">
<p class="form-control-static">someone@example.com</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="Email">
</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="Password">
</div>
<div class="input-group">
<span class="input-group-addon">Text</span>
<input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
</div>
</form>
自己动手试一试 »
.input-group-btn 将按钮附加到输入框旁边。这通常与搜索栏一起使用
示例
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
自己动手试一试 »
Bootstrap 表单控件状态
- 输入框焦点 - 输入框的轮廓被移除，并在焦点时应用 box-shadow
- 禁用的输入框 - 添加
disabled属性来禁用输入字段 - 禁用的 fieldset - 在 fieldset 上添加
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">Focused</label>
<div class="col-sm-10">
<input class="form-control" id="focusedInput" type="text" value="Click to focus">
</div>
</div>
<div class="form-group">
<label for="disabledInput" class="col-sm-2 control-label">Disabled</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">Fieldset disabled</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>Disabled select</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">Focused</label>
<input class="form-control" id="focusedInput" type="text">
</div>
<div class="form-group">
<label for="inputPassword">Disabled</label>
<input class="form-control" id="disabledInput" type="text" disabled>
</div>
<div class="form-group has-success has-feedback">
<label for="inputSuccess2">Input with success</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">Input with warning</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">Input with error</label>
<input type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
自己动手试一试 »
