只需为下拉菜单的任意 <li> 元素添加 .dropdown-submenu 的类,并在该 <li> 元素下添加 .dropdown-menu 类的列表,就可以为该菜单项添加一个子下拉菜单。如:

<div class="dropdown">
  <ul class="dropdown-menu">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li class="dropdown-submenu">
      <a tabindex="-1" href="#">More options</a>
      <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">Second level link</a></li>
        <li><a tabindex="-1" href="#">Second level link</a></li>
        <li><a tabindex="-1" href="#">Second level link</a></li>
        <li><a tabindex="-1" href="#">Second level link</a></li>
        <li><a tabindex="-1" href="#">Second level link</a></li>
      </ul>
    </li>
  </ul>
</div>
效果如图 4‑6所示:

图4-6 Bootstrap多级下拉菜单组件
默认情况下,子菜单会在父菜单的右侧弹出。如果希望它在父菜单的左侧弹出,只需给相应的 <li> 元素添加 .pull-left 类即可:

<li class="dropdown-submenu pull-left">

</li>
效果如图 4‑7所示:

图4-7 左侧弹出的Bootstrap下拉菜单组件
另外,子菜单默认是以下拉形式弹出。如果希望以上拉形式弹出,只需把整个下拉菜单包裹在 .dropup 的容器中即可:

<div class="dropup">

</div>
效果如图 4‑8所示:

bootstrap多级下拉菜单的更多相关文章

  1. bootstrap 多级下拉菜单

    如上效果: 实现代码: 导入js和css: <link rel="stylesheet" href="http://cdn.static.runoob.com/li ...

  2. jquery实现多级下拉菜单

    支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...

  3. 基于jQuery带图标的多级下拉菜单

    之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...

  4. 一款多浏览器兼容的javascript多级下拉菜单

    这个多级下拉菜单的脚本大小不到2K,带有动画效果,可以方便地支持多个实例,并且能良好兼容WordPress系统wp_list_cats和wp_list_pages生成的多级列表.要初始化一个菜单,只需 ...

  5. Bootstrap按钮式下拉菜单

    前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜 ...

  6. 小程序多级下拉菜单demo

    小程序多级下拉菜单demo - CSDN博客 https://blog.csdn.net/github_39371177/article/details/80251211

  7. 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

    Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来.   Bootstrap提供了不少的前端UI组件.带下拉 ...

  8. jQuery制作水平多级下拉菜单

    本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <u ...

  9. Bootstrap的下拉菜单float问题

    在学习bootstrap中的下拉菜单时,遇到下面情况: <div class="dropdown"> <button class="btn btn-de ...

随机推荐

  1. Java哲学家进餐问题|多线程

    Java实验三 多线程 哲学家进餐问题: 5个哲学家共用一张圆桌,分别坐在周围的5张椅子上, 在圆桌上有5个碗和5只筷子(注意是5只筷子,不是5双), 碗和筷子交替排列.他们的生活方式是交替地进行思考 ...

  2. 设计模式-Template(行为模式) 采用 继承的方式 将算法封装在抽象基类中,在子类中实现细节。利用面向对象中的多态实现算法实现细节和高层接口的松耦合。

    以下代码来源: 设计模式精解-GoF 23种设计模式解析附C++实现源码 //Template.h class AbstractClass { public: virtual ~AbstractCla ...

  3. js 元素自动点击/执行问题

    a标签对于一下两种方式是无效的: <a href="http://qq.com">QQ</a> $('.obj').click(); $('.obj').t ...

  4. 可迭代对象(__iter__()和__next__())

    如果一个类想被用于for ... in循环,类似list或tuple那样,就必须实现一个__iter__()和__next__()方法,该方法返回一个迭代对象 然后,Python的for循环就会不断调 ...

  5. numpy的一点学习

    1.Numpy模块 NumPy是Python中的一个运算速度非常快的一个数学库,它非常重视数组.它允许你在Python中进行向量和矩阵计算,并且由于许多底层函数实际上是用C编写的,因此你可以体验在原生 ...

  6. selenium三大切换的骚操作之显性等待

    一.handle窗口切换 当点击某个元素后,会重新生成一个新的页签,但此时我们的操作仍然在原先的窗口当中,如果要在新的窗口继续操作元素,那么就要用到handle窗口切换的方法. 常用方法: windo ...

  7. 一、Mybatis配置详解

    Mybatis配置详解 XML配置文件层次结构 下图展示了mybatis-config.xml的全部配置元素 properties元素 properties是一个配置属性的元素,让我们能在配置文件的上 ...

  8. 前端框架Easyui学习积累

    前端框架Easyui学习积累 1.easyui textbox 赋值:$("#id").textbox("setValue","xx"); ...

  9. jQuery 源码分析(十七) 事件系统模块 实例方法和便捷方法 详解

    实例方法和便捷方法是指jQuery可以直接通过链接操作的方法,是通过调用$.event上的方法(上一节介绍的底层方法)来实现的,常用的如下: on(types,selector,data,fn,one ...

  10. 【面试】Java中sleep和wait的区别

    1.sleep方法是Thread类的静态方法: wait方法是Object类的成员方法 2.sleep方法使当前线程暂停执行指定的时间,让出cpu给其他线程,但是它的监控状态依然保持着,当指定的时间到 ...