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
|
8月前
|
数据安全/隐私保护 Android开发
抖音快手自动刷金币脚本,小红书QQ微博,自动刷视频看广告插件【auojs】
该脚本实现了多平台自动切换、随机滑动间隔、广告识别处理等功能模块,通过OCR+图像识别
|
4月前
|
easyexcel Java 数据库连接
如何实现百万级数据从 Excel 导入到数据库?
本文介绍百万级Excel数据导入数据库的优化方案,涵盖内存溢出、性能瓶颈与错误处理三大问题。通过EasyExcel流式读取避免内存溢出,结合多线程并发读取多个sheet,并利用生产者-消费者模式提升处理效率。采用批量插入与事务管理提高数据库写入性能,同时设计数据校验、重试机制与日志记录保障容错性,确保大规模数据导入稳定高效。
351 0
|
8月前
|
前端开发 JavaScript
JavaScript异步编程:从回调地狱到优雅解决方案
JavaScript异步编程:从回调地狱到优雅解决方案
|
前端开发 JavaScript
|
C# 数据安全/隐私保护
C#使用 MailKit 收发邮件
【10月更文挑战第15天】在C#中使用MailKit库可轻松实现邮件的发送与接收。首先需通过NuGet包管理器安装MailKit,并编写代码设置发件人、收件人、邮件主题及正文,连接邮件服务器并认证后即可发送邮件。接收邮件时,同样需连接服务器并认证,然后打开收件箱遍历读取邮件信息。整个过程需根据实际邮件服务器配置相应参数。
830 4
|
SQL Java 数据库连接
【Java笔记+踩坑】MyBatisPlus基础
MyBatisPlus简介、标准数据层开发CRUD、业务层继承IService、ServiceImpl、条件查询、LambdaQueryWrapper、id生成策略、逻辑删除、乐观锁@Version、代码生成器、ActiveRecord
【Java笔记+踩坑】MyBatisPlus基础
|
存储 算法 Java
Go 通过 Map/Filter/ForEach 等流式 API 高效处理数据
Go 通过 Map/Filter/ForEach 等流式 API 高效处理数据
|
JavaScript
【干货】JS 限制input文本框输入
【干货】JS 限制input文本框输入
|
Python
python 中__init__ ,__new__ ,__call__,__del__ 方法
python 中__init__ ,__new__ ,__call__,__del__ 方法
393 0