在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。

一、普通下拉菜单

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">下拉菜单
<!-- 下拉箭头-->
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<!-- 菜单标题-->
<li class="dropdown-header">第一部分菜单头部</li>
<li><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<!-- 分割线-->
<li class="divider"></li>
<li class="dropdown-header">菜单选中状态</li>
<li class="active"><a tabindex="-1" href="#">选中状态</a></li>
<li class="divider"></li>
<li class="dropdown-header">菜单禁用状态</li>
<li class="disabled"><a tabindex="-1" href="#">禁用状态</a></li>
</ul>
</div>

  

1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素,示例中为:

<div class="dropdown"></div>

2、使用了一个<button>按钮做为父菜单,并且定义类名“.dropdown-toggle”和自定义“data-toggle”属性,且值必须和最外容器类名一致,此示例为:

data-toggle="dropdown"

3、下拉菜单项使用一个ul列表,并且定义一个类名为“.dropdown-menu”,此示例为:

<ul class="dropdown-menu">

4、在Bootstrap框架中的下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的<li>,并且给这个<li>添加类名“.divider”来实现添加下拉分隔线的功能。

<!-- 分割线-->
<li class="divider"></li>

5、为了让这个分组更明显,还可以给每个组添加一个头部(标题)。

<!-- 菜单标题-->
<li class="dropdown-header">第一部分菜单头部</li>

6、菜单项有当前状态“.active”和禁用状态“.disabled”。这两种状态使用方法只需要在对应的菜单项上添加对应的类名。

<li class="active"><a href="#">选中状态</a></li>
<li class="disabled"><a href="#">禁用状态</a></li>

7、对齐方式

  Bootstrap框架中下拉菜单默认是左对齐。

  如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“.pull-right”或者“.dropdown-menu-right”类名。

<ul class="dropdown-menu pull-right"  aria-labelledby="dropdownMenu1">

二、按钮下拉菜单

  按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。

  不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果。

  按钮下拉菜单其实就是普通的下拉菜单,唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”。

<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
</ul>
</div>

三、向上弹起的下拉菜单
  有些菜单是需要向上弹出的。在Bootstrap框架中专门为这种效果提代了一个类名“dropup”。

  只需要在“btn-group”上添加“.dropup”这个类名。

  如果是普通向上弹出下拉菜单,只需要在“dropdown”类名基础上追加“.dropup”类名即可。

<div class="btn-group dropup">

Bootstrap_下拉菜单的更多相关文章

  1. bootstrap_下拉菜单+头部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 初学者--bootstrap(六)组件中的下拉菜单----在路上(10)

    组件---下拉菜单 用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 p ...

  3. Bootstrap3系列:按钮式下拉菜单

    1. 基本实例 把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> < ...

  4. Bootstrap3系列:下拉菜单

    1.引用Bootstrap 示例引用的Bootstrap版本:v3.3.7 <script src="~/Scripts/jquery-2.2.4.min.js">&l ...

  5. 如何在webapp中做出原生的ios下拉菜单效果

    github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...

  6. Html5+Css3制作下拉菜单的三种方式

    一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover ...

  7. IOS第二天-新浪微博 - 添加搜索框,弹出下拉菜单 ,代理的使用 ,HWTabBar.h(自定义TabBar)

    ********HWDiscoverViewController.m(发现) - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框对象 HWSearc ...

  8. JS实现带复选框的下拉菜单

    这段时间在做后台的时候需要一个可以复选的下拉菜单,用到的是easyUI中的combo的Demo,先看看官方easyUI:http://www.jeasyui.com/documentation/ind ...

  9. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

随机推荐

  1. php中使用while遍历二维数组的方法

    <?php $contact=array( 'gao'=>array('ID'=>1,'name'=>'高某','company'=>'A公司','addr'=>' ...

  2. c++20701除法(刘汝佳1、2册第七章,暴搜解决)

    20701除法 难度级别: B: 编程语言:不限:运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述     输入正整数n,按从小到大的顺序输出所有 ...

  3. SQLiteDatabase浅谈

    (一).简介: Android通过 SQLite 数据库引擎来实现结构化数据的存储.在一个数据库应用程序中,任何类都可以通过名字对已经创建的数据库进行访问,但是在应用程序之外就不可以. SQLite  ...

  4. C语言100道经典算法

    经典的100个c算法 C语言的学习要从基础,100个经典的算法真不知道关于语言的应该发在那里,所以就在这里发了,发贴的原因有2个,第一个,这东西非常值得学习,第二个,想..........嘿嘿,大家应 ...

  5. node exports与 module.exports的区别

    你肯定非常熟悉nodejs模块中的exports对象,你可以用它创建你的模块.例如:(假设这是rocker.js文件) exports.name = function() { console.log( ...

  6. dialog弹层的方式

    1 增加一个层<div class="dialogLayer"></div>, 要不就利用伪元素 ::before 2 利用box-shadow: 0 0 ...

  7. ArcGIS Server 创建站点失败

    前期解决方案中部分解决方法汇总:①安装Server时创建的ArcGIS Server Account (操作系统级别用户,默认用户名arcgis)对创建站点时新建的站点目录arcgisserver文件 ...

  8. JavaScript 代码 优化笔记

    1. 判断某个元素是否在数组中. setCheckNodes : function (zNodes, checkIds){ var that = this; that.setAllNodesUnche ...

  9. [转]使用Gradle发布Android开源项目到JCenter

      转自:http://blog.csdn.net/maosidiaoxian/article/details/43148643 使用Gradle发布Android开源项目到JCenter 分类: G ...

  10. kafka 命令行操作

    1.创建主题(topic) bin/kafka-topics.sh --create --zookeeper m6:2181 --replication-factor 1 --partitions 1 ...