2012-12-21 4 views
5

안녕하세요, 저는 부트 스트랩을 사용하여 드롭 다운 버튼을 만들려고합니다. 하지만 그것은 정확히 나올 것 같지 않니?부트 스트랩/드롭 다운 버튼

<div class="btn-group"> 
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
     Action 
     <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Foo</a></li> 
     <li><a href="#">Bar</a></li> 
    </ul> 
</div> 

jsfiddle 여기 http://jsfiddle.net/UrgP8/

어떤 아이디어인가?

감사합니다,

+1

자바 스크립트 문제처럼 보입니다. 우선 bootstrap-dropdown.js와 bootstrap.min.js를 포함해야하지만, 그 중 하나만 필요합니다.하지만 피들의 문제는 해결되지 않습니다. – Agush

답변

7

당신은 실질적으로 HTML보기로 전체 부트 스트랩 HTML 소스 무엇 붙여 jsfiddle으로 외부 자원의 상당한 양을로드.

더 많은 베어 본 (bare-bones) 버전 은 외부 파일을 3 개만로드합니다. jQuery를이 jsFiddle의 프레임 워크 패널을 통해로드되는 기본 HTML이 동일

http://jsfiddle.net/BqKNV/65/

(SO 나 코드를주지 않고 게시하지 것이다 ...)

<div class="dropdown btn-group"> 
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
     Action 
     <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Foo</a></li> 
     <li><a href="#">Bar</a></li> 
    </ul> 
</div> 

주, 부트 스트랩

//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
// netdn : CSS와 JS는 BootstrapCDN를 통해로드 a.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js

당신이 페이지로이 HTML을 저장하고 브라우저에서 실행하면 어떻게됩니까

?

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <title> - jsFiddle demo</title> 
     <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script> 
     <script type='text/javascript' src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script> 
     <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"> 
    </head> 
    <body> 
     <div class="dropdown btn-group"> 
     <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
      Action 
      <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Foo</a></li> 
      <li><a href="#">Bar</a></li> 
     </ul> 
     </div> 
    </body> 
    </html> 
+0

응답. 그것들은 jsfiddle에서 모두 작동하는 것으로 보이지만 브라우저에서 직접 시도하면 바로 같은 문제가 발생합니다. – felix001

+0

@ felix001 - 당신이 의미하는 것이 확실하지 않습니다. jsfiddle에있는 몇 가지 항목을 제거하고 코드를 붙여 넣었습니다. 브라우저에서 실행하면 어떻게됩니까? – mg1075

+0

많은 감사합니다. 이제는 js 스크립트를로드하는 방법이 생각납니다. – felix001

4

여러분의 피델에서 문제가있는 것으로 확인되었습니다.

그것은 당신이로드되어있다 :

<link href="http://flip.hr/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 

나는 그것을 변경 :

<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> 

그리고 기본적으로 그것을 해결. 당신은 여기에서 볼 수 있습니다


하지만 그 외에 http://jsfiddle.net/6hPMb/1/, 내가 코멘트에서 언급 한 문제가 계속, 당신은 모두 부트 스트랩-dropdown.jsbootstrap.min.js

를로드 서

하나만 사용해야합니다.

관련 문제