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>
相关文章
element 下拉菜单el-dropdown如何更改样式?
element 下拉菜单el-dropdown如何更改样式?
953 0
|
1月前
|
搜索推荐
uview下拉菜单Dropdown整合个性化下拉
uview下拉菜单Dropdown整合个性化下拉
52 5
|
5月前
|
JavaScript
使用layui checkbox复选框样式实现单选功能
使用layui checkbox复选框样式实现单选功能
401 0
【Layui】Layui下select下拉框不显示或没有效果
【Layui】Layui下select下拉框不显示或没有效果
|
6月前
|
JavaScript 容器
模态框(Modal
模态框(Modal)是一种用于在网页上展示重要信息或功能的交互式窗口。它通常在页面顶部或页面中部弹出,覆盖在页面之上,使页面部分内容不可见,直到模态框被关闭。模态框可以包含文本、图像、表单、按钮等元素,用于向用户展示信息、获取用户输入或执行其他操作。
205 4
50zTree - 带 radio 的单选下拉菜单
50zTree - 带 radio 的单选下拉菜单
49 1
|
6月前
|
JavaScript 前端开发 Java
layui选项卡的实现
layui选项卡的实现
72 0
|
11月前
|
XML JavaScript 小程序
element-ui下拉菜单组件Dropdown
<div id='app' style="margin:50px;"> <!-- 鼠标滑过显示下拉列表 这里设置了触发的方式,注意触发方式不能使用’:’绑定,以及绑定了触发选项时的方法 --> <el-dropdown trigger="hover" @command="handleCommand" > <span class="el-dropdown-link el-input__inner" style="display:block;width:200px;"> <!-- 没有选项的时候,默认显示的
212 0