<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="javascript:void(0)">Node.js</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="javascript:void(0)">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="javascript:void(0)">
数据通信/网络
</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="javascript:void(0)">分离的链接</a>
</li>
</ul>
</div>
</body>
</html>

标题

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

  1. <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
  2. ...
  3. <li role="presentation" class="dropdown-header">Dropdown header</li>
  4. ...
  5. </ul>

完整代码：

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown clearfix">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-expanded="true">
Dropdown<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Something else here</a></li>
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Separated link</a></li>
</ul>
</div>
</body>
</html>

分割线

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

  1. <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
  2. ...
  3. <li role="presentation" class="divider"></li>
  4. ...
  5. </ul>

完整代码:

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown clearfix">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
<li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Separated link</a></li>
</ul>
</div>
</body>
</html>

禁用的菜单项

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

  1. <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
  2. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
  3. <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
  4. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
  5. </ul>

完整代码：

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown clearfix"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-expanded="true">Dropdown<span class="caret"></span></button><ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4"><li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Regular link</a></li><li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Disabled link</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Another link</a></li></ul></div>
</body>
</html>

Bootstrap下拉单学习的更多相关文章

  1. 第二百四十四节，Bootstrap下拉菜单和滚动监听插件

    Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...

  2. bootstrap 下拉菜单不显示的解决办法

    bootstrap 下拉菜单不显示,最后改成如下正常显示: <div class="btn-group open"> <ul class="dropdo ...

  3. [Ext JS 4] 实战之多选下拉单 (带checkbox)

    前言 Ext js 创建一个多选下拉单的方式很简单, 使用Ext.form.ComboBox, 设置 multiSelect 为true 就可以了. 但是如果要在每个下拉之前加上一个checkbox, ...

  4. Bootstrap下拉菜单

    前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...

  5. Bootstrap下拉菜单的使用(附源码文件)--Bootstrap

    1.Bootstrap下拉菜单的使用,源代码如下:(如有不当之处,还望大佬们指出哈……) <!DOCTYPE html> <html lang="en"> ...

  6. Bootstrap -- 下拉菜单、输入框组、导航菜单

    Bootstrap -- 下拉菜单.输入框组.导航菜单 1. 下拉菜单 可以使用带有各种大小按钮的下拉菜单:.btn-lg..btn-sm 或 .btn-xs. 实现下拉菜单: <!DOCTYP ...

  7. JS实现下拉单的二级联动

    因工作需要,做了一个下拉单的二级联动. 第一级是固定的选项,有A.B两个选项,第二级的选项随着第一级选项的变化而变化. 一开始是这样的: HTML代码 <html> <head> ...

  8. bootstrap下拉菜单(Dropdowns)

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

  9. Bootstrap 下拉菜单和滚动监听插件

    一．下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...

随机推荐

  1. 题目1447：最短路(Floyd算法)

    题目链接:http://ac.jobdu.com/problem.php?pid=1447 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...

  2. linux系统中关于shell变量$*与$@的区别

    在我们初学linux系统shell时,可能会感觉$@与$*没什么区别,如下面shell脚本: #!/bin/bash# name:a.sh # echo 'this script $* is: '$* ...

  3. 使用atomic一定是线程安全的吗？

    这个问题很少遇到,但是答案当然不是.atomic在set方法里加了锁,防止了多线程一直去写这个property,造成难以预计的数值.但这也只是读写的锁定.跟线程安全其实还是差一些.看下面. @inte ...

  4. 51单片机之IIC通信原理及软件仿真

    关于IIC我觉这个博客里面说的已经够清楚了 如下图所示的写操作的时序图: 其实像这种通信协议的要求是很精确的,一点点不对都可能导致在实际工程中无法读取数据.我就是被一个应答位耽误了好久,还好最后被我发 ...

  5. pandas生成时间列表（某段连续时间或者固定间隔时间段）

    python生成一个日期列表 首先导入pandas import pandas as pd def get_date_list(begin_date,end_date): date_list = [x ...

  6. Python通过正则表达式去除(过滤)HTML标签，提取文字

    # -*- coding: utf-8-*- import re ##过滤HTML中的标签 #将HTML中标签等信息去掉 #@param htmlstr HTML字符串. def filter_tag ...

  7. Redis+Keepalived实现高可用

    使用redis哨兵可以在主服务器出现故障的时候自动切换主从,但是从服务器的IP不同于原主服务器的IP还需要在客户端手动修改IP才能生效 下面使用keepalived实现VIP自动漂移 keepaliv ...

  8. Sublime2或3配置R、Scala、Python交互式环境

    1.Sublime3的下载地址:http://www.sublimetext.com/3 2.刚刚安装的软件是没有PackageControl的,需要在新安装使用 (1)   以前没有安装过Packa ...

  9. ZOJ 2760 - How Many Shortest Path - [spfa最短路][最大流建图]

    人老了就比较懒,故意挑了到看起来很和蔼的题目做,然后套个spfa和dinic的模板WA了5发,人老了,可能不适合这种刺激的竞技运动了…… 题目链接:http://acm.zju.edu.cn/onli ...

  10. 【技术分享】Java 序列化与反序列化安全分析

    唯品会安全应急响应中心 https://mp.weixin.qq.com/s?src=11&timestamp=1546915765&ver=1317&signature=mW ...