Bootstrap 下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。

如需使用下列菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <title>Bootstrap 实例 - 下拉菜单（Dropdowns）</title>
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  6.    <script src="/scripts/jquery.min.js"></script>
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <div class="dropdown">
  12.    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
  13.       data-toggle="dropdown">
  14.       主题
  15.       <span class="caret"></span>
  16.    </button>
  17.    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  18.       <li role="presentation">
  19.          <a role="menuitem" tabindex="-1" href="#">Java</a>
  20.       </li>
  21.       <li role="presentation">
  22.          <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
  23.       </li>
  24.       <li role="presentation">
  25.          <a role="menuitem" tabindex="-1" href="#">
  26.             数据通信/网络
  27.          </a>
  28.       </li>
  29.       <li role="presentation" class="divider"></li>
  30.       <li role="presentation">
  31.          <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
  32.       </li>
  33.    </ul>
  34. </div>
  35.  
  36. </body>
  37. </html>

结果如下所示：

选项

对齐

通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。下面的实例演示了这点：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <title>Bootstrap 实例 - 向右对齐下拉菜单</title>
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  6.    <script src="/scripts/jquery.min.js"></script>
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <div class="dropdown">
  12.    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
  13.       data-toggle="dropdown">主题
  14.       <span class="caret"></span>
  15.    </button>
  16.    <ul class="dropdown-menu pull-right" role="menu"
  17.       aria-labelledby="dropdownMenu1">
  18.       <li role="presentation">
  19.          <a role="menuitem" tabindex="-1" href="#">Java</a>
  20.       </li>
  21.       <li role="presentation">
  22.          <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
  23.       </li>
  24.       <li role="presentation">
  25.          <a role="menuitem" tabindex="-1" href="#">
  26.             数据通信/网络
  27.          </a>
  28.       </li>
  29.       <li role="presentation" class="divider"></li>
  30.       <li role="presentation">
  31.          <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
  32.       </li>
  33.    </ul>
  34. </div>
  35.  
  36. </body>
  37. </html>

结果如下所示：

标题

您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。下面的实例演示了这点：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <title>Bootstrap 实例 - 下拉菜单标题</title>
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  6.    <script src="/scripts/jquery.min.js"></script>
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <div class="dropdown">
  12.    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
  13.       data-toggle="dropdown">
  14.       主题
  15.       <span class="caret"></span>
  16.    </button>
  17.    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  18.       <li role="presentation" class="dropdown-header">下拉菜单标题</li>
  19.       <li role="presentation" >
  20.          <a role="menuitem" tabindex="-1" href="#">Java</a>
  21.       </li>
  22.       <li role="presentation">
  23.          <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
  24.       </li>
  25.       <li role="presentation">
  26.          <a role="menuitem" tabindex="-1" href="#">
  27.             数据通信/网络
  28.          </a>
  29.       </li>
  30.       <li role="presentation" class="divider"></li>
  31.       <li role="presentation" class="dropdown-header">下拉菜单标题</li>
  32.       <li role="presentation">
  33.          <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
  34.       </li>
  35.    </ul>
  36. </div>
  37.  
  38. </body>
  39. </html>

结果如下所示：

 

Bootstrap <基础十二>下拉菜单（Dropdowns）的更多相关文章

  1. bootstrap下拉菜单(Dropdowns)

    本章将重点讲解bootstrap下拉菜单(Dropdowns),下拉菜单是可切换的,是以列表格式显示链接的上下文菜单. <!DOCTYPE html><html><hea ...

  2. Bootstrap历练实例：下拉菜单插件方法的使用

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. BootStrap学习(2)_下拉菜单&按钮组

    一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...

  4. 简单叨叨bootstrap按钮无限层级下拉菜单的实现

    0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...

  5. Bootstrap 字体图标、下拉菜单、按钮组

    Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...

  6. Bootstrap系列 -- 34. 按钮下拉菜单

    按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的.不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果.简单点说就是点击一个按钮,会显示隐藏的下拉菜单.按钮下拉菜单其实就是普 ...

  7. Bootstrap单按钮的下拉菜单

    简介 把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了. 插件依赖 按钮式下拉菜单依赖下拉菜单插件 ,因此需要将此插件包含在你所使用的 Bootst ...

  8. bootstrap和JS实现下拉菜单

    // bootstrap下拉菜单 <div class="btn-group"> <button id="button_text" type= ...

  9. Bootstrap中的各种下拉菜单

    @*基本下拉菜单与按钮下拉菜单的样式完全一致.不过,基本的下拉菜单使用<div class="dropdown">包裹,所有要换行.而按钮式下拉菜单<div cl ...

随机推荐

  1. 剑指offer五:

    输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. /* public class ListNode { int val; ListNode next = n ...

  2. javascript高级编程3第三章：基本概念 本章内容 语法 数据类型 流控制语句 函数

    3.1 语法 ECMAScript的语法大量借鉴了C及其他类C语言的语法. 3.1.1 区分大小写 3.1.2 标识符 所谓标识符,就是值变量.函数.属性的名字,或者函数的参数.标识符可以是按照下列格 ...

  3. 2017 New Year’s Greetings from Sun Yat-sen University

    As winter turns to spring, the world around us begins to take on an air of freshness. As  2017 is fa ...

  4. PHP Cookie Session

    这些都是基础知识,不过有必要做深入了解.先简单介绍一下. 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择, 都纪 ...

  5. java 重载规则

    首先看Java重载的规则: 1.必须具有不同的参数列表: 2.可以有不同的返回类型,只要参数列表不同就可以: 3.可以有不同的访问修饰符: 4.可以抛出不同的异常: 5.方法能够在一个类中或者在一个子 ...

  6. [转]Android开源项目第二篇——工具库篇

    本文为那些不错的Android开源项目第二篇--开发工具库篇,主要介绍常用的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多 ...

  7. js 刷新窗口

    在js  方法里面 1.window.opener.location.reload()     刷新父窗口 2.window.location.reload()        该方法强迫浏览器刷新当前 ...

  8. Java学习之Iterator(迭代器)的一般用法 （转）

    迭代器(Iterator) 迭代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结构.迭代器通常被称为"轻量级"对象,因为创建它的代价 ...

  9. Linux(Ubuntu 14.04) setting up OpenGL

    1. Install c/c++ compilation package. 2. install openGL and freeGlut library sudo apt-get install me ...

  10. linux查找进程，查找僵死进程，查找僵死进程并自动杀掉

    查找进程: ps -aux | grep  flume  /  netstat -anop | grep 8080(端口号) 常规杀进程: kill  pid 查看僵死进程: ps -A -o sta ...