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 类在输入字段旁边附加一个图标或帮助文本。
Text
实例
<form>
<div class="input-group">
<span class="input-group-addon"><i
class="glyphicon glyphicon-user"></i></span>
<input id="email"
type="text" 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>
亲自试一试 »