2012-09-13 6 views
9

私はhttp://twitter.github.com/bootstrap/customize.html#componentsに行き、ポップオーバーを動作させるために必要なコンポーネントだけを選択できると思います。Twitter BootstrapのPopoverのために必要なのは何ですか?

jscssをダウンロードしたファイルへのリンクを更新しました。私は何のエラーもないが、私はまたpopoverを得ていない。

オリジナル質問:
が、私は自分のサイトが、私の既存のスタイリングとブートストラップの標準のCSSファイルの競合にポップオーバーを追加したいと思います。 http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.cssから、誰かが私がポップオーバーのために必要なビットとピースを教えてもらえますか?私はFirebugを使ってどのクラスが呼ばれているのか見てきましたが、私は明らかに何かが欠けています。私は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; 
} 
+0

上記のCSSは、明確でない場合は私が必要と判断したものです。 – HPWD

+0

あなたのスタイルをより具体的にしてください。これは常にとにかく良いアイデアであり、オーバーライドされます。 – Blazemonger

+1

[ソースコード](https://raw.github.com/twitter/bootstrap/master/less/popovers.less)を見てください。独自の '.border-radius()'関数を記述し、適切な変数を追加する必要があります。 – Blender

答えて

7

あなたは右のさえずりブートストラップサイト(here)にあなたのダウンロードをカスタマイズすることができます。単にポップオーバーのためのCSSを取得するには、それを選択して、それ以外のチェックボックスをすべてオフにします。ポップオーバーだけで使用される通常のクラスとレスポンシブクラスの両方をダウンロードできるようにします。

+1

私はそれを知らなかった。ありがとうございました! – HPWD

+0

私は何が起こったのかは分かりませんが、私が戻って再試行したとき、私はそれを働かせることができました。 – HPWD

+1

@dlackeyおそらくキャッシュの問題?時にはそれはすべてリフレッシュです。カスタマイズされたダウンロードルートを使用することをお勧めしますが、そうすることで、必要なすべてのクラス(JavaScriptプラグインでエフェクトを使用するクラスも含む)を取得することができます。 –

関連する問題