Tôi hiểu rằng tôi có thể truy cập http://twitter.github.com/bootstrap/customize.html#components và chọn chỉ các thành phần tôi cần để làm cho cửa sổ bật lên hoạt động.CHỈ cần gì cho Popover của Twitter Bootstrap?
Tôi đã cập nhật js
và css
để liên kết đến các tệp được tải xuống. Tôi không nhận được bất kỳ lỗi nào nhưng tôi cũng không nhận được popover.
Câu hỏi gốc:
Tôi muốn thêm popover vào trang web của tôi, nhưng tiêu chuẩn xung đột tập tin css của bootstrap với phong cách hiện tại của tôi. Từ http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css, ai đó có thể cho tôi biết những bit và miếng tôi cần chỉ cho các cửa sổ bật lên? Tôi đã sử dụng Firebug để xem những lớp nào được gọi nhưng tôi rõ ràng là thiếu cái gì đó. Tôi không phải sử dụng Popover của Boostrap, tôi mở các plugin khác nếu chúng dễ sử dụng.
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;
}
CSS ở trên là những gì tôi xác định tôi cần nếu điều đó không rõ ràng. – HPWD
Vì vậy, làm cho phong cách của bạn cụ thể hơn, mà luôn luôn là một ý tưởng tốt anyway, và họ sẽ ghi đè lên. – Blazemonger
Chỉ cần nhìn vào [mã nguồn] (https://raw.github.com/twitter/bootstrap/master/less/popovers.less). Bạn sẽ phải viết hàm '.border-radius()' của riêng bạn và thêm vào các biến thích hợp. – Blender