如何进入Bootstrap JavaScript？

huangapple
go评论111阅读模式
英文:

How to enter bootstrap javascript?

问题

你好，我遇到了一个关于 Bootstrap 的问题。我创建了一个下拉菜单，但现在它不起作用。我使用 CDN 安装了 Bootstrap。CSS 部分运行正常，但 JavaScript 部分无法工作。我不知道问题出在哪里。如果有人能帮我解决这个问题，我将不胜感激。我不知道问题出在哪里。

英文:

Hello I have a problem with bootstrap. I created dropmenu and now it's not working. I use CDN to install bootstrap. Css bootstrap works, but javascript not working. I don't know where is problem. I will grateful if some help me resolve this problem. I don't know where is problem.

  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>MessBox</title>
  7.     <link href="https://fonts.googleapis.com/css?family=Baloo+Bhai&display=swap" rel="stylesheet">
  8.     <link rel="stylesheet" href="assets/style/search.css" type="text/css">
  9.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
  10.           integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  11.     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  12. </head>
  13. <body>
  15. <nav class="navbar  navbar-expand-xl" id="menu">
  16.     <form class="form-inline" action="search.php" method="post">
  17.         <div class="md-form active-cyan active-cyan-2">
  18.             <input class="form-control mr-3  mr-3" name="search" placeholder="Wyszukaj" aria-label="Search">
  19.         </div>
  20.         <button class="btn btn-outline-light my-2 my-sm-0 mr-5" type="submit" name="submitSearch">
  21.             <i class="fas fa-search" aria-hidden="true"></i>
  22.         </button>
  23.     </form>
  24.     <button class="navbar-toggler btn btn-danger" type="button" data-toggle="collapse" data-target="#mainmenu"
  25.             aria-controls="mainmenu" aria-expanded="false" aria-label="Przełącznik nawigacji">
  26.         <span class="navbar-toggler-icon"></span>
  27.     </button>
  28.     <div class="collapse navbar-collapse" id="mainmenu">
  29.         <ul class="navbar-nav ml-auto nav-flex-icons col-xl-3 bg-f1  d-flex justify-content-end">
  30.             <li class="nav-item dropdown" id="panelMenu">
  31.                 <a class="nav-link dropdown-toggle mr-2"
  32.                    id="navbarDropdownMenuLink-333"
  33.                    data-toggle="dropdown"
  34.                    aria-haspopup="true"
  35.                    aria-expanded="false">
  36.                     <i class="fas fa-user mr-2"></i>
  37.                     Panel
  38.                 </a>
  39.                 <div class="dropdown-menu dropdown-menu-right dropdown-default"
  40.                      aria-labelledby="navbarDropdownMenuLink-333">
  41.                     <a class="dropdown-item" href="statistics.php">Statystyki</a>
  42.                     <a class="dropdown-item" href="account.php">Ustawienia konta</a>
  43.                     <a class="dropdown-item" href="settings.php">Ustawienia profilu</a>
  44.                     <a class="dropdown-item" href="logout.php">Wyloguj się</a>
  45.                 </div>
  46.             </li>
  47.         </ul>
  48.     </div>
  49. </nav>
  50. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  51.         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
  52.         crossorigin="anonymous"></script>
  53. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
  54.         integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
  55.         crossorigin="anonymous"></script>
  56. <script src="js./bootstrap.min.js"></script>
  57. <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  58.         integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  59.         crossorigin="anonymous"></script>
  60. </body>
  61. </html>

nbcgbvbvvv b vbvbbvbbvb

答案1

得分: 0

