http://v3.bootcss.com/components/#input-groups
mark
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>BootStrap CSS组件</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<!--
我们不支持在输入框的单独一侧添加多个额外元素。
我们不支持在单个输入框组中添加多个表单控件。
-->
<!--输入框，框前添加icon-->
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="UserName">
</div>
<!--输入框，框后添加icon-->
<div class="input-group">
<input type="text" class="form-control" placeholder="UserName">
<span class="input-group-addon">.00</span>
</div>
<!--输入框，框前后都添加icon-->
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="UserName">
<span class="input-group-addon">.00</span>
</div>
<hr>
<!--作为额外元素的多选框和单选框
多选为checkbox，单选为radio-->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
</div>
</div>
<hr>
<!--作为额外元素的按钮-->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go</button>
</span>
<input type="text" class="form-control">
</div>
</div>
</div>
<hr>
<!--作为额外元素的按钮式下拉菜单-->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown" data-toggle="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Hello</a> </li>
<li><a href="#">Hello</a> </li>
<li><a href="#">Hello</a> </li>
<li><a href="#">Hello</a> </li>
</ul>
</div>
<input type="text" class="form-control">
</div>
</div>
</div>
<hr>
<!--作为额外元素的分裂式按钮式下拉菜单-->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default">
Action
</button>
<button type="button" class="btn btn-default dropdown" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Hello</a> </li>
<li><a href="#">Hello</a> </li>
<li><a href="#">Hello</a> </li>
<li><a href="#">Hello</a> </li>
</ul>
</div>
<input type="text" class="form-control">
</div>
</div>
</div>
<hr>
</div>
<script src="jquery-2.1.4.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
