Twitter Bootstrap의 Popover에만 필요한 것은 무엇입니까?

나는 http://twitter.github.com/bootstrap/customize.html#components에 가서 popovers를 작동시키는 데 필요한 구성 요소 만 선택할 수 있음을 알고 있습니다.Twitter Bootstrap의 Popover에만 필요한 것은 무엇입니까?

js 및 css을 다운로드 한 파일에 링크 할 수 있도록 업데이트했습니다. 나는 오류가 없지만 popover를 얻지는 않습니다.

원래 질문 :
내가 내 사이트하지만 기존 스타일과 부트 스트랩의 표준 CSS 파일 충돌에 팝 오버를 추가하고 싶습니다. http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css에서 누군가가 popovers에 필요한 비트와 조각을 말해 줄 수 있습니까? 어떤 클래스가 호출되는지보기 위해 파이어 버그를 사용했지만 분명히 뭔가 빠졌습니다. 나는 Boostrap의 Popover를 사용할 필요가 없다. 사용하기 쉽다면 다른 플러그인에 개방되어있다.

CSS

/* CSS Document */ 
.popover { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1010; 
    display: none; 
    padding: 5px; 
} 
.popover.top { 
    margin-top: -5px; 
} 
.popover.right { 
    margin-left: 5px; 
} 
.popover.bottom { 
    margin-top: 5px; 
} 
.popover.left { 
    margin-left: -5px; 
} 
.popover.top .arrow { 
    bottom: 0; 
    left: 50%; 
    margin-left: -5px; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-top: 5px solid #000000; 
} 
.popover.right .arrow { 
    top: 50%; 
    left: 0; 
    margin-top: -5px; 
    border-top: 5px solid transparent; 
    border-bottom: 5px solid transparent; 
    border-right: 5px solid #000000; 
} 
.popover.bottom .arrow { 
    top: 0; 
    left: 50%; 
    margin-left: -5px; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid #000000; 
} 
.popover.left .arrow { 
    top: 50%; 
    right: 0; 
    margin-top: -5px; 
    border-top: 5px solid transparent; 
    border-bottom: 5px solid transparent; 
    border-left: 5px solid #000000; 
} 
.popover .arrow { 
    position: absolute; 
    width: 0; 
    height: 0; 
} 
.popover-inner { 
    padding: 3px; 
    width: 280px; 
    overflow: hidden; 
    background: #000000; 
    background: rgba(0, 0, 0, 0.8); 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
} 
.popover-title { 
    padding: 9px 15px; 
    line-height: 1; 
    background-color: #f5f5f5; 
    border-bottom: 1px solid #eee; 
    -webkit-border-radius: 3px 3px 0 0; 
    -moz-border-radius: 3px 3px 0 0; 
    border-radius: 3px 3px 0 0; 
} 
.popover-content { 
    padding: 14px; 
    background-color: #ffffff; 
    -webkit-border-radius: 0 0 3px 3px; 
    -moz-border-radius: 0 0 3px 3px; 
    border-radius: 0 0 3px 3px; 
    -webkit-background-clip: padding-box; 
    -moz-background-clip: padding-box; 
    background-clip: padding-box; 
} 
.popover-content p, .popover-content ul, .popover-content ol { 
    margin-bottom: 0; 
} 

.fade { 
    -webkit-transition: opacity 0.15s linear; 
    -moz-transition: opacity 0.15s linear; 
    -ms-transition: opacity 0.15s linear; 
    -o-transition: opacity 0.15s linear; 
    transition: opacity 0.15s linear; 
    opacity: 0; 
} 
.fade.in { 
    opacity: 1; 
} 

h3 { 
    /* line-height: 27px; */ 
    font-size: 18px; 
} 

p { 
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-size: 13px; 
    line-height: 18px; 
    margin: 0 0 9px; 
}

출처

2012-09-13 HPWD

위의 CSS는 명확하지 않은 경우 필요한 것으로 결정했습니다. – HPWD

당신의 스타일을 좀 더 구체적으로 만드십시오. 어쨌든 항상 좋은 아이디어이며, 오버라이드 할 것입니다. – Blazemonger

[소스 코드] (https://raw.github.com/twitter/bootstrap/master/less/popovers.less)를보십시오. 자신 만의'.border-radius()'함수를 작성하고 적절한 변수를 추가해야합니다. – Blender

당신은 트위터 부트 스트랩 사이트 (here)에서 다운로드 권한을 사용자 정의 할 수 있습니다. 그냥 popover에 대한 CSS를 얻으려면 그 것을 선택하고 그 밖의 모든 항목을 선택 취소하면 popover에만 사용되는 일반 및 반응 형 클래스를 모두 다운로드 할 수 있습니다.

출처

2012-09-13 18:49:51

나는 그 사실을 알지 못했습니다. 고맙습니다! – HPWD

나는 무슨 일이 있었는지 잘 모르겠다. 그러나 내가 다시 가서 다시 시도했을 때, 나는 그걸 작동시킬 수 있었다. – HPWD

@dlackey 캐시 문제 일 수 있습니까? 때로는 그것이 새로 고쳐집니다. 비록 당신이 사용자 정의 된 다운로드 경로를 따라 가길 원하지만, 그 방법으로 모든 필요한 클래스 (심지어 자바 스크립트 플러그인이 효과에 사용하는 클래스)를 얻을 수 있습니다. –

Twitter Bootstrap의 Popover에만 필요한 것은 무엇입니까?

답변

관련 문제