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 ...
随机推荐
- Atom使用插件精选
小颖之前公司的大哥推荐小颖用的编辑器是atom,之前都是他给小颖了一个atom插件安装列表,小颖电脑出了点问题,所以后来小颖把那弄丢了,小颖重装atom后,就不知道要安装什么插件,所以也百度了很多,今 ...
- maven打war包的过程中，都用了哪些插件呢？
一.maven生命周期 http://ifeve.com/introduction-to-the-lifecycle/ https://maven.apache.org/guides/introduc ...
- mysql客户端工具
MySQL 数据库不仅提供了数据库的服务器端应用程序,同时还提供了大量的客户端工具程序,如 mysql,mysqladmin,mysqldump 等等,都是大家所熟悉的.虽然有些人对这些工具的功能都已 ...
- Castle DynamicProxy creation出现COMException（0x800703fa）错误的解决方案
昨天有客户反馈周末重启服务器后,几台服务器上的应用运行全部出错.大致错误内容如下: COMException(0x800703fa):试图在标记为删除的注册表项上进行不合法的操作. 通过查看异常堆栈, ...
- ConfluenceRemoteUserAuth
配置confluence使用httpHeader的方式进行登录(目标版本:atlassian-confluence-6.3.3) 前提是已经安装好了Confluence,并且前端使用apache或者n ...
- A simple guide to 9-patch for Android UI
extends:http://radleymarx.com/blog/simple-guide-to-9-patch/ While I was working on my first Android ...
- Unity3D笔记 英保通九 创建数
Unity中创建树:可以直接通过程序自动来创建树木还可以手动创建树木(本质上在我看来就是给程序自动创建的树动动”小手术“) 一.程序自动创建树木 3.1.层次视图中创建:一个平行光.摄像机.地.数并且 ...
- Spark2 Dataset DataFrame空值null,NaN判断和处理
import org.apache.spark.sql.SparkSession import org.apache.spark.sql.Dataset import org.apache.spark ...
- 7.24 IO多路复用和协程代码笔记
1. 复习 # !/usr/bin/env python # !--*--coding:utf-8 --*-- # !@Time :2018/7/23 11:49 # !@Author TrueNew ...
- WCF之通信工厂的简单使用
WCF服务端已经创建好了以后,客户端可以直接通过选择服务引用,直接生成客户端的代理类,进而调用服务端的服务.其实说到底,服务端和客户端的通行就是通过终结点,然后在服务器端和客户端建立通信通道完成数据的 ...