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

Bootstrap 按钮下拉菜单

2015-02-07 11:49 501 查看
把任意一个按钮放入
.btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。

单按钮下拉菜单

只要改变一些基本的标记，就能把按钮变成下拉菜单的开关。

代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap按钮组</title>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
教程网<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Java教程网</a></li>
<li><a href="#">Android教程网</a></li>
<li><a href="#">ios教程网</a></li>
<li class="divider"></li>
<li><a href="#">622p开源网</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown">
教程网<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">java教程网</a></li>
<li><a href="#">android教程网</a></li>
<li><a href="#">ios教程网</a></li>
<li class="divider"></li>
<li><a href="#">622p开源网</a></li>
</ul>
</div>
<button type="button" class="btn btn-success dropdown-toggle"
data-toggle="dropdown">
教程网<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">java教程网</a></li>
<li><a href="#">android教程网</a></li>
<li><a href="#">ios教程网</a></li>
<li class="divider"></li>
<li><a href="#">622p开源网</a></li>
</ul>
</div>
<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 href="#">java教程网</a></li>
<li><a href="#">android教程网</a></li>
<li><a href="#">ios教程网</a></li>
<li class="divider"></li>
<li><a href="#">622p开源网</a></li>
</ul>
</div>
<button type="button" class="btn btn-danger dropdown-toggle"
data-toggle="dropdown">
教程网<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">java教程网</a></li>
<li><a href="#">android教程网</a></li>
<li><a href="#">ios教程网</a></li>
<li class="divider"></li>
<li><a href="#">622p开源网</a></li>
</ul>
</div>
<button type="button" class="btn btn-warning dropdown-toggle"
data-toggle="dropdown">
教程网<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">java教程网</a></li>
<li><a href="#">android教程网</a></li>
<li><a href="#">ios教程网</a></li>
<li class="divider"></li>
<li><a href="#">622p开源网</a></li>
</ul>
</div>

</body>
</html>


效果图



分裂式按钮下拉菜单

相似地，分裂式按钮下拉菜单也需要同样的改变一些标记，但只是多一个分开的按钮。

代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap按钮组</title>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group">
<button type="button" class="btn btn-danger">教程网</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">java教程网</a></li>
<li><a href="#">android教程网</a></li>
<li><a href="#">iod教程网</a></li>
<li class="divider"></li>
<li><a href="#">开源网</a></li>
</ul>
</div>

</body>
</html>


效果图



尺寸

按钮式下拉菜单适用所有尺寸的按钮。

代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap按钮组</title>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group">
<button class="btn btn-warning btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">java教程网</a></li>
<li><a href="#">android教程网</a></li>
<li><a href="#">iod教程网</a></li>
<li class="divider"></li>
<li><a href="#">开源网</a></li>
</ul>
</div>

<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-danger btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">java教程网</a></li>
<li><a href="#">android教程网</a></li>
<li><a href="#">iod教程网</a></li>
<li class="divider"></li>
<li><a href="#">开源网</a></li>
</ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-info btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">java教程网</a></li>
<li><a href="#">android教程网</a></li>
<li><a href="#">iod教程网</a></li>
<li class="divider"></li>
<li><a href="#">开源网</a></li>
</ul>
</div>

</body>
</html>
效果图



向上弹出式菜单

给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开。

代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap按钮组</title>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</head>
<body>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<div class="btn-group dropup">
<button type="button" class="btn btn-info">Dropup</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">java教程网</a></li>
<li><a href="#">android教程网</a></li>
<li><a href="#">iod教程网</a></li>
<li class="divider"></li>
<li><a href="#">开源网</a></li>->
</ul>
</div>

</body>
</html>
效果图



注：更多学习资源尽在java教程网

本文地址：http://java.662p.com/thread-4609-1-1.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航