Bootstrap中的dropdown、下拉选择框、dropdown-toggle

简介: 这篇文章提供了一个使用Bootstrap框架创建带有下拉菜单的标签页的HTML实例,包括如何引用Bootstrap的CSS和JavaScript文件,并展示了具体的HTML代码实现下拉选择框功能。

注意:如果您想要单独引用该插件的功能,那么您需要引用 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>
相关文章
|
前端开发 JavaScript
|
前端开发 Java 数据库连接
Spring Boot 3 整合 Mybatis-Plus 动态数据源实现多数据源切换
Spring Boot 3 整合 Mybatis-Plus 动态数据源实现多数据源切换
|
11月前
|
开发者
鸿蒙next版开发:ArkTS组件通用属性(组件标识)
在HarmonyOS 5.0中,ArkTS的组件标识(ID)为每个组件提供唯一标识符,方便开发者引用和操作组件。本文详细解读了id和key属性的使用方法,并提供了示例代码,展示了如何通过组件标识获取属性、发送事件及动态操作组件。
657 1
|
前端开发 JavaScript
|
人工智能 前端开发 Serverless
阿里云百炼应用实践系列-AI助手快速搭建
本文主要介绍如何基于阿里云百炼平台快速在10分钟为您的网站添加一个 AI 助手。我们基于阿里云百炼平台的能力,以官方帮助文档为参考,搭建了一个以便全天候(7x24)回应客户咨询的AI助手,介绍了相关技术方案和主要代码,供开发者参考。
1857 15
阿里云百炼应用实践系列-AI助手快速搭建
|
Dubbo Java 应用服务中间件
Spring Boot 调用 Dubbo 接口与编写 Dubbo 接口实战
Spring Boot 调用 Dubbo 接口与编写 Dubbo 接口实战
1467 1
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
2479 0
|
存储 NoSQL Java
Redis 从入门到精通之 排行榜应用取 TOP N 操作
Redis 从入门到精通之典型使用场景 排行榜应用,取 TOP N 操作。Redis 排行榜应用通常使用有序集合(sorted set)来实现,其中每个元素都有一个分数(score),根据分数大小来排序。
938 114
|
JSON JavaScript 前端开发
使用JavaScript和XLSX.js将数据导出为Excel文件
使用JavaScript和XLSX.js将数据导出为Excel文件
784 0
|
前端开发 开发者 容器
【Web 前端】相对定位,绝对定位,固定定位的区别?
【4月更文挑战第22天】【Web 前端】相对定位,绝对定位,固定定位的区别?