bootstrap入门【按钮式下拉菜单，输入框组】
16lz
2021-01-22
按钮式下拉菜单没什么好说的，就是以前学过的东西做了一个嵌套而已。注意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>
更多相关文章
- 如何在选择单选按钮时显示文本字段
- 无法从按钮onclick事件ASP.NET 4调用Javascript函数
- 单击它时，为什么下拉菜单不在我的导航栏中工作？
- 隐藏加载更多记录按钮ASP.net MVC Ajax Javascript
- 如何更改我的按钮文字？
- 单选按钮单击，隐藏/显示不工作
- 在Internet Explorer中使用sprited按钮和selection.createRange（）
- 无法使用jquery将活动类添加到当前选定的菜单
- 使用按钮单击按钮添加表格