옥 및 트위터 부트 스트랩이있는 드롭 다운 메뉴

Question

트위터 부트 스트랩을 사용하는 동안 옥 메뉴 내에서 드롭 다운 메뉴가 어떻게 생성되는지 알려 주실 수 있는지 궁금합니다. 나는 현재 스택으로 탐색 약을 가진 메뉴가 있습니다 그러나 나는 옥 오히려 새로운 오전 확신 할 수 없었다 그래서 부트 스트랩,

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 사용하여 시도 대신 .nav - 스택의 .dropdown_toggle 한을 어디에 거기에서 가서 어떻게 드롭 다운 메뉴를 만들 수 있습니까?

감사

Answer 1

트위터 부트 스트랩 버전 2.3.2에 대한 다음 작품. 이전 버전의 트위터를 계속 사용하지 않는 것이 좋습니다.

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

위의 경우 나는 jade 문서에 포함 된 별도의 파일 'scripts'를 사용합니다.

는 기본적으로

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 파일로 포함 시켰을 때만 효과가있었습니다. 개발자가 의도 한 것은 아니지만 버그 또는 무언가입니다.

또한 'customize'옵션 http://getbootstrap.com/2.3.2/customize.html에서 bootstrap.min.js 파일을 다운로드했습니다. 모든 .js 및 .css 파일을 하나로 자동 컴파일하여 별도로 포함시켜야하는 부트 스트랩 파일의 수를 줄입니다.

행운을 비네. (나는 초보자 였으므로 오래도록 거기에 걸어 다녀야합니다.)