本文章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的，用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。
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教程网
时间： 2024-12-24 20:38:45