您的位置：首页 > Web前端 > BootStrap

BootStrap输入框组

2015-08-03 23:11 573 查看

摘自《极客学院》

1、效果图：

2、html代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap.min.css">
<title>BootStrap输入框组</title>
</head>
<body>
<div class="container">
<!--class="input-group-lg"调整大小-->
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="UserName">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="UserName">
<span class="input-group-addon">@</span>
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="dollar">
<span class="input-group-addon">.00</span>
</div>

<div class="row">
<div class="col-lg-6">
<div class="input-group">
<!--如果span标签承载button, class需为“input-group-btn”-->
<!--<span class="input-group-addon">-->
<!--<input type="checkbox">-->
<span class="input-group-btn">
<button class="btn btn-default">Go!!</button>
</span>
<input type="text" class="form-control">
</div>
</div>
</div>

<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">一</a></li>
<li><a href="#">一</a></li>
<li><a href="#">一</a></li>
<li><a href="#">一</a></li>
</ul>
</div>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<script src="jquery-2.1.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航