2012-09-13 19 views
9

Ben http://twitter.github.com/bootstrap/customize.html#components gidip ben popovers çalışması gereken tek bileşenleri seçebilirsiniz anlıyoruz.Twitter Bootstrap'in Popover için SADECE gerekli olan nedir?

Ben indirilen dosyalar bağlamak için js ve css güncellendi. Hata almıyorum ama aynı zamanda popülasyonu alamıyorum.

Orijinal Soru:
sitemde ancak mevcut stil Bootstrap standart css dosyası çatışmalara popover eklemek istiyorum. http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css'dan, birisi sadece popolar için hangi parçalara ve parçalara ihtiyacım olduğunu söyleyebilir mi? Hangi sınıfların çağrıldığını görmek için Firebug'u kullandım ama açıkçası bir şey eksik. Boostrap Popover'ı kullanmak zorunda değilim, kullanımı kolaysa diğer eklentilere açığım.

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

Yukarıdaki CSS ben açıktı olmasaydı gerekli belirlenen budur. – HPWD

+0

Bu yüzden stillerinizi daha spesifik hale getirin, bu her zaman iyi bir fikirdir ve geçersiz kılar. – Blazemonger

+1

Sadece [kaynak kodu] 'na bakın (https://raw.github.com/twitter/bootstrap/master/less/popovers.less). Kendi '.border-radius()' işlevini yazmanız ve uygun değişkenleri eklemeniz gerekir. – Blender

cevap

7

Sen twitter önyükleme sitede (here) üzerinde indirme hakkı özelleştirebilirsiniz. Sadece popo için css almak için sadece bunu seçin ve diğer her şeyin işaretini kaldırın, sadece popover üzerinde kullanılan hem normal hem de yanıt veren sınıfları indirmenize izin verecektir.

+1

olarak bıraktım. Bunun farkında değildim. Teşekkür ederim! – HPWD

+0

Neler olduğunu anlayamadım ama geri döndüğümde tekrar denediğimde, onu işe alabiliyordum. – HPWD

+1

@dlackey Önbellek sorunları olabilir mi? Bazen tüm bu bir yenilemek alır. Her ne kadar size özelleştirilmiş indirme yolunu göstermenizi öneririm, çünkü bu şekilde tüm gerekli sınıfları (efektler için javascript eklentileri tarafından kullanılanlar bile) edineceksiniz. –

İlgili konular