我已经替换了这一行<script src="js./bootstrap.min.js"></script>，像这样测试并告诉我：

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-html -->
  4. <!DOCTYPE html>
  5. <html lang="pl">
  6. <head>
  7.     <meta charset="UTF-8">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <title>MessBox</title>
  10.     <link href="https://fonts.googleapis.com/css?family=Baloo+Bhai&amp;display=swap" rel="stylesheet">
  11.     <!-- <link rel="stylesheet" href="assets/style/search.css" type="text/css"> -->
  12.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
  13.           integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  14.     <!-- <script src="https://kit.fontawesome.com/a076d05399.js"></script> -->
  15. </head>
  16. <body>
  18. <nav class="navbar  navbar-expand-xl" id="menu">
  19.     <form class="form-inline" action="search.php" method="post">
  20.         <div class="md-form active-cyan active-cyan-2">
  21.             <input class="form-control mr-3  mr-3" name="search" placeholder="Wyszukaj" aria-label="Search">
  22.         </div>
  23.         <button class="btn btn-outline-light my-2 my-sm-0 mr-5" type="submit" name="submitSearch">
  24.             <i class="fas fa-search" aria-hidden="true"></i>
  25.         </button>
  26.     </form>
  27.     <button class="navbar-toggler btn btn-danger" type="button" data-toggle="collapse" data-target="#mainmenu"
  28.             aria-controls="mainmenu" aria-expanded="false" aria-label="Przełącznik nawigacji">
  29.         <span class="navbar-toggler-icon"></span>
  30.     </button>
  31.     <div class="collapse navbar-collapse" id="mainmenu">
  32.         <ul class="navbar-nav mr-auto col-xl-7 bg-f2 d-flex justify-content-between">
  33.             <li class="nav-item bg-mat">
  34.                 <a class="nav-link" href="<?= htmlEntities($this->profile->profileUrl()) ?>">
  35.                     <i class=" fas fa-user mr-2"></i>
  36.                     Profile
  37.                 </a>
  38.             </li>
  39.             <li class="nav-item bg-mat">
  40.                 <a class="nav-link" href="<?= htmlEntities($this->profile->photoUrl()) ?>">
  41.                     <i class=" far fa-images mr-2"></i>
  42.                     PhotoView
  43.                 </a>
  44.             </li>
  45.             <li class="nav-item bg-mat text-mat">
  46.                 <a class="nav-link" href="<?= htmlEntities($this->profile->notificationUrl()) ?>">
  47.                     <i class="fas fa-bell mr-2"></i>
  48.                     Notification
  49.                 </a>
  50.             </li>
  51.         </ul>
  52.         <ul class="navbar-nav ml-auto nav-flex-icons col-xl-3 bg-f1  d-flex justify-content-end">
  53.             <li class="nav-item dropdown" id="panelMenu">
  54.                 <a class="nav-link dropdown-toggle mr-2"
  55.                    id="navbarDropdownMenuLink-333"
  56.                    data-toggle="dropdown"
  57.                    aria-haspopup="true"
  58.                    aria-expanded="false">
  59.                     <i class="fas fa-user mr-2"></i>
  60.                     Panel
  61.                 </a>
  62.                 <div class="dropdown-menu dropdown-menu-right dropdown-default"
  63.                      aria-labelledby="navbarDropdownMenuLink-333">
  64.                     <a class="dropdown-item" href="statistics.php">Statystyki</a>
  65.                     <a class="dropdown-item" href="account.php">Ustawienia konta</a>
  66.                     <a class="dropdown-item" href="settings.php">Ustawienia profilu</a>
  67.                     <a class="dropdown-item" href="logout.php">Wyloguj się</a>
  68.                 </div>
  69.             </li>
  70.         </ul>
  71.     </div>
  72. </nav>
  73. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  74.         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
  75.         crossorigin="anonymous"></script>
  76. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
  77.         integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
  78.         crossorigin="anonymous"></script>
  79. <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
  80.         integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
  81. <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  82.         integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  83.         crossorigin="anonymous"></script>
  84. </body>
  85. </html>
  87. <!-- end snippet -->
英文:

