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

bootstrap入门【按钮式下拉菜单，输入框组】

2015-03-01 08:50 686 查看

按钮式下拉菜单没什么好说的，就是以前学过的东西做了一个嵌套而已。注意dropup即可实现上拉

输入框组分前面加《span》，后面加和两头加三种，还可以添加按钮，下拉菜单，单选复选框哦~

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery-2.1.3.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<p>按钮式下拉菜单</p>
<div class="container">
<div class="btn-group dropup">
<button type="button" class="btn btn-info ">分列式下拉菜单</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu " role="menu">
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</ul>
</div>
</div>
<p>输入框组</p>
<div class="container">
<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 class="form-control" placeholder="username" type="text">
<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="username">
<span class="input-group-addon">.00</span>
</div>
<div class="row">
<div class="input-group col-lg-6">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input class="form-control" type="text" placeholder="username">
</div>
</div>
<div class="row">
<div class="input-group col-lg-6">
<span class="input-group-addon">
<input type="radio">
</span>
<input class="form-control" type="text" placeholder="username">
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-info">按钮</button>
</span>
<input class="form-control" type="text" placeholder="username">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
要西
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</ul>
</span>
<input class="form-control" type="text" placeholder="username">
</div>
</div>
</div>
</div>

</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航