基于bootstrap架构的下拉菜单

最新推荐文章于 2023-02-01 17:54:33 发布

原创最新推荐文章于 2023-02-01 17:54:33 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #下拉菜单

学习专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何使用Bootstrap框架和jQuery库在网页中创建一个具有城市选项的下拉菜单，包括所需的js和css文件引入，以及具体的jsp代码实现。

1、需要的js文件

<script type="text/javascript" src="<c:url value="/text/javascript/jquery-1.8.0.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/text/lib/bootstrap/js/bootstrap.min.js"/>"></script>
<link rel="stylesheet" href="<c:url value="/style/bootstrap/css/bootstrap.min.css"/>">
<link rel="stylesheet" href="<c:url value="/style/bootstrap/css/bootstrap-theme.min.css"/>">

2、jsp文件

<div class="col-md-3">
    <div class="input-group">
        <span class="input-group-btn">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">选择所在的城市<span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li>北京</li>
                <li>上海</li>
                <li>深圳</li>
                <li>广州</li>
            </ul>
        </span>
        <input type="text" class="form-control" placeholder="请选择所在的城市">
    </div>
</div>