부트 스트랩에서 전환하지 않는 탭

Question

Sinatra를 사용하여 부트 스트랩 3에서 Darkly 테마를 사용 중입니다. bootstrap3을 사용하여 탭을 구현하려고합니다. 하지만 탭이 전환되지 않습니다. 즉 브라우저를 열면 활성 탭만 표시됩니다. "탭 b"를 클릭하면 URL이 변경되지만 탭의 내용은 그대로 유지되고 탭은 다른 탭으로 전환되지 않습니다. 제발 도와주세요. 부트 스트랩 잉크를 포함해야합니까? 여기에 내 Haml 코드가있다.

!!! 
%html{lang: "en"} 
    %head 
    %meta{charset: "utf-8"}/ 
    %title Job Tracker 
    %meta{content: "width=device-width, initial-scale=1", name: "viewport"}/ 
    %link{href: "./bootstrap.css", media: "screen", rel: "stylesheet"}/ 
    %link{href: "../assets/css/bootswatch.min.css", rel: "stylesheet"}/ 
    %link{:href=>"//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css", :rel=>"stylesheet"} 
    %link{href: "http://fonts.googleapis.com/css?family=Special+Elite", rel: "stylesheet", type: "text/css"}/ 
    %link{href: "https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"} 


    :css 
     .container {margin top :20px} 
     body {padding-top : 70px; font-size : 18px; text-align: justify; font-family: 'Special Elite', cursive; } 
     h1, h2, h3, h4, h5, h6 { text-align: center; font-family: 'Special Elite', cursive; } 
    :javascript 
     var _gaq = _gaq || []; 
     _gaq.push(['_setAccount', 'UA-23019901-1']); 
     _gaq.push(['_setDomainName', "bootswatch.com"]); 
     _gaq.push(['_setAllowLinker', true]); 
     _gaq.push(['_trackPageview']); 

     (function() { 
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
     })(); 



    %body 
    .container 
     %ul#myTab.nav.nav-tabs{style: "margin-bottom: 30px;"} 
     %li.active 
      %a{ href: "#a"} a 
     %li 
      %a{ href: "#b"} b 
     %li 
      %a{ href: "#c"} c 
     %li 
      %a{ href: "#d"} d 

     .tab-content 
     #a.tab-pane.fade.active.in 
      %p Tab a 
     #b.tab-pane.fade.in 
      %p Tab b 
     #c.tab-pane.fade.in 
      %p Tab c 
     #d.tab-pane.fade.in 
      %p Tab d 

    %script{src: "public/js/bootstrap.min.js"} 

Answer 1

확실하지 그 어떤 문제를 야기하지만, 나는 그러나 구조가 좋아 보인다, 당신은 모두 부트 스트랩 (3)를 포함하는 것을 알 2.3

%link{:href=>"//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css", :rel=>"stylesheet"} 
%link{href: "http://fonts.googleapis.com/css?family=Special+Elite", rel: "stylesheet", type: "text/css"}/ 
%link{href: "https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"} 

내가시나에 대해 잘 모르는 부트 스트랩합니다. 페이드 인 (fade in)없이 시도해보십시오.

또한 브라우저의 개발자 도구에서 js 오류가 있는지 확인하십시오.

희망을 올바른 방향으로 가져 오는 희망.

Answer 2

고마워요. 그것은 효과가 있었다. oly bootstrap 3을 포함해야했습니다. js.js를 추가해야합니다. 이것은 haml 코드가 변경되어 작동했습니다.

% 헤드 % 메타 {캐릭터 "UTF-8"}/ % 표제 작업 추적기 % 메타 {콘텐츠 "폭 = 기기 폭 초기 스케일 = 1"이름 "뷰포트"}/

%link{href: "./bootstrap.css", media: "screen", rel: "stylesheet"}/ 
%link{href: "../assets/css/bootswatch.min.css", rel: "stylesheet"}/ 
%link{href: "public/js/bootstrap.min.js"}/ 

%link{:href=>"//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css", :rel=>"stylesheet"}/ 
%link{href: "http://fonts.googleapis.com/css?family=Special+Elite", rel: "stylesheet", type: "text/css"}/ 

%link{href: "http://fonts.googleapis.com/css?family=Special+Elite", rel: "stylesheet", type: "text/css"}/ 
/HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries 
/[if lt IE 9] 
    <script src="../bower_components/html5shiv/dist/html5shiv.js"></script> 
    <script src="../bower_components/respond/dest/respond.min.js"></script> 


%link{href: "http://netdna.bootstrapcdn.com/bootstrap/3.1.3/css/bootstrap-theme.min.css", rel: "stylesheet"}/ 
%script{src: "http://code.jquery.com/jquery.min.js", type: "text/javascript"} 
%script{src: "http://netdna.bootstrapcdn.com/bootstrap/3.1.3/js/bootstrap.min.js"} 
%script{src: "http://code.jquery.com/jquery.min.js", type: "text/javascript"} 
%script{src: "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"}