如何进入Bootstrap JavaScript？

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

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.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MessBox</title>
    <link href="https://fonts.googleapis.com/css?family=Baloo+Bhai&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/style/search.css" type="text/css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>

<nav class="navbar  navbar-expand-xl" id="menu">
    <form class="form-inline" action="search.php" method="post">
        <div class="md-form active-cyan active-cyan-2">
            <input class="form-control mr-3  mr-3" name="search" placeholder="Wyszukaj" aria-label="Search">
        </div>
        <button class="btn btn-outline-light my-2 my-sm-0 mr-5" type="submit" name="submitSearch">
            <i class="fas fa-search" aria-hidden="true"></i>
        </button>
    </form>
    <button class="navbar-toggler btn btn-danger" type="button" data-toggle="collapse" data-target="#mainmenu"
            aria-controls="mainmenu" aria-expanded="false" aria-label="Przełącznik nawigacji">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainmenu">
        <ul class="navbar-nav ml-auto nav-flex-icons col-xl-3 bg-f1  d-flex justify-content-end">
            <li class="nav-item dropdown" id="panelMenu">
                <a class="nav-link dropdown-toggle mr-2"
                   id="navbarDropdownMenuLink-333"
                   data-toggle="dropdown"
                   aria-haspopup="true"
                   aria-expanded="false">
                    <i class="fas fa-user mr-2"></i>
                    Panel
                </a>
                <div class="dropdown-menu dropdown-menu-right dropdown-default"
                     aria-labelledby="navbarDropdownMenuLink-333">
                    <a class="dropdown-item" href="statistics.php">Statystyki</a>
                    <a class="dropdown-item" href="account.php">Ustawienia konta</a>
                    <a class="dropdown-item" href="settings.php">Ustawienia profilu</a>
                    <a class="dropdown-item" href="logout.php">Wyloguj się</a>
                </div>
            </li>
        </ul>
    </div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
<script src="js./bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
</body>
</html>

nbcgbvbvvv b vbvbbvbbvb

答案1

得分: 0

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

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

<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MessBox</title>
    <link href="https://fonts.googleapis.com/css?family=Baloo+Bhai&amp;display=swap" rel="stylesheet">
    <!-- <link rel="stylesheet" href="assets/style/search.css" type="text/css"> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <!-- <script src="https://kit.fontawesome.com/a076d05399.js"></script> -->
</head>
<body>

<nav class="navbar  navbar-expand-xl" id="menu">
    <form class="form-inline" action="search.php" method="post">
        <div class="md-form active-cyan active-cyan-2">
            <input class="form-control mr-3  mr-3" name="search" placeholder="Wyszukaj" aria-label="Search">
        </div>
        <button class="btn btn-outline-light my-2 my-sm-0 mr-5" type="submit" name="submitSearch">
            <i class="fas fa-search" aria-hidden="true"></i>
        </button>
    </form>
    <button class="navbar-toggler btn btn-danger" type="button" data-toggle="collapse" data-target="#mainmenu"
            aria-controls="mainmenu" aria-expanded="false" aria-label="Przełącznik nawigacji">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainmenu">
        <ul class="navbar-nav mr-auto col-xl-7 bg-f2 d-flex justify-content-between">
            <li class="nav-item bg-mat">
                <a class="nav-link" href="<?= htmlEntities($this->profile->profileUrl()) ?>">
                    <i class=" fas fa-user mr-2"></i>
                    Profile
                </a>
            </li>
            <li class="nav-item bg-mat">
                <a class="nav-link" href="<?= htmlEntities($this->profile->photoUrl()) ?>">
                    <i class=" far fa-images mr-2"></i>
                    PhotoView
                </a>
            </li>
            <li class="nav-item bg-mat text-mat">
                <a class="nav-link" href="<?= htmlEntities($this->profile->notificationUrl()) ?>">
                    <i class="fas fa-bell mr-2"></i>
                    Notification
                </a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto nav-flex-icons col-xl-3 bg-f1  d-flex justify-content-end">
            <li class="nav-item dropdown" id="panelMenu">
                <a class="nav-link dropdown-toggle mr-2"
                   id="navbarDropdownMenuLink-333"
                   data-toggle="dropdown"
                   aria-haspopup="true"
                   aria-expanded="false">
                    <i class="fas fa-user mr-2"></i>
                    Panel
                </a>
                <div class="dropdown-menu dropdown-menu-right dropdown-default"
                     aria-labelledby="navbarDropdownMenuLink-333">
                    <a class="dropdown-item" href="statistics.php">Statystyki</a>
                    <a class="dropdown-item" href="account.php">Ustawienia konta</a>
                    <a class="dropdown-item" href="settings.php">Ustawienia profilu</a>
                    <a class="dropdown-item" href="logout.php">Wyloguj się</a>
                </div>
            </li>
        </ul>
    </div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
