數據切換和數據目標無法正常工作BootStrap 3

Question

我正在使用BootStrap 3.4.1並且崩潰無效。 我正在使用PHPStorm，它無法識別數據切換和數據目標。 雖然他們沒有錯字。

我正在學習PluralSight的bootstrap。 嘗試來自不同網站的解決方案，包括w3schools和stackoverflow。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width , initial-scale=1" />
    <title>TESTING</title>

    <script src="../js/bootstrap.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.css">


</head>

<body>
<div class="navbar navbar-default">
    <div class="navbar-header">
        <button class="btn btn-success navbar-toggle collapsed"
                data-toggle="collapse" data-target=".navbar-collapse">
            <span class="glyphicon glyphicon-chevron-down"></span>
        </button>
    </div>
    <div id="MINE" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="nav"> <a href="Home.html">Home</a> </li>
            <li class="nav"> <a href="About.html">About</a></li>
            <li class="nav"> <a href="Books.html">Books</a></li>
            <li class="nav"> <a href="Films.html">Films</a></li>
            <li class="nav"> <a href="Contact.html">Contact</a></li>
        </ul>
    </div>
</div>

</body>
</html>

該按鈕應該能夠顯示和折疊類navbar-collapse。 但沒有回應。

在單擊按鈕之前

點擊后

這是導航欄

Answer 1

工作代碼演示

剛剛完成了你的問題。 我在你的代碼中發現了一些讓我感到不安的非常規事物。 在下面提到它們。 第一點將解決您的問題，而其他人希望您的知識。

Bootstrap需要首先加載jquery才能執行幾乎所有的動態活動（在你的情況下它會觸發toogle事件）。
最好在頭部和javascripts中加載css文件（通常在關閉正文標記之前），直到需要特定目的為止。 它使您的頁面加載到客戶端的瀏覽器更快。
我注意到你要鏈接兩個js文件。 “bootstrap.js”和“bootstrap.min.js”。 這兩個文件都有相同的javascript代碼，但后來只有縮小版本。 所以只包括其中一個。

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width , initial-scale=1" /> <title>TESTING</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" /> </head> <body> <div class="navbar navbar-inverse"> <div class="navbar-header"> <button class="btn btn-success navbar-toggle collapsed" data-toggle="collapse" data-target="#MINE"> <span class="glyphicon glyphicon-chevron-down"></span> </button> </div> <div id="MINE" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="nav"> <a href="Home.html">Home</a> </li> <li class="nav"> <a href="About.html">About</a></li> <li class="nav"> <a href="Books.html">Books</a></li> <li class="nav"> <a href="Films.html">Films</a></li> <li class="nav"> <a href="Contact.html">Contact</a></li> </ul> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.js"></script> </body> </html>

數據切換和數據目標無法正常工作BootStrap 3

問題描述

1 個解決方案

解決方案1
0 2019-05-19 17:24:31

數據切換和數據目標無法正常工作BootStrap 3

問題描述

1 個解決方案

解決方案1 0 2019-05-19 17:24:31

解決方案1
0 2019-05-19 17:24:31