試圖通過Dropdowns使用Bootstrap

我想通過引用它的例子在我的網站中使用Bootstrap，除了某些原因，它提供的下拉示例不起作用;它只是顯示一個空白頁面。我做了什麼，爲了確保我沒有遺漏任何東西，我去了Bootstrap網站，去定製，並確保我下載了所有可能的CSS/Javascript文件，確保包含所有可能的功能/功能。試圖通過Dropdowns使用Bootstrap

這是我正在嘗試做的一個基本示例。

<html> 
<head> 
    <title></title> 
    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href=".../assets/bs/css/bootstrap-theme.min.css"> 
    <link rel="stylesheet" href=".../assets/bs/css/bootstrap.min.css"> 
</head> 
<body> 

    <div class="dropdown"> 
    <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
    <li role="presentation" class="divider"></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
    </ul> 
    </div> 

    <!-- jQuery --> 
    <script src=".../assets/js/jquery-2.1.0.min.js"></script> 
    <!-- Bootstrap Javascript --> 
    <script src=".../assets/bs/js/bootstrap.min.js"></script> 

</body> 
</html>

頁面連接到腳本，我通過Google Chrome的檢查員確認了這一點。更令人困惑的是，我能夠實現一些Bootstrap的功能，但不是全部，例如我可以使用它提供的圖標創建按鈕，但我無法創建下拉菜單。

我已經研究過這個問題，但它提供的解決方案都沒有解決它。有誰知道我錯過了什麼？

請儘快回覆，非常感謝。

幾項檢查後，我要澄清的是，是的，我使用的最最新的引導，我應該提到我通過笨顯示頁面，並在那一刻我仍然難以實現它的工作，但我會一直努力，直到我做到。

謝謝你的回覆。

來源

2014-02-06 Kurtiss

看來，引導教程不與引導文件完全兼容，在這種情況下，下拉菜單。具體來說，所提供的CSS文件無法通過網站提供的示例顯示下拉菜單，因此無論是教程需要更新還是CSS文件都可以。

目前，v2.3.2可以通過給出的示例顯示下拉菜單，這可以像這樣訪問。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">

另外，參照其他的例子，我能得到此功能，在一定程度上，甚至在使用V3.1.0。

<div class="dropdown"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">PHP</a></li> 
     <li><a href="#">MySQL</a></li> 
     <li class="divider"></li> 
     <li><a href="#">JavaScript</a></li> 
     <li><a href="#">HTML5</a></li> 
    </ul> 
</div>

所以簡而言之，要麼CSS文件需要更新，要麼教程做。

非常感謝那些回答並協助我分配問題的人。

來源

2014-02-10 14:37:55 Kurtiss

您可能正在使用舊版本的Bootstrap。

如果我沒有記錯，您需要在舊版本中單獨添加「下拉式」JavaScript文件。

我會升級到2.3.1，無法找到下拉JavaScript文件並添加。

2.3.1文檔可以在這裏找到：

http://bootstrapdocs.com/v2.3.1/docs/

否則，你在螢火蟲/ Chrome的控制檯窗口中看到什麼錯誤？

來源

2014-02-06 14:53:54

我從這裏獲得了Bootstrap文件：http：//getbootstrap.com/customize/。如果這是舊版本，我會在哪裏獲得新版本？感謝你的及時回覆。 – Kurtiss

已更新問題 –

我現在檢查一下，看看它是否有幫助。再次感謝您的及時回覆。 – Kurtiss

我試圖重現使用Bootply你的代碼，

這是引導2.3.1和jQuery 2.0.2

這似乎很好地工作。這可能是因爲jQuery的版本使用的是

Demo here

編輯

我注意到，在你的代碼，你沒有註明的doctype。

這一個是在引導文件指出：

HTML5的doctype

引導利用某些HTML元素和CSS需要使用HTML5的doctype 性能。將其包含在所有項目的開頭。

來源：http://getbootstrap.com/css/#overview

<!DOCTYPE html> 
<html lang="en"> 
    ... 
</html>

來源

2014-02-06 15:23:36 lozadaOmr

是的，你使用Bootstrap 2.3.1就像Paul提到的那樣，它可能是我使用的Bootstrap已經過時了。 – Kurtiss

然後你可以嘗試下載最新版本[這裏]（https://github.com/twbs/bootstrap/releases/download/v3.1.0/bootstrap-3.1.0-dist.zip） – lozadaOmr

感謝您的鏈接。我使用的是你給我的版本，但我無法讓它繼續工作。順便說一句，我使用的是jQuery v2.1.0，這是Bootstrap v3.1.0。 – Kurtiss

試圖通過Dropdowns使用Bootstrap

回答

相關問題