在使用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. 20145337《Java程序设计》第八周学习总结

    20145337<Java程序设计>第八周学习总结 教材学习内容总结 15.1日志 15.1.1日志API简介 使用日志的起点是logger类,logger实例的创建有许多要处理的要素,必 ...

  2. sphinx网址

    http://www.phperz.com/article/14/0615/95.htmlhttp://www.kuqin.com/shuoit/20141101/342963.htmlhttp:// ...

  3. Yii源码阅读笔记(二十六)

    Application 类中设置路径的方法和调用ServiceLocator(服务定位器)加载运行时的组件的方法注释: /** * Handles the specified request. * 处 ...

  4. 奥迪--A6L

    -型号:A6L -价格:42-75W -动力:1.8T/2.5L/3T -变速箱:7挡双离合/CVT无级变速/7挡双离合 -长宽高:5.04,1.87,1.47 -油箱:75L -发动机:EA888 ...

  5. [LeetCode]题解(python):118 Pascal's Triangle

    题目来源 https://leetcode.com/problems/pascals-triangle/ Given numRows, generate the first numRows of Pa ...

  6. What’s the difference between data mining and data warehousing?

    Data mining is the process of finding patterns in a given data set. These patterns can often provide ...

  7. logstash使用操作部分

    1.logstash的概念及特点.概念:logstash是一个数据采集.加工处理以及传输(输出)的工具.特点: - 所有类型的数据集中处理 - 不同模式和格式数据的正常化 - 自定义日志格式的迅速扩展 ...

  8. Python基础一. 简介、变量、对象及引用

    一.Python简介 Python是一门计算机编程语言,它是由荷兰人Guido van Rossum在1989年圣诞节期间为了打发无聊的圣诞节而编写的,作为ABC语言的继承 特性: 面向对象.解释型. ...

  9. ID3决策树的Java实现

    package DecisionTree; import java.io.*; import java.util.*; public class ID3 { //节点类 public class DT ...

  10. 淘宝开放平台Session Key有效期

    各标签session时长及RefreshToken失效时长  *Refresh失效时长为0,即该sessionkey不可刷新. 标签 授权时长 Refresh失效时长 商家后台应用 固定时长1年 0 ...