我正在制作一个Angular应用程序,并使用Bower安装了所有的lib。当我检查控制台时,所有的表/脚本都正确加载。我还在脑海中定义了bootstrap和jQuery。我从Bootstrap的网站上复制了代码。
我遇到的问题是汉堡菜单从来没有出现过。这些链接和屏幕变大时的链接完全一样。另一个问题是,即使网站很大,nav_collapsediv中也不会显示任何内容。似乎有一个崩溃的问题,这使得两者都不起作用。建议吗?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jay - Web Developer</title>
<!-- For Angular Routing -->
<base href='/'>
<!-- CSS -->
<link rel="stylesheet" href="assets/libs/bootstrap/dist/css/bootstrap.min.css">
<!-- JS -->
<script src="assets/libs/angular/angular.min.js"></script>
<script src="assets/libs/angular-route/angular-route.min.js"></script>
<script src="assets/libs/angular-animate/angular-animate.min.js"></script>
<script src="assets/libs/jquery/dist/jquery.min.js"></script>
<script src="assets/libs/bootstrap/dist/js/bootstrap.js"></script>
<!-- APP -->
<script src="app/controllers/mainCtrl.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/app.js"></script>
</head>
<body ng-app="jayPortfolio" ng-controller="mainController as main">
<!-- NAVBAR -->
<header>
<div class="navbar navbar-default">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar">About</span>
<span class="icon-bar">Portfolio</span>
<span class="icon-bar">Experience</span>
<span class="icon-bar">Contact</span>
</a>
<a class="brand" href="#">JAY</a>
<div class="nav-collapse collapse">
work please
</div>
</div>
</div>
</div>
</header>
</body>
</html>
导航栏的标记不正确。标记应该如下所示:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Huisje Thuisje</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#contact">Contact</a></li>
<!-- Put here your menu items -->
</ul>
</div --><!--/.navbar-collapse -->
</div>
</nav>
在ul
元素中放置菜单项。这应该能奏效。
在我的情况下,我新创建的laravel项目汉堡包菜单不工作,所以转到https://getbootstrap.com/docs/4.4/getting-started/introduction/并复制3js链接并添加到您的标题。
从bootstrap站点复制Javascript链接并粘贴到HTML文件中。它会工作得很好!
这个网站,这是关于汉堡菜单图标的帮助。URL为https://mdbootstrap.com/docs/b4/jquery/navigation/hamburger-menu/。它向您展示了一个完整的编码,这可能会有所帮助。您可能需要更改汉堡包菜单图标的颜色,以使其在深色中可见。我输入
<nav class="navbar navbar-light light-blue lighten-4">.
对于span标签,我输入
<span class="navbar-toggler-icon navbar-dark"></span>
因为当你输入navbar-dark时,汉堡包菜单图标显示浅色,反之亦然。
container
部分的语法更像这样:
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">JAY</a>
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Experience</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
所以对我来说,我有同样的问题,问题是我使用的cdns是:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
,这是ajax工作所必需的这是在页脚部分所以我把这个留在这里,让ajax工作,并在标题部分有以下脚本cdns,引导折叠工作正常:
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Boostrap 5用户
1.JS链接不包含
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
2。<div class='collapse navbar-collapse'>
内未列出的导航栏元素
3。如果没有div的id
与aria-control
值匹配,尽管有JS链接,nav-items将不会在下拉菜单中显示。