html好看的下拉菜单样式

来源:互联网 发布:jessyline姐妹品牌js 编辑:程序博客网 时间:2024/04/29 21:30
<!DOCTYPE html><html lang="en"><head>    <title>Bootstrap模板</title>    <meta charset="UTF-8">    <!-- 表示根据设备的大小调整页面显示的宽度-->    <meta name="viewport" content="width=device-width,initial-scale=1">    <!--  Bootstrap需要jQuery的支持  导入jQuery开发包-->    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>    <!-- Bootstrap需要的js包-->    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>    <!--Bootstrap需要的CSS样式-->    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"></head><body><br><br><br><br><br><!--bootstrap:下拉菜单 --><div class="container">    <div class="row">        <div class="col-md-6">            <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>    </div></div></body></html>
原创粉丝点击