與Jade和Twitter Bootstrap的下拉菜單

我想知道是否有人可以請讓我知道如何使用Twitter Bootstrap在Jade內創建下拉菜單。我現在有一個具有導航丸作爲層疊菜單：與Jade和Twitter Bootstrap的下拉菜單

html 
    head 
    title= title 
    link(rel='stylesheet', href='/stylesheets/style.css') 
    link(rel='stylesheet', href='/stylesheets/css/bootstrap.min.css') 
    include inc/header 
    body 
    h1.page-header= title 
    ul.nav.nav-pills.nav-stacked 
    li#home: a(href='/') Home Page 
    li#clear: a(href='/clear') Clear Blog Posts 
    li#load: a(href='/load') Load Sample Posts 
    li#list: a(href='/showContacts') Show Blog 
    li#add: a(href='/add') Add Blog Post 

    script. 
    $(document).ready(function() { 
     $(".active").removeClass("active"); 
     $("##{tab}").addClass("active"); 
    }); 

    block content

我一直在使用.dropdown嘗試和.dropdown_toggle代替.nav籌碼，但是我是相當新的玉器和引導等等不確定在哪裏從那裏去，我怎麼可以創建一個下拉菜單？

謝謝

來源

2013-07-31 brent

你用什麼版本的bootstrap？ –

版本2，我是否需要版本3？ – brent

版本2，沒關係。你在哪裏包含jQuery文件？我遇到了一個錯誤。嘗試添加頭中的jquery文件作爲第一個js文件。讓我知道這是否有幫助。 –

以下適用於twitter bootstrap版本2.3.2。我不建議你繼續使用任何舊版本的twitter。

!!! 5 
html 
head 
    link(rel='stylesheet', href='css/HOMEedit.css') 
    link(rel='stylesheet', href='css/bootstrap.css') 
    include bootstrap/inc/scripts 
body 
    .dropdown 
     a(href="#", data-toggle="dropdown").dropdown-toggle Dropdown trigger 
     ul.dropdown-menu(role='menu', aria-labelledby='dropdownMenu') 
      li 
       a(href='#', tabindex='-1') Action 
      li 
       a(href='#', tabindex='-1') Something else here 
      li.divider 
      li 
       a(href='#', tabindex='-1') Separated link 
    script. 
     $('.dropdown-toggle').dropdown()

在上面我使用了一個單獨的文件'腳本'，我包含在玉文件。

他們基本上包括

script(type='text/javascript', src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js') 
script(type='text/javascript', src='js/bootstrap.min.js') 
script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js')

請注意，順序很重要，而且在頭的地方。它只適用於我，當我包含jQuery.js作爲頂級js文件。我相信這不是開發人員打算的，而是它的一個錯誤或其他東西。

另請注意，我從'自定義'選項http://getbootstrap.com/2.3.2/customize.html下載了bootstrap.min.js文件。它會自動將所有.js和.css文件編譯爲一個，以減少需要分別包含的引導文件的數量。

祝你好運。（不久前我還是個初學者，所以在那裏掛，你會到達那裏）

來源

2013-07-31 05:09:40

嗨Sangram，謝謝你的回覆。我實現了我的代碼，但它似乎不工作。我添加到身體，所有顯示在網頁上的是「下拉觸發器」，當我點擊它時，什麼都不會發生。我確信我的jquery已經安裝了，所以腳本應該運行，但是它看起來不是下拉菜單？ – brent

上述代碼正在工作。請注意1.您使用的是bootstrap 2.3.2而不是舊版本。 2，jQuery是第一個加載到jade文件的庫。是嗎？ –

與Jade和Twitter Bootstrap的下拉菜單

回答

相關問題