bootstrap实现二级下拉菜单效果
作者：l_zhao1213 发布时间：2024-04-17 10:40:42
标签：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 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插件使用教程
来源：http://blog.csdn.net/l_zhao1213/article/details/51324451
0
投稿猜你喜欢
- 1. linux下消息记录关于系统的各种消息一般都会记录在/var/log/messages文件中，有些主机在中默认情况下有可能没有启用，具
- 做设计类网址导航的初衷是为了资源整合，也是在尝试解决问题。假定访问用户都是行业人士，或者目地性很强的有一定了解的用户，应该如何考虑这个组织系
python去除空格,tab制表符和\n换行符python中常用的替换字符串的函数有replace()，其用法相信大家都比较熟悉举个例子st- 一、效果展示：1、表单的图片上传项：- 新增时默认一个空白Input框- 更新时展示以往上传存放的图片，- 点击【查看】浏览完整大小- 点击
- 目录1.celery异步消息队列介绍celery应用举例Celery有以下优点Celery 特性2.工作原理 *****Celery 扮演生
- golang监听消息队列rabbitmq任务脚本，当rabbimq消息队列断开连接后自动重试，重新唤起协程执行任务需求背景：goalng常驻
- 只有mdf文件的数据库附加失败的修复 附加时报如下错误： 服务器: 消息 1813，级别 16，状态 2，行 1 未能打开新数据库 '
- scapy是python写的一个功能强大的交互式数据包处理程序，可用来发送、嗅探、解析和伪造网络数据包，常常被用到网络攻击和测试中。这里就直
- 昨天在群里看到有新同学还在问MySQL无法启动的问题，于是总结了几个常见情况，权当普及帖了，老鸟自觉飞过。 问题1：目录、文件权限设置不正确
- 前言Django 和 DRF(django rest framawork) 的结合在 python 后台中经常出现的组合。对于异常的全局处理
- InnoDB存储引擎的关键特性包括插入缓冲、两次写（double write）、自适应哈希索引（adaptive hash index）。这
- 前言还是最近在做的一个小项目，后端用的是Django搭配RestFramework做接口，前端第一次尝试用京东开源的Taro框架来做多端（目
- 一. Go 切片和 Go 数组定义Go 切片:又称动态数组，它实际是基于数组类型做的一层封装。Go 数组:数组是内置(build-in)类型
- 作为胶水语言，Python可以很方便的执行系统命令，Python3中常用的执行操作系统命令有os.system()、os.popen()、s
- 比如，在使用DWR的时候，如果你想传递下拉框的参数到后台的话，此时就需要先获取到下拉框的值了。 其实想要获取到下拉框的值是很简单的。 最关键
- 1. 优化你的MySQL查询缓存在MySQL服务器上进行查询，可以启用高速查询缓存。让数据库引擎在后台悄悄的处理是提高性能的最有
- # _*_ coding: utf-8 _*_#---------------------------------------#
- 在前人的基础上，我对比较优秀的sql语句进行了重新的编辑和整理，力求精短易学。希望大家可以举一反三，更好学习sql语句，如果有问题，还请翻阅
- 目录一、基本用法二、计数循环三、字符串遍历循环四、列表遍历循环五、文件遍历循环六、遍历循环的扩展模式一、基本用法for <循环变量&g
- Python3：字典中的items()函数一、Python2.x中items()： 和之前一样，本渣渣先贴出来python中help的帮助
