bootstrap的下拉菜单

来源：互联网发布：哔哩哔哩 mac 编辑：程序博客网时间：2024/04/25 19:12

本文章将重点介绍 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教程网

1 0