bootstrap实现二级下拉菜单效果

来源：懂视网责编：小OO 时间：2020-11-27 22:24:55

bootstrap实现二级下拉菜单效果

本文实例为大家分享了bootstrap实现二级下拉菜单展示的具体代码，供大家参考，具体内容如下：<；<。DOCTYPE html>；<；html>；<；head>；<；title>；Bootstrap 实例 - 基本的按钮下拉菜单<；/title>；<；link href=http：//libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css rel="stylesheet">；<；script src="http：//libs.baidu.com/jquery/2.0.0/jquery.min.js">；<；/script>；<；<；/script>。

推荐度：

点击下载本文 文档为doc格式

导读本文实例为大家分享了bootstrap实现二级下拉菜单展示的具体代码，供大家参考，具体内容如下：<；<。DOCTYPE html>；<；html>；<；head>；<；title>；Bootstrap 实例 - 基本的按钮下拉菜单<；/title>；<；link href=http：//libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css rel="stylesheet">；<；script src="http：//libs.baidu.com/jquery/2.0.0/jquery.min.js">；<；/script>；<；<；/script>。

本文实例为大家分享了bootstrap实现二级下拉菜单展示的具体代码，供大家参考，具体内容如下

<!DOCTYPE html> 
<html> 
<head> 
 <title>Bootstrap 实例 - 基本的按钮下拉菜单</title> 
 <link href=http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css rel="stylesheet"> 
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 
 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
 <style type="text/css"> 
 .dropdown-submenu { 
 position: relative; 
 } 
 .dropdown-submenu > .dropdown-menu { 
 top: 0; 
 left: 100%; 
 margin-top: -6px; 
 margin-left: -1px; 
 -webkit-border-radius: 0 6px 6px 6px; 
 -moz-border-radius: 0 6px 6px; 
 border-radius: 0 6px 6px 6px; 
 } 
 .dropdown-submenu:hover > .dropdown-menu { 
 display: block; 
 } 
 .dropdown-submenu > a:after { 
 display: block; 
 content: " "; 
 float: right; 
 width: 0; 
 height: 0; 
 border-color: transparent; 
 border-style: solid; 
 border-width: 5px 0 5px 5px; 
 border-left-color: #ccc; 
 margin-top: 5px; 
 margin-right: -10px; 
 } 
 .dropdown-submenu:hover > a:after { 
 border-left-color: #fff; 
 } 
 .dropdown-submenu.pull-left { 
 float: none; 
 } 
 .dropdown-submenu.pull-left > .dropdown-menu { 
 left: -100%; 
 margin-left: 10px; 
 -webkit-border-radius: 6px 0 6px 6px; 
 -moz-border-radius: 6px 0 6px 6px; 
 border-radius: 6px 0 6px 6px; 
 } 
 </style> 
</head> 
<body> 
 
 
<div class="btn-group"> 
 <button type="button" class="btn btn-default">原始</button> 
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
 <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> 
 <li><a href="#">另一个功能</a></li> 
 <li><a href="#">其他</a></li> 
 <li class="divider"></li> 
 <li class="dropdown-submenu"> 
 <a href="#">More options </a> 
 <ul class="dropdown-menu"> 
 <li> 
 <a href="#">另一个功能1</a> 
 </li> 
 </ul> 
 </li> 
 </ul> 
</div> 
 
 
</body> 
</html>

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com