用于显示链接列表的可切换、有上下文的菜单。

对齐

B默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。

可能需要额外的定位May require additional positioning

在正常的文档流中,通过 CSS 为下拉菜单进行定位。这就意味着下拉菜单可能会由于设置了 overflow 属性的父元素而被部分遮挡或超出视口(viewport)的显示范围。如果出现这种问题,请自行解决。

不建议使用 .pull-right

从 v3.1.0 版本开始,我们不再建议对下拉菜单使用 .pull-right 类。如需将菜单右对齐,请使用 .dropdown-menu-right 类。导航条中如需添加右对齐的导航(nav)组件,请使用 .pull-right 的 mixin 版本,可以自动对齐菜单。如需左对齐,请使用 .dropdown-menu-left 类。

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>

标题

在任何下拉菜单中均可通过添加标题来标明一组动作。

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>

分割线

为下拉菜单添加一条分割线,用于将多个链接分组。

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>

禁用的菜单项

为下拉菜单中的 <li> 元素添加 .disabled 类,从而禁用相应的菜单项。

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
说明:Bootstrap下拉列表默认的情况下需要点击,因为它是为了方便移动端,但是在PC端有时候我们需要鼠标悬停就显示下拉菜单,这个时候我们就需要从写一个css方法,如下:

.navbar .nav > li:hover .dropdown-menu {
    display: block;

}

想了解更多Bootstrap的知识,请访问bootstrap中文官网http://www.bootcss.com/

Bootstrap--组件之下拉菜单的更多相关文章

  1. Bootstrap组件之下拉菜单

    .dropdown--设置父元素为下拉菜单组件,向下弹出子菜单: .dropup--设置父元素为下拉菜单组件,向上弹出子菜单: .dropdown-toggle--设置button为下拉菜单切换but ...

  2. bootstrap的下拉菜单组件与导航条

    前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...

  3. Bootstrap按钮式下拉菜单

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

  4. bootstrap多级下拉菜单

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

  5. BT之下拉菜单

    <div class="dropdown"> <button class="btn btn-default dropdown-toggle" ...

  6. Bootstrap学习js插件篇之下拉菜单

    案例 通过此插件可以为几乎所有东西添加下拉菜单,包括导航条.标签页.胶囊式按钮. 用于导航条 导航条分为四个部分.第一部分导航头,第二部分导航列,第三部分form查询表单,第四部分导航列. <n ...

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

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

  8. bootstrap悬停下拉菜单显示

    使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...

  9. Bootstrap的下拉菜单float问题

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

随机推荐

  1. 【转】 Xcode基本操作 -- 不错

    原文网址:http://blog.csdn.net/phunxm/article/details/17044337 1.Xcode IDE概览 说明:从左到右,依次是“导航窗格(Navigator)- ...

  2. 关于SharePoint 2010体系架构的几个话题

    转:http://www.cnblogs.com/chenxizhang/archive/2011/12/18/2291658.html?ADUIN=85650109&ADSESSION=13 ...

  3. log4net面面观之Repository

    转:http://itrust.cnblogs.com/archive/2006/07/17/452895.html 上回说道:Repository可以说成基于一个log4net配置节创建的log4n ...

  4. CDOJ 1071 秋实大哥下棋 线段树

    分析:运用扫描线,先从左到右扫描,用纵坐标进行建树, 随着扫描线的右向右移动.不断更新横坐标小于扫描线的车 更新的时候  在树中更新车的纵坐标的位置,把该位置的值变成该车的横坐标 线段树维护的是区间最 ...

  5. C# VS2010中,用微软自带的System.Data.OracleClient来连接Oracle数据库

    由于微软在.Net框架4.0中已经决定撤销使用System.Data.OracleClient,造成在VS2010中无法连接Oracle数据库,但它还依旧存在于.Net架构中,我们可以通过自己引用 C ...

  6. ACM2030_机内码

    /* 汉字统计 问题说明 统计给定文本文件中汉字的个数.   输入 输入文件首先包含一个整数Ñ,表示测试实例的个数,然后是Ñ段文本.   产量 对于每一段文本,输出其中的汉字的个数,每个测试实例的输出 ...

  7. Nexus5如何手动OTA更新系统到4.4.3、4.4.4及常见问题回答

    这里将记录一套行之有效的Nexus5手动升级方法,以帮助看见这篇文章的朋友成功将手头的Nexus5升级到4.4.4. 因为谷歌服务器的事,我的这次OTA更新起来走了很多弯路.我试过挂VPN等待系统来更 ...

  8. CMDB, 配置管理数据库, ITIL - ManageEngine ServiceDesk Plus

    Download Bitnami Review Board Stack click here CMDB, 配置管理数据库, ITIL - ManageEngine ServiceDesk Plus

  9. 详细讲解Hadoop源码阅读工程(以hadoop-2.6.0-src.tar.gz和hadoop-2.6.0-cdh5.4.5-src.tar.gz为代表)

    首先,说的是,本人到现在为止,已经玩过.                   对于,这样的软件,博友,可以去看我博客的相关博文.在此,不一一赘述! Eclipse *版本 Eclipse *下载 Jd ...

  10. Hibernate复合主键映射

    目录: 1. 实现方式一:将复合主键对应的属性与实体其他普通属性放在一起 2. 实现方式二:将主键属性提取到一个主键类中,实体类只需包含主键类的一个引用 在日常开发中会遇到这样一种情况,数据库中的某张 ...