2012-09-13 32 views
9

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 jscss để 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; 
} 
+0

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

+0

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

+1

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

Trả lời

7

Bạn có thể tùy chỉnh đúng tải của bạn trên trang web bootstrap twitter (here). Để có được css chỉ cho popover chỉ cần chọn và bỏ chọn mọi thứ khác, bạn sẽ cho phép bạn tải về cả các lớp thông thường và đáp ứng được sử dụng trên popover một mình.

+1

Tôi không biết điều đó. Cảm ơn bạn! – HPWD

+0

Tôi không chắc chắn những gì đã xảy ra nhưng khi tôi quay lại và thử lại, tôi đã có thể làm cho nó hoạt động. – HPWD

+1

@dlackey Các sự cố bộ nhớ cache có thể xảy ra? Đôi khi tất cả phải mất là một làm mới. Mặc dù tôi đề nghị bạn đi qua các tuyến đường tải xuống tùy chỉnh, vì cách đó bạn sẽ có được tất cả các lớp được yêu cầu (ngay cả những lớp được sử dụng bởi các plugin javascript cho các hiệu ứng). –

Các vấn đề liên quan