Bootstrap 3.0.2响应式菜单

时间:2013-11-16 16:17:45

标签: twitter-bootstrap responsive-design twitter-bootstrap-3 navbar

我有这个代码,我无法找出它为什么不起作用。 桌面版似乎工作正常,但当我在响应单元上使用它时,它不会打开菜单。这是我的代码。

我希望你们中的一些人可以帮助我,因为我正在尝试启动这个小社区,如果响应式菜单不起作用,它就不会那么好。谢谢!

<!DOCTYPE html>
<html>
  <head>
    <title>e3w Networks</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bignav.css" rel="stylesheet" media="screen">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
<body background="mcpic.png">
<script src="js/jquery.js"></script>
<div class="navbar-wrapper">
<div class="container">
<p></p>
<nav class="navbar navbar-default navbar-static">
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
            <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="index.html"><img src="e3wlogo.png" width="120" "height="44"></a>
    </div>


  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span> Home</a></li>
      <li><a href="shop.html"><span class="glyphicon glyphicon-shopping-cart"></span> Shop</a></li>
            <li class="dropdown dropdown-large">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-list"></span> Teams<b class="caret"></b></a>

                <ul class="dropdown-menu dropdown-menu-large row">
                    <li class="col-sm-3">
                        <ul>
                            <li class="dropdown-header">LoL Teams</li>
                            <li><a href="http://www.e3w.dk/dwa">dwA.</a></li>
                            <li><a href="#">Button toolbar</a></li>
                            <li><a href="#">Sizing</a></li>
                            <li><a href="#">Nesting</a></li>
                            <li class="divider"></li>
                            <li class="dropdown-header">Minecraft</li>
                            <li><a href="http://www.e3w.dk/dwa">dwA.</a></li>
                            <li><a href="#">Button toolbar</a></li>
                            <li><a href="#">Sizing</a></li>
                            <li><a href="#">Nesting</a></li>
                        </ul>
                    </li>
                    <li class="col-sm-3">
                        <ul>
                            <li class="dropdown-header">CS:GO Teams</li>
                            <li><a href="http://www.e3w.dk/dwa">dwA.</a></li>
                            <li><a href="#">Button toolbar</a></li>
                            <li><a href="#">Sizing</a></li>
                            <li><a href="#">Nesting</a></li>
                            <li class="divider"></li>
                            <li class="dropdown-header">CS:S Teams</li>
                            <li><a href="http://www.e3w.dk/dwa">dwA.</a></li>
                            <li><a href="#">Button toolbar</a></li>
                            <li><a href="#">Sizing</a></li>
                            <li><a href="#">Nesting</a></li>
                        </ul>
                    </li>
                    <li class="col-sm-3">
                        <ul>
                            <li class="dropdown-header">asdad</li>
                            <li><a href="#">Basic example</a></li>
                            <li><a href="#">Sizing</a></li>
                            <li><a href="#">Sizing</a></li>
                            <li><a href="#">Sizing</a></li>
                            <li class="divider"></li>
                            <li class="dropdown-header">Navs</li>
                            <li><a href="#">Tabs</a></li>
                            <li><a href="#">Pills</a></li>
                            <li><a href="#">Justified</a></li>
                        </ul>
                    </li>
                    <li class="col-sm-3">
                        <ul>
                            <li class="dropdown-header">Information</li>
                            <li class="disabled"><p class="navbar-text">If you want your team in this game group<br \> section please click on the "Add your team" button.<br \>When you click and fill the form, you also need to<br \> agree to our policy/rules</p></li>

                            <li class="disabled"><a href="#"><button type="button" class="btn  btn-block btn-group-sm">
  <span class="glyphicon glyphicon-plus"></span> Add your team
</button></a></li>
                        </ul>
                    </li>
                </ul>

            </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
          <li class="divider"></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>

        </ul>
    <ul class="nav navbar-nav navbar-right">
      <li data-toggle="modal" data-target="#myModal"><a href="#"><span class="glyphicon glyphicon-thumbs-up"></span> Help us</a></li>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <div class="modal-title" id="myModalLabel"><!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Overview</a></li>
  <li><a href="#donate" data-toggle="tab">Donation</a></li>
  <li><a href="#youtube" data-toggle="tab">YouTube</a></li>
  <li><a href="#facebook" data-toggle="tab">Facebook</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">You can help us in many ways.</div>
  <div class="tab-pane" id="donate">donate</div>
  <div class="tab-pane" id="youtube">subscribe</div>
  <div class="tab-pane" id="facebook">asdasd<p>sada</p></div>
</div></div>
      </div>

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li class="disabled"><a href="#">We're sorry, but the login form isn't coded yet.</a></li>
        </ul>
      </li>
    </ul>
    </div><!-- /.nav-collapse -->
</nav>
  <div class="well"><p>So far from done</p><div class="progress progress-striped active">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 17%">
    <span class="sr-only">17% Complete (success)</span></div>
  </div><div class="row">
</div><div class="well">
      <table border="0">
<tr width="70%">
<td><div style="position:relative;width:280px;">
<a class="pull-left" style="position:relative; margin: 4px 5px 0 0;">
<img class="avatar" src="https://minotar.net/avatar/MarcusHegelund/32.png" player="MarcusHegelund" size="32" width="32" height="32" style="width: 32px; height: 32px; vertical-align: bottom;">
</a>
<a href="#" style="color: red"><b>Marcus</b></a>
<span class="label" style="background-color: green; color: white">Owner</span>
<span class="label" style="background-color: purple; color: white">Developer</span>
<span class="label" style="background-color: #FA0; color: white">Staff</span>
<p><i>Posted Nov. 16'th, 2013</i></p>
</div></td>
<td><p>hey</p><p>hey</p><p>hey</p><p>hey</p></td>
</table>
</div></div>
<nav class="navbar navbar-default navbar-static-bottom" role="navigation">
<p class="navbar-text">&copy Copyright 2011-2013, e3w Networks.</p>
<p class="navbar-text navbar-right"><a href="http://www.enaxy.dk">Enaxy</a></p>
<p class="navbar-text navbar-right"><a href="http://www.enaxy.dk">Enaxy</a></p>
</nav>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

1 个答案:

答案 0 :(得分:3)

为什么要使用两次jquery文件?,例如

    <script src="js/jquery.js"></script>
<script src="https://code.jquery.com/jquery.js"></script>

并且有两个身体

<body background="mcpic.png">

更改以下代码data-target=".navbar-collapse"

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">