Question

我正在使用Bootstrap框架制作网站。而且我注意到在激活“所谓的汉堡图标”时，滑下它下面的内容会很棒。我潜伏在stackoverflow的解决方案，但我无法在我的代码中实现任何东西

<head>
<title>| Web Programiranje |</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" type="text/css" href="css/animations.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="shortcut icon" href="http://www.paramore.net/sites/g/files/g2000001591/themes/mythemes/acq_paramore_v5/images/favicon_5.ico" type="image/vnd.microsoft.icon">

<body> 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
  <a class="navbar-brand" href="#"><span style="color:white;">Grumpy Wizard</span></a>
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="sr-only">Toggle navigation</span>
  </button>
</div>
<div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#"><b>HOME</b></a></li>
                <li><a href="about.html"><b>ABOUT US</b></a></li>
                <li><a href="products.html"><b>PRODUCTS</b></a></li>
                <li><a href="team.html"><b>TEAM</b></a></li> 
                <li><a href="contact.html"><b>CONTACT</b></a></li> 
        </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
  </ul>
</div>

<div class="container">
    <div class="jumbotron">
        <h1 class="jumbotron_header">Grumpy Wizard!</h1> 
            <p>This page will grow as we add more and more components from Bootstrap...</p>
</div>
</div>

<script type="text/javascript">
        $(document).ready(function () {
          $(".navbar-toggle").on("click", function () {
                $(this).toggleClass("active");
          });
    });

    </script>
</body>

用打开的汉堡菜单打开内容

0 个答案: