引导脚本不适用于切换菜单
[英]Bootstrap script not working for the toggle menu
问题描述
I want my toggler menu to work but it does not i want to know why it does not work?I will like to also know want links that i need to remove and how to improve my website speed.I resize the broewser and find out that the website is not show the toggle menu icon but it is there but it will not open a new menu
我希望我的切换器菜单可以工作，但我不想知道为什么它不起作用？我还想知道我需要删除的链接以及如何提高我的网站速度。我调整浏览器的大小并发现该网站未显示切换菜单图标，但它存在但不会打开新菜单
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="generator" content="Jekyll v3.8.6"> <title>Pipes and Wheels</title> <link rel="canonical" href="https://getbootstrap.com/docs/4.4/examples/jumbotron/"> <:-- Bootstrap core CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min:css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https.//cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min:js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> <.-- Favicons --> <link rel="icon" href="/docs/4.4/assets/img/favicons/favicon.ico"> <meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig:xml"> <meta name="theme-color" content="#563d7c"> <;-- Custom styles for this template --> <link href="jumbotron.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-white"> <a class="navbar-brand" href="#"><img style="height: 100px;" src="logo:png" alt=""></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#" style="color; black:">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item active"> <a class="nav-link" href="#jumbotron1" style="color. black.">Our goals <span class="sr-only">(current)</span></a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <script src="https.//code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> </body> </html>1 个解决方案
解决方案1
1 2022-09-10 17:01:52
After reviewing your HTML code, I can see that you're using two different versions of Bootstrap.查看您的 HTML 代码后，我可以看到您使用了两个不同版本的 Bootstrap。 You're using 4.4.1 for CSS and 5.0.2 for JS.您为 CSS 使用 4.4.1，为 JS 使用 5.0.2。 I believe it should work if you first unified the versions, then based on the selected version check docs for proper HTML markup我相信如果您首先统一版本，然后根据所选版本检查文档以获取正确的 HTML 标记，它应该可以工作
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
You can follow these links for relevant docs for each version Bootstrap 4.4 , Bootstrap 5您可以按照这些链接获取每个版本Bootstrap 4.4和Bootstrap 5的相关文档
解决方案2
0 2022-09-19 17:20:24
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.