bootstrap的下拉菜单

最新推荐文章于 2024-06-03 20:31:46 发布

xxiaowen

最新推荐文章于 2024-06-03 20:31:46 发布

阅读量1.9k

点赞数 1

分类专栏： bootstrap

本文链接：https://blog.csdn.net/wenzhilanyu2012/article/details/43370527

版权

bootstrap 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

xxiaowen

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap的下拉菜单

本文章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的，用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。1、将下拉菜单触发器和下拉菜单都包裹在放在class.dropdown 里，或者另一个声明了 position: relative; 的元素。代码如下bootstrap下拉菜单
复制链接

扫一扫

专栏目录