Bootstrap_下拉菜单

在使用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_下拉菜单的更多相关文章

bootstrap_下拉菜单+头部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
初学者--bootstrap（六）组件中的下拉菜单----在路上（10）
组件---下拉菜单用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 p ...
Bootstrap3系列：按钮式下拉菜单
1. 基本实例把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> < ...
Bootstrap3系列：下拉菜单
1.引用Bootstrap 示例引用的Bootstrap版本:v3.3.7 <script src="~/Scripts/jquery-2.2.4.min.js">&l ...
如何在webapp中做出原生的ios下拉菜单效果
github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...
Html5+Css3制作下拉菜单的三种方式
一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover ...
IOS第二天-新浪微博 - 添加搜索框，弹出下拉菜单，代理的使用，HWTabBar.h（自定义TabBar）
********HWDiscoverViewController.m(发现) - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框对象 HWSearc ...
JS实现带复选框的下拉菜单
这段时间在做后台的时候需要一个可以复选的下拉菜单,用到的是easyUI中的combo的Demo,先看看官方easyUI:http://www.jeasyui.com/documentation/ind ...
可控制导航下拉方向的jQuery下拉菜单代码
效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

随机推荐

Codeigniter 3.0 相关文档 part one
分页配置项 http://stackoverflow.com/questions/18418900/codeigniter-pagination-config-without-repeating-wi ...
关于FireDAC返回多结果集的问题
以前使用ADO, 如果SQL返回的结果集有多个可以通过NextRecordset来依次获取代码移植到FireDAC, 对于多结果集处理差不多, 但是还是有一些不一样的地方: 1.TDataSet本 ...
代理传值Delegate
代理方法中加入参数:［delegate passMeToOther:(id)self］:把自己传给别人.
C++ 扫描文件夹下所有文件
void GetFilesFromDirectory(std::vector<std::string> &files, const char *directoryPath) { s ...
C# DataGrid合并单元格
1.栏位枚举 private enum DataGridColumn { ROWNUM = , EMPID, EMPNAME, SEX, SALARY, ADRRESS, PHONE, TEL, PO ...
开发不改bug？给你支个招
在测试过程中,不免会遇到开发人员因为一些原因不想修改个别bug的情况.那一般遇到这种问题时,我们该如何去推进开发修改bug呢? 我们先来分析下到底会有哪些原因会导致开发不修改bug 1. 开发与测试对 ...
C#异步：实现一个最简单的异步
异步就是方法异步执行, 这个好理解. 异步有啥用? 以前只是听说过, 也不想计较. 不过还是碰到了需要这个东西的时候. 比如: 定时执行, 如果不用异步方法,也不用定时器,只用Thread.Sleep ...
lua语言三则特性
pack和unpack 对于一个函数, 要将其入参转换为一个表, 则pack函数合适. 对于一个表要将其转换为一个函数的入参, 则 lua原生提供的 unpack函数可以实现. do arrayDa ...
WebViewClient shouldOverrideUrlLoading 常见错误用法
需求描述在使用 WebView 的项目中,一个常见的需求是将页面内的链接跳转限制在 WebView 内,而不是使用外部浏览器打开,但 WebView 的默认行为是将链接点击事件作为 Intent 发 ...
leetcode 374
这个题目很简单,但是要注意细节和对题目的理解,一开始我把guess函数的作用理解错了,第一版代码长这样: int guessNumber(int n) { ; int high = n; while( ...