Boostrap 使用select和option标签实现下拉菜单

最新推荐文章于 2023-12-24 17:42:01 发布

JcDemons

最新推荐文章于 2023-12-24 17:42:01 发布

阅读量697

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_42721562/article/details/109007022

版权

本文介绍了如何在Bootstrap中使用select和option标签来创建下拉菜单，无需引入额外的JavaScript文件。通过示例代码展示了实现过程，并提到了三级联动的可能性。文章最后提及在截取下拉菜单截图时遇到的问题及解决方法。

摘要由CSDN通过智能技术生成

Boostrap 使用select和option标签实现下拉菜单

Bootstrap官网实现下拉菜单使用的是dropdown组件，下面是Bootstrap的一个示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap官方使用dropdown实现下拉菜单</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">