Bootstrap下拉单学习
<!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>
标题
在任何下拉菜单中均可通过添加标题来标明一组动作。
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
- ...
- <li role="presentation" class="dropdown-header">Dropdown header</li>
- ...
- </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>
分割线
为下拉菜单添加一条分割线，用于将多个链接分组。
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
- ...
- <li role="presentation" class="divider"></li>
- ...
- </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 类，从而禁用相应的菜单项。
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
- <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
- </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下拉单学习的更多相关文章
- 第二百四十四节，Bootstrap下拉菜单和滚动监听插件
Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...
- bootstrap 下拉菜单不显示的解决办法
bootstrap 下拉菜单不显示,最后改成如下正常显示: <div class="btn-group open"> <ul class="dropdo ...
- [Ext JS 4] 实战之多选下拉单 (带checkbox)
前言 Ext js 创建一个多选下拉单的方式很简单, 使用Ext.form.ComboBox, 设置 multiSelect 为true 就可以了. 但是如果要在每个下拉之前加上一个checkbox, ...
- Bootstrap下拉菜单
前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...
- Bootstrap下拉菜单的使用(附源码文件)--Bootstrap
1.Bootstrap下拉菜单的使用,源代码如下:(如有不当之处,还望大佬们指出哈……) <!DOCTYPE html> <html lang="en"> ...
- Bootstrap -- 下拉菜单、输入框组、导航菜单
Bootstrap -- 下拉菜单.输入框组.导航菜单 1. 下拉菜单 可以使用带有各种大小按钮的下拉菜单:.btn-lg..btn-sm 或 .btn-xs. 实现下拉菜单: <!DOCTYP ...
- JS实现下拉单的二级联动
因工作需要,做了一个下拉单的二级联动. 第一级是固定的选项,有A.B两个选项,第二级的选项随着第一级选项的变化而变化. 一开始是这样的: HTML代码 <html> <head> ...
- bootstrap下拉菜单(Dropdowns)
本章将重点讲解bootstrap下拉菜单(Dropdowns),下拉菜单是可切换的,是以列表格式显示链接的上下文菜单. <!DOCTYPE html><html><hea ...
- Bootstrap 下拉菜单和滚动监听插件
一．下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...
随机推荐
- 网狐荣耀平台找不到存储过程 'GSP_GS_LoadGameMatchItem'错误解决
把RYGameMatchDB的存储过程复制到RYGameScoreDB即可,GSP_GS_InsertGameMatchItem和GSP_GS_DeleteGameMatchItem也一样 由于存储过 ...
- C# 二维码 ThoughtWorks.QRCode.dll
ThoughtWorks.QRCode.dll: 1.ThoughtWorks.QRCode.dll 2.通过 NuGet 添加 后台代码: using System; using System.Dr ...
- VC消息传递（对话框间传递参数）
以下用一个自创的对话框类(MyMessageDlg)向视图类(MessageTestView)发送自定义消息为例,说明这两种不同方法的自定义消息的 消息传递的方法一:使用ON_MESSAGE使用ON_ ...
- 关于javaagent拦截不到File类的问题
main类: Java code ? 1 2 3 4 public static void main(String[] args) { File file = new File(& ...
- http后台json解析实例
localhost:8080/hbinterface/orderInterface/sIReverseAccept.do?bizType=4&&bnetAccount=ESBTEST2 ...
- 170817、Nginx详细配置
Nginx能做什么 nginx主要是做转发,当然也可以做静态资源文件缓存,做转发的时候,比如你有几个url,可以统一通过走nginx,然后通过nginx转发到不同的url上 1.反向代理 反向代理应该 ...
- rs.getMetadata
元数据(MetaData),即定义数据的数据.打个比方,就好像我们要想搜索一首歌(歌本身是数据),而我们可以通过歌名,作者,专辑等信息来搜索,那么这些歌名,作者,专辑等等就是这首歌的元数据.因此数据库 ...
- easyui datagrid 加载 历险记（dom中已经加载，fit:true 时改变浏览器大小是会显示出来）
(dom中已经加载,fit:true 时改变浏览器大小是会显示出来) 第一个想到的就是resize datagird 大小!可是没有用 ... 答案是加载的的div height为0导至的(//To ...
- HOJ 2985 Wavio Sequence（最长递增子序列以及其O(n*logn)算法）
Wavio Sequence My Tags (Edit) Source : UVA Time limit : 1 sec Memory limit : 32 M Submitted : 296, A ...
- MapRedece(多表关联)
多表关联: 准备数据 ******************************************** 工厂表: Factory Addressed BeijingRedStar 1 Shen ...