为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/Bootstrap

/基于bootstrap的网页开发

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

<!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>


qq_启航_11

2018-04-02

源自：基于bootstrap的网页开发  3-4

关注问题 我要回答
1253
操作
收起

正在回答

4 回答

慕码人6443887
2018-11-15

<!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 回复 有任何疑惑可以回复我~
收起回答
面包与理想
2018-05-29

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

0 回复 有任何疑惑可以回复我~
收起回答
#1

慕码人453418

浏览器有问题该怎么办？
2018-09-11 回复 有任何疑惑可以回复我~
#2

面包与理想 回复 慕码人453418

想办法解决浏览器的兼容问题，我也才在学习
2018-09-12 回复 有任何疑惑可以回复我~
#3

慕码人453418 回复 面包与理想

好的 谢谢
2018-09-12 回复 有任何疑惑可以回复我~
小虎头的小骨头
2018-04-02

en sdfsd

0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
基于bootstrap的网页开发
  • 参与学习       187669    人
  • 解答问题       734    个

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

进入课程

本课相似问答

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

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

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

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

1 回答下拉菜单在最新版本的bootstrap中显示不出来是什么原因
搜索更多本课相关问答

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信