课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

下拉框就是出不来，jquery换了也没用

来源：3-4 编程练习

qq_启航_11

2018-04-02 16:18

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Hello World</title>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">


</head>


<body>

    <nav class="navbar navbar-default navbar-fixed-top">

        <div class="container">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#context">

                    <span class="sr-only">Toggle navigation</span> 

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <a class="navbar-brand" href="#">某管理系统</a>

            </div>

            <div class="collapse navbar-collapse" id="context">

                <ul class="nav navbar-nav">

                    <li class="active">

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">首页</a>

                    </li>

                    <li class="dropdown">

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">功能<span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu">

                            <li class="dropdown-header">业务功能</li>

                            <li><a href="#">信息建立</a></li>

                            <li><a href="#">信息查询</a></li>

                            <li><a href="#">信息管理</a></li>

                            <li class="divider"></li>

                            <li class="dropdown-header">系统功能</li>

                            <li><a href="#">设置</a></li>

                        </ul>

                    </li>

                    <li>

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">帮助</a>

                    </li>

                </ul>

                <form class="navbar-form navbar-right" role="search">

                    <div class="form-group">

                        <input type="text" placeholder="用户名" class="form-control">

                        <input type="password" placeholder="密码" class="form-control">

                    </div>

                    <button type="submit" class="btn btn-default">登录</button>

                </form>

                

            </div>

        </div>

        

    </nav>


<script src= "http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>

<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


</body>

</html>


写回答 关注

3回答

  • 慕码人6443887
    2018-11-15 17:22:26

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Hello World</title>

        <!-- Bootstrap -->

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

        <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

        <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

        <!--[if lt IE 9]>

          <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

          <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

        <![endif]-->

    </head>

    <body>

        <nav class="navbar navbar-default">

          <div class="container">

            <!-- Brand and toggle get grouped for better mobile display -->

            <div class="navbar-header">

              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

                <span class="sr-only">Toggle navigation</span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

              </button>

              <a class="navbar-brand" href="#">某菜单管理系统</a>

            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

              <ul class="nav navbar-nav">

                <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>

                <li class="dropdown">

                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">功能 <span class="caret"></span></a>

                  <ul class="dropdown-menu">

                     <li class="dropdown-header">业务功能</li>

                    <li><a href="#">信息建立</a></li>

                    <li><a href="#">信息查询</a></li>

                    <li><a href="#">信息管理</a></li>

                    <li role="separator" class="divider"></li>

                    <li class="dropdown-header">系统功能</li>

                    <li><a href="#">设置</a></li>

                  </ul>

                </li>

                <li><a href="#">帮助</a></li>

              </ul>

              <form class="navbar-form navbar-left">

                <div class="form-group">

                  <input type="text" class="form-control" placeholder="用户名">

                </div>

                <div class="form-group">

                  <input type="password" class="form-control" placeholder="密码">

                </div>

                <button type="submit" class="btn btn-default">登录</button>

              </form>

            </div><!-- /.navbar-collapse -->

          </div><!-- /.container-fluid -->

        </nav>

        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    </body>

    </html>

    0 0
  • 面包与理想
    2018-05-29 10:10:26

    代码应该是可以的，看看是不是浏览器之类有问题

    3 0

    慕码人453... 回复面包与理想

    好的 谢谢

    2018-09-12 08:58:22

    共 3 条回复 >

  • 小虎头的小骨头
    2018-04-02 19:29:51

    en sdfsd

    0 0

基于bootstrap的网页开发

Bootstrap框架的基础教程，学会用Bootstrap前端框架搭建网页

187668 学习 · 734 问题

查看课程

相似问题

为什么下拉菜单显示不出来？

回答 1

下拉菜单点了之后没有下拉是什么问题？

回答 2

求帮忙看一下为什么下拉菜单出不来？

回答 1

为什么导航条里下拉菜单点不出来？

回答 3

下拉菜单在最新版本的bootstrap中显示不出来是什么原因

回答 1

打开慕课网App查看更多内容