I replaced this line &lt;script src=&quot;js./bootstrap.min.js&quot;&gt;&lt;/script&gt;, Test it like this and tell me :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;pl&quot;&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;UTF-8&quot;&gt;
  5. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6. &lt;title&gt;MessBox&lt;/title&gt;
  7. &lt;link href=&quot;https://fonts.googleapis.com/css?family=Baloo+Bhai&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
  8. &lt;!-- &lt;link rel=&quot;stylesheet&quot; href=&quot;assets/style/search.css&quot; type=&quot;text/css&quot;&gt; --&gt;
  9. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css&quot;
  10. integrity=&quot;sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2&quot; crossorigin=&quot;anonymous&quot;&gt;
  11. &lt;!-- &lt;script src=&quot;https://kit.fontawesome.com/a076d05399.js&quot;&gt;&lt;/script&gt; --&gt;
  12. &lt;/head&gt;
  13. &lt;body&gt;
  14. &lt;nav class=&quot;navbar  navbar-expand-xl&quot; id=&quot;menu&quot;&gt;
  15. &lt;form class=&quot;form-inline&quot; action=&quot;search.php&quot; method=&quot;post&quot;&gt;
  16. &lt;div class=&quot;md-form active-cyan active-cyan-2&quot;&gt;
  17. &lt;input class=&quot;form-control mr-3  mr-3&quot; name=&quot;search&quot; placeholder=&quot;Wyszukaj&quot; aria-label=&quot;Search&quot;&gt;
  18. &lt;/div&gt;
  19. &lt;button class=&quot;btn btn-outline-light my-2 my-sm-0 mr-5&quot; type=&quot;submit&quot; name=&quot;submitSearch&quot;&gt;
  20. &lt;i class=&quot;fas fa-search&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
  21. &lt;/button&gt;
  22. &lt;/form&gt;
  23. &lt;button class=&quot;navbar-toggler btn btn-danger&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#mainmenu&quot;
  24. aria-controls=&quot;mainmenu&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Przełącznik nawigacji&quot;&gt;
  25. &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
  26. &lt;/button&gt;
  27. &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;mainmenu&quot;&gt;
  28. &lt;ul class=&quot;navbar-nav mr-auto col-xl-7 bg-f2 d-flex justify-content-between&quot;&gt;
  29. &lt;li class=&quot;nav-item bg-mat&quot;&gt;
  30. &lt;a class=&quot;nav-link&quot; href=&quot;&lt;?= htmlEntities($this-&gt;profile-&gt;profileUrl()) ?&gt;&quot;&gt;
  31. &lt;i class=&quot; fas fa-user mr-2&quot;&gt;&lt;/i&gt;
  32. Profile
  33. &lt;/a&gt;
  34. &lt;/li&gt;
  35. &lt;li class=&quot;nav-item bg-mat&quot;&gt;
  36. &lt;a class=&quot;nav-link&quot; href=&quot;&lt;?= htmlEntities($this-&gt;profile-&gt;photoUrl()) ?&gt;&quot;&gt;
  37. &lt;i class=&quot; far fa-images mr-2&quot;&gt;&lt;/i&gt;
  38. PhotoView
  39. &lt;/a&gt;
  40. &lt;/li&gt;
  41. &lt;li class=&quot;nav-item bg-mat text-mat&quot;&gt;
  42. &lt;a class=&quot;nav-link&quot; href=&quot;&lt;?= htmlEntities($this-&gt;profile-&gt;notificationUrl()) ?&gt;&quot;&gt;
  43. &lt;i class=&quot;fas fa-bell mr-2&quot;&gt;&lt;/i&gt;
  44. Notification
  45. &lt;/a&gt;
  46. &lt;/li&gt;
  47. &lt;/ul&gt;
  48. &lt;ul class=&quot;navbar-nav ml-auto nav-flex-icons col-xl-3 bg-f1  d-flex justify-content-end&quot;&gt;
  49. &lt;li class=&quot;nav-item dropdown&quot; id=&quot;panelMenu&quot;&gt;
  50. &lt;a class=&quot;nav-link dropdown-toggle mr-2&quot;
  51. id=&quot;navbarDropdownMenuLink-333&quot;
  52. data-toggle=&quot;dropdown&quot;
  53. aria-haspopup=&quot;true&quot;
  54. aria-expanded=&quot;false&quot;&gt;
  55. &lt;i class=&quot;fas fa-user mr-2&quot;&gt;&lt;/i&gt;
  56. Panel
  57. &lt;/a&gt;
  58. &lt;div class=&quot;dropdown-menu dropdown-menu-right dropdown-default&quot;
  59. aria-labelledby=&quot;navbarDropdownMenuLink-333&quot;&gt;
  60. &lt;a class=&quot;dropdown-item&quot; href=&quot;statistics.php&quot;&gt;Statystyki&lt;/a&gt;
  61. &lt;a class=&quot;dropdown-item&quot; href=&quot;account.php&quot;&gt;Ustawienia konta&lt;/a&gt;
  62. &lt;a class=&quot;dropdown-item&quot; href=&quot;settings.php&quot;&gt;Ustawienia profilu&lt;/a&gt;
  63. &lt;a class=&quot;dropdown-item&quot; href=&quot;logout.php&quot;&gt;Wyloguj się&lt;/a&gt;
  64. &lt;/div&gt;
  65. &lt;/li&gt;
  66. &lt;/ul&gt;
  67. &lt;/div&gt;
  68. &lt;/nav&gt;
  69. &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.slim.min.js&quot;
  70. integrity=&quot;sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo&quot;
  71. crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  72. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js&quot;
  73. integrity=&quot;sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49&quot;
  74. crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  75. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  76. &lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.slim.min.js&quot;
  77. integrity=&quot;sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj&quot;
  78. crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  79. &lt;/body&gt;
  80. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年1月9日 16:43:27
  • 转载请务必保留本文链接：https://go.coder-hub.com/75054839.html
  • css
  • html
  • javascript
  • php
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定