注意：如果您想要单独引用该插件的功能，那么您需要引用 dropdown.js。可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>Bootstrap 实例 - 带有下拉菜单的标签页</title>

	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<p>带有下拉菜单的标签页</p>

<ul class="nav nav-tabs">

	<li class="active"><a href="#">Home</a></li>

	<li><a href="#">C++</a></li>

	<li><a href="#">JAVA</a></li>

	<li><a href="#">php</a></li>

	<li class="dropdown">

		<a class="dropdown-toggle" data-toggle="dropdown" href="#">

			数据库 <span class="caret"></span>

		</a>

		<ul class="dropdown-menu">

			<li><a href="#">MySQL</a></li>

			<li><a href="#">SQL server</a></li>

			<li><a href="#">Oracle</a></li>

			<li class="divider"></li>

			<li><a href="#">分离的链接</a></li>

		</ul>

	</li>

	<li><a href="#">PHP</a></li>

</ul>

</body>

</html>

Bootstrap中的dropdown、下拉选择框、dropdown-toggle的更多相关文章

  1. jeecg3.7中DictSelect数据字典下拉选择框的用法

    1.参数 属性名                      类型        描述                                                           ...

  2. Bootstrap系列 -- 15. 下拉选择框select

    Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role=&quo ...

  3. Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）

    单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...

  4. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

  5. select2 智能补全模糊查询select2的下拉选择框使用

    我们在上篇文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架,在此基础上记录select2的使用. 应用bootstrap模板 基础项目源码下载地址为: SpringMV ...

  6. java、easyui-combotree树形下拉选择框

    最近一直在研究这个树形的下拉选择框,感觉非常的有用,现在整理下来供大家使用: 首先数据库的表架构设计和三级菜单联动的表结构是一样,(父子关系) 1.下面我们用hibernate建一下对应的额实体类: ...

  7. HTML、CSS小知识--兼容IE的下拉选择框select

    HTML <div class="s_h_ie"> <select id="Select1" disabled="disabled& ...

  8. CSS自定义select下拉选择框(不用其他标签模拟)

    今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...

  9. 背水一战 Windows 10 (105) - 通知（Toast）: 带按钮的 toast, 带输入的 toast（文本输入框，下拉选择框）

    [源码下载] 背水一战 Windows 10 (105) - 通知(Toast): 带按钮的 toast, 带输入的 toast(文本输入框,下拉选择框) 作者:webabcd 介绍背水一战 Wind ...

  10. jQuery插件——下拉选择框

    其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...

随机推荐

  1. MODBUS转PROFINET网关将电力智能监控仪表接入PROFINET网络案例

    本案例控制的主要对象是变送器的显示与报警.系统主PLC 选用西门子CPU,通过小疆智控MODBUS 转 PROFINET网关GW-PN5001采集IM300电力智能监控仪数据. 1.首先加入 GSD ...

  2. 一文带你了解webrtc基本原理（动手实现1v1视频通话）

    webrtc (Web Real-Time Communications) 是一个实时通讯技术,也是实时音视频技术的标准和框架. 大白话讲,webrtc是一个集大成的实时音视频技术集,包含了各种客户端 ...

  3. Geometrics类定义

    首先我的结构图是这样的,当然你自己喜欢怎么改都行.这个不影响,只要包含到正确的头文件就行. geometrics是几何类的基础,所有几何的碰撞都是从这个类继承下来的.书中也说的很清楚了,大家可以阅读对 ...

  4. ChromePortable-Chrome便携化、绿化软件v2.0

    ChromePortable-Chrome便携化.绿化软件v2.0-用户手册 By:ybmj@vip.163.com ,http://bbs.kafan.cn/thread-1806385-1-1.h ...

  5. 前端 | HTML5基础知识

    1 HTML定义 HTML(英文Hyper Text Markup Language的缩写)中文译为"超文本标签语言",主要是通过HTML标签对网页中的文本.图片.声音等内容进行描 ...

  6. ansible 的安装及常见模块使用

    ansible 基础keys的ssh协议配置的 特性:幂等性:一个任务执行1遍和执行n遍效果一样. ansible是个管理软件不是服务,不需要长期运行  一.通过epel源安装ansible, 1.下 ...

  7. Linux—进程管理

    Linux 进程管理 1.进程管理介绍 1.1 什么是进程? 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础. 简而言之 ...

  8. ABAQUS和UG许可证冲突问题的解决方案

    前段时间重新安装了ABAQUS,更新到了2020版本后,发现NX UG怎么突然打不开了,搜索一下,发现是两个许可证有冲突.找了很多解决方案,主要归纳为以下两种: 方法一:Lmtools修改法 先说结论 ...

  9. 第七十三篇：解决Vue组件中的样式冲突

    好家伙, 1.组件之间的样式冲突 默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 举个例子: 我们在Left.vue的组件中添加样式 <templat ...

  10. Linux之主从数据库(1+X)

    主从数据库搭建 改主机名 配置网络 配置yum源(下载mysql) 写域名解析文件 主从同步:(备份,负载(读)) 第一步:数据库的初始化,修改配置文件,定义server-id(所有节点),开启二进制 ...