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;
}
Yukarıdaki CSS ben açıktı olmasaydı gerekli belirlenen budur. – HPWD
Bu yüzden stillerinizi daha spesifik hale getirin, bu her zaman iyi bir fikirdir ve geçersiz kılar. – Blazemonger
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