在官方文档中是这么形容下拉菜单插件的
一、通过data属性:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="../../css/bootstrap.css"> <link rel="stylesheet" href="../../css/bootstrap-theme.css"> <style> .dropdown{ margin-top: 50px; } .dropdown-menu li{ margin-left: 20px; } </style> <title>data属性实现下拉菜单</title></head><body><div class="container"> <div class="dropdown"> <!--通过data-toggle属性来实现下拉菜单--> <button class="btn btn-info" data-toggle="dropdown"> 下拉列表 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li>下拉项1</li>] jl;.' <li>下拉项2</li> <li>下拉项3</li> </ul> </div></div></body><script src="../../jquery/jquery-3.1.1.js"></script><script src="../../js/bootstrap.js"></script></html>
效果如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="../../css/bootstrap.css"> <link rel="stylesheet" href="../../css/bootstrap-theme.css"> <style> .dropdown{ margin-top: 50px; } .dropdown-menu li{ margin-left: 20px; } </style> <title>通过js调用下拉菜单切换</title></head><body><div class="container"> <div class="dropdown"> <!--通过data-toggle属性来实现下拉菜单--> <button class="btn btn-info" data-toggle="dropdown"> 下拉列表 <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-toggle"> <li>下拉项1</li> <li>下拉项2</li> <li>下拉项3</li> </ul> </div></div></body><script src="../../jquery/jquery-3.1.1.js"></script><script src="../../js/bootstrap.js"></script><script> /*通过文档就绪函数来显示或隐藏下拉菜单*/ $(document).ready(function(){ $(".dropdown-toggle").dropdown('toggle'); });</script></html>
效果如下:
一、导航栏内实现下拉菜单效果
代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="../../css/bootstrap.css"> <link rel="stylesheet" href="../../css/bootstrap-theme.css"> <title>导航栏内下拉菜单的用法</title></head><body><div class="container-fluid"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control"> </div> <button class="btn btn-success">提交</button> </div> <div class="navbar-form navbar-left"> <div class="dropdown nav navbar-nav"> <!--通过data-toggle属性来实现下拉菜单--> <button class="btn btn-info" data-toggle="dropdown"> 下拉列表 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li>下拉项1</li> <li>下拉项2</li> <li>下拉项3</li> </ul> </div> </div> </div> </nav></div></body><script src="../../jquery/jquery-3.1.1.js"></script><script src="../../js/bootstrap.js"></script></html>
效果如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="../../css/bootstrap.css"> <link rel="stylesheet" href="../../css/bootstrap-theme.css"> <title>标签形式实现下拉效果</title></head><body><div class="container"> <ul class="nav nav-tabs"> <li class="active"><a href="#">标签1</a></li> <li><a href="#">标签2</a></li> <li><a href="#">标签3</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown"> 标签4<span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">下拉项1</a></li> <li><a href="#">下拉项2</a></li> <li><a href="#">下拉项3</a></li> </ul> </li> </ul></div></body><script src="../../jquery/jquery-3.1.1.js"></script><script src="../../js/bootstrap.js"></script></html>
效果如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="../../css/bootstrap.css"> <link rel="stylesheet" href="../../css/bootstrap-theme.css"> <title>胶囊形式实现下拉菜单效果</title></head><body><div class="container"> <ul class="nav nav-pills"> <li class="active"><a href="#">标签1</a></li> <li><a href="#">标签2</a></li> <li><a href="#">标签3</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown"> 标签4<span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">下拉项1</a></li> <li><a href="#">下拉项2</a></li> <li><a href="#">下拉项3</a></li> </ul> </li> </ul></div></body><script src="../../jquery/jquery-3.1.1.js"></script><script src="../../js/bootstrap.js"></script></html>
效果如下:
联系客服