2012-09-13 12 views
9

Capisco che posso andare a http://twitter.github.com/bootstrap/customize.html#components e selezionare solo i componenti di cui ho bisogno per far funzionare i popover.Cosa serve SOLO per Twitter Popup di Bootstrap?

Ho aggiornato il js e css per il collegamento ai file scaricati. Non ricevo errori, ma non ho nemmeno il popover.

domanda iniziale:
mi piacerebbe aggiungere il popover al mio sito, ma i conflitti di file CSS standard del bootstrap con la mia styling esistente. Da http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css, qualcuno può dirmi quali pezzi e pezzi ho bisogno solo per i popover? Ho usato Firebug per vedere quali sono le classi chiamate, ma ovviamente mi manca qualcosa. Non devo usare il popover di Boostrap, sono aperto ad altri plugin se sono facili da usare.

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

Il CSS sopra è quello che ho determinato che mi serviva se non fosse chiaro. – HPWD

+0

Quindi, rendi i tuoi stili più specifici, che comunque è sempre una buona idea e che sostituiranno. – Blazemonger

+1

Basta guardare il [codice sorgente] (https://raw.github.com/twitter/bootstrap/master/less/popovers.less). Dovresti scrivere la tua funzione '.border-radius()' e aggiungere le variabili appropriate. – Blender

risposta

7

È possibile personalizzare il proprio download sul sito di bootstrap twitter (here). Per ottenere il css solo per il popover è sufficiente selezionarlo e deselezionare tutto il resto, che ti permetterà di scaricare sia le classi regolari che quelle reattive utilizzate sul solo popover.

+1

Non ne ero consapevole. Grazie! – HPWD

+0

Non sono sicuro di cosa sia successo ma quando sono tornato e ho provato di nuovo, sono riuscito a farlo funzionare. – HPWD

+1

@dlackey Problemi di cache forse? A volte basta un aggiornamento. Anche se ti suggerisco di passare attraverso il percorso di download personalizzato, in questo modo acquisirai tutte le classi richieste (anche quelle usate dai plugin javascript per gli effetti). –