부트 스트랩 3 및 jquery 문제

Visual Studio 2013에 제공되는 부트 스트랩 버전에 문제가 있거나 구현에 문제가있을 수 있습니다. getbootstrap.com에서 사용할 수있는 자료를 사용했습니다. JSFiddle here JSFiddle에서 버튼 드롭 다운을 사용할 수 있지만 툴팁은 표시되지 않습니다. 그러나 Visual Studio MVC 5 프로젝트에서 동일한 코드를 실행하면 단추 드롭 다운도 작동하지 않습니다. 버튼을 클릭해도 메뉴가 나타나지 않고 도구 설명이 표시되지 않습니다. CSS 만 보여 주지만 Javascript가 작동하지 않는 것 같습니다. Chrome 콘솔에서이 오류가 발생합니다. enter image description here 부트 스트랩 3 및 jquery 문제

다음은 내 간단한 MVC 5 페이지의 페이지 소스입니다.

<!DOCTYPE html> 

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>NewIndex</title> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> 
</head> 
<body> 


    <script src="/Scripts/jquery-1.10.2.js"></script> 


    <!-- Latest compiled and minified JavaScript --> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 

    New Index page 



    <div class="dropdown"> 
     <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu2" data-toggle="dropdown"> 
      Dropdown 
      <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> 
      <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> 

    <br /> 

    <div class="btn-group"> 
     <button type="button" class="btn btn-default">Left</button> 
     <button type="button" class="btn btn-default">Middle</button> 
     <button type="button" class="btn btn-default">Right</button> 
    </div> 

    <br /> 
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> 

    <br /> 
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> 



</body> 
</html>

편집 추가 난 당신이 내가 툴팁에서 어떤 시도를 보지 않았다 제공하는 바이올린에 the example here

출처

2014-06-06 user20358

'script' 태그를'body' 태그의 맨 끝으로 옮길 때 문제가 지속됩니까? – Matt

예. 나는 그것을 시도했다. 엔드 포지셔닝은 성능 관점에서만 볼 수 있습니다. 이 앱은 학습 앱이므로 걱정하지 않았습니다. – user20358

또한 성능이 향상되었지만 코드가 작동하지 않을 수도 있습니다. '$ (document) .ready (...') 함수로 코드를 래핑하지 않으면 코드가 DOM을로드하지 않아 코드를 실행할 수 없게됩니다. – Matt

에서이 툴팁 코드를 가지고 JSFiddle here

에서 별도로 툴팁,하지만 난 추가 하나는이 fiddle에 있습니다. 나는 당신의 <a> 태그에 tooltip 추가 :

data-toggle="tooltip" title="Some tooltip text!"

는 부트 스트랩 here에 대한 툴팁에 대해 자세히 알아보십시오.

편집 : dropdowns에 대한 문서 부트 스트랩은이 문제가 해결됩니다 제거 sr-only의 사용을 표시하지 않습니다.

출처

2014-06-06 13:16:15

버튼 드롭 다운에 대한 문제가 있습니다. 내 코드는 버튼 클래스에 'sr-only'가 있습니다. 저건 뭘위한거야? 그것을 제거하고 그것은 버튼 드롭 다운을 위해 일했습니다. 부트 스트랩 문서가 오도 된 것입니다! – user20358

이제 문서가 잘못되었거나 툴팁에 오도 된 부분을 찾아야합니다! – user20358

@ user20358,'sr-only'라고 쓰여있는 설명서에는 아무 것도 보이지 않습니다. –

부트 스트랩 3 및 jquery 문제

답변

관련 문제