本文章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的,用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。
1、将下拉菜单触发器和下拉菜单都包裹在 放在class.dropdown 里,或者另一个声明了 position: relative; 的元素。
效果图
效果图
效果图
效果图
1、将下拉菜单触发器和下拉菜单都包裹在 放在class.dropdown 里,或者另一个声明了 position: relative; 的元素。
代码如下
<!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="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
教程网
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://java.662p.com/">Java教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#http://android.662p.com/">android教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://ios.662p.com/">ios教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://php.662p.com/">php教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://html5.662p.com/">HTML5教程网</a></li>
</ul>
</div>
</body>
</html>
效果图
2、bootstrap对齐方式
默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。
代码如下
<!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="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
教程网
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://java.662p.com/">java教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#http://android.662p.com/">android教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://ios.662p.com/">ios教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://php.662p.com/">php教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://html5.662p.com/">HTML5教程网</a></li>
</ul>
</div>
</body>
</html>
效果图
还可以这样,通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单(不建议使用)
代码如下
<!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="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
教程网
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://java.662p.com/">java教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#http://android.662p.com/">android教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://ios.662p.com/">ios教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://php.662p.com/">php教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://html5.662p.com/">HTML5教程网</a></li>
</ul>
</div>
</body>
</html>
效果图
注意一下:从 v3.1.0 版本开始,我们不再建议对下拉菜单使用 .pull-right 类。如需将菜单右对齐,请使用 .dropdown-menu-right 类。导航条中如需添加右对齐的导航(nav)组件,请使用 .pull-right 的 mixin 版本,可以自动对齐菜单。如需左对齐,请使用 .dropdown-menu-left 类。
3、bootstrap的标题
在任何下拉菜单中均可通过添加标题来标明一组动作。您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。
代码如下
<!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="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
教程网
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">教程网下拉菜单标题</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://java.662p.com/">java教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#http://android.662p.com/">android教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://ios.662p.com/">ios教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://php.662p.com/">php教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://html5.662p.com/">HTML5教程网</a></li>
</ul>
</div>
</body>
</html>
效果图
4、bootstrap分割线
您可以为下拉菜单添加一条分割线,用于将多个链接分组。
代码如下
<!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="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
教程网
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">教程网下拉菜单标题</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://java.662p.com/">java教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#http://android.662p.com/">android教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://ios.662p.com/">ios教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://php.662p.com/">php教程网</a></li>
<!--添加分割线-->
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://html5.662p.com/">HTML5教程网</a></li>
</ul>
</div>
</body>
</html>
效果图
5、bootstrap禁用的菜单项
你可以为下拉菜单中的 <li> 元素添加 .disabled 类,从而禁用相应的菜单项。
代码如下
<!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="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
教程网
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">教程网下拉菜单标题</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://java.662p.com/">java教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#http://android.662p.com/">android教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://ios.662p.com/">ios教程网</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://php.662p.com/">php教程网</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="http://html5.662p.com/">HTML5教程网</a></li>
</ul>
</div>
</body>
</html>
效果图
注:详细说明尽在java教程网