</body>
</html>

<!-- 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 -->

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;pl&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;title&gt;MessBox&lt;/title&gt;
&lt;link href=&quot;https://fonts.googleapis.com/css?family=Baloo+Bhai&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
&lt;!-- &lt;link rel=&quot;stylesheet&quot; href=&quot;assets/style/search.css&quot; type=&quot;text/css&quot;&gt; --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css&quot;
integrity=&quot;sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;!-- &lt;script src=&quot;https://kit.fontawesome.com/a076d05399.js&quot;&gt;&lt;/script&gt; --&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;nav class=&quot;navbar  navbar-expand-xl&quot; id=&quot;menu&quot;&gt;
&lt;form class=&quot;form-inline&quot; action=&quot;search.php&quot; method=&quot;post&quot;&gt;
&lt;div class=&quot;md-form active-cyan active-cyan-2&quot;&gt;
&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;
&lt;/div&gt;
&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;
&lt;i class=&quot;fas fa-search&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/form&gt;
&lt;button class=&quot;navbar-toggler btn btn-danger&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#mainmenu&quot;
aria-controls=&quot;mainmenu&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Przełącznik nawigacji&quot;&gt;
&lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;mainmenu&quot;&gt;
&lt;ul class=&quot;navbar-nav mr-auto col-xl-7 bg-f2 d-flex justify-content-between&quot;&gt;
&lt;li class=&quot;nav-item bg-mat&quot;&gt;
&lt;a class=&quot;nav-link&quot; href=&quot;&lt;?= htmlEntities($this-&gt;profile-&gt;profileUrl()) ?&gt;&quot;&gt;
&lt;i class=&quot; fas fa-user mr-2&quot;&gt;&lt;/i&gt;
Profile
&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item bg-mat&quot;&gt;
&lt;a class=&quot;nav-link&quot; href=&quot;&lt;?= htmlEntities($this-&gt;profile-&gt;photoUrl()) ?&gt;&quot;&gt;
&lt;i class=&quot; far fa-images mr-2&quot;&gt;&lt;/i&gt;
PhotoView
&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item bg-mat text-mat&quot;&gt;
&lt;a class=&quot;nav-link&quot; href=&quot;&lt;?= htmlEntities($this-&gt;profile-&gt;notificationUrl()) ?&gt;&quot;&gt;
&lt;i class=&quot;fas fa-bell mr-2&quot;&gt;&lt;/i&gt;
Notification
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class=&quot;navbar-nav ml-auto nav-flex-icons col-xl-3 bg-f1  d-flex justify-content-end&quot;&gt;
&lt;li class=&quot;nav-item dropdown&quot; id=&quot;panelMenu&quot;&gt;
&lt;a class=&quot;nav-link dropdown-toggle mr-2&quot;
id=&quot;navbarDropdownMenuLink-333&quot;
data-toggle=&quot;dropdown&quot;
aria-haspopup=&quot;true&quot;
aria-expanded=&quot;false&quot;&gt;
&lt;i class=&quot;fas fa-user mr-2&quot;&gt;&lt;/i&gt;
Panel
&lt;/a&gt;
&lt;div class=&quot;dropdown-menu dropdown-menu-right dropdown-default&quot;
aria-labelledby=&quot;navbarDropdownMenuLink-333&quot;&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;statistics.php&quot;&gt;Statystyki&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;account.php&quot;&gt;Ustawienia konta&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;settings.php&quot;&gt;Ustawienia profilu&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;logout.php&quot;&gt;Wyloguj się&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/nav&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.slim.min.js&quot;
integrity=&quot;sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo&quot;
crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js&quot;
integrity=&quot;sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49&quot;
crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&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;
&lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.slim.min.js&quot;
integrity=&quot;sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj&quot;
crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&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:

确定