注意：如果您想要单独引用该插件的功能，那么您需要引用 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. NodeJS & Dapr Javascript SDK 官方使用指南

    Dapr 是一个可移植的.事件驱动的运行时,它使任何开发人员能够轻松构建出弹性的.无状态和有状态的应用程序,并可运行在云平台或边缘计算中,它同时也支持多种编程语言和开发框架.Dapr 确保开发人员专注 ...

  2. Python 支付宝红包二维码制作步骤分享

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! 支付宝红包二维码制作步骤分享 2022. ...

  3. CM311-1a(S905L3系列)玩转桌面

    那安装了ambian后,玩转桌面(安装GUI桌面环境)有没有可能呢?那肯定啊!那桌面有什么用?当然有用,多一种玩法,可以写写代码,上网冲浪,学习linux语法什么的.而且单主机只要40左右,想想看可以 ...

  4. iommu分析之---intel iommu初始化

    intel 的iommu 是iommu框架的一个实现案例. 由于intel 的iommu 实现得比arm smmv3复杂得多,里面概念也多,所以针对intel 实现的iommu 案例的初始化部分进行一 ...

  5. RabbitMQ实现订单超时案例

    前言 人间清醒 目录 前言 业务场景 JUC(DelayQueue)方案 DelayQueue简介 JUC DelayQueue实现订单超时案例代码 案例代码 Redis Key过期事件方案 简介 R ...

  6. 计算机网络-DNS和HTTPDNS了解

    DNS 和 HTTPDNS DNS 域名解析的过程 传统 DNS 存在的问题 1.域名缓存问题 2.域名转发问题 3.出口 NAT 问题 4.DNS 域名更新问题 5.解析延迟问题 6.运营商劫持 H ...

  7. Docker0网络及原理探究

    个人观点:Docker网络通信在容器编排.集群部署中具有举足轻重的地位,(玩docker不懂docker0那就......玩不透哇)本篇分析Docker网络,并通过启动几个容器来探究Docker网络及 ...

  8. E - Road Reduction

    E - Road Reduction (atcoder.jp) 题意:一棵树n个点,m条路, di表示1-i的距离,问怎么选择边可以使得d2+...dn最短. 题解: 很明显,就是直接套最短路板子,判 ...

  9. 超详细 VS Code 配置C/C++教程

    写在前面 如果您使用的电脑内存 \(\leq 4 \texttt{GB}\),建议您使用Dev-C++,否则会到时内存占用爆满,体验感不佳. 网上的很多教程都不够详细,这里我把每一步.每一个操作都详细 ...

  10. 解决前端开发报错（SyntaxError: missing : after property id）的问题

    当使用对象初始化语法创建对象的时候,需要使用半角冒号 (:) 将属性键与属性值隔开. 1 var obj = { propertyKey: 'value' }; 冒号与等号 下面的代码会运行失败,原因 ...