2012-09-13 14 views
9

Entiendo que puedo ir al http://twitter.github.com/bootstrap/customize.html#components y seleccionar los únicos componentes que necesito para que los popovers funcionen.¿Qué se necesita SOLO para Twitter Bootstrap's Popover?

He actualizado js y css para enlazar a los archivos descargados. No estoy recibiendo ningún error, pero tampoco estoy recibiendo el popover.

pregunta original:
me gustaría añadir el popover a mi sitio, pero estándar conflictos de archivos CSS de la rutina de carga con mi estilo existente. Desde http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css, ¿alguien me puede decir qué partes y piezas necesito solo para los popovers? Usé Firebug para ver qué clases se llaman pero obviamente me falta algo. No tengo que usar Boostrap's Popover, estoy abierto a otros complementos si son tan fáciles de usar.

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

El CSS anterior es lo que determiné que necesitaba si eso no estaba claro. – HPWD

+0

Así que haga que sus estilos sean más específicos, lo que siempre es una buena idea de todos modos, y anularán. – Blazemonger

+1

Solo mira el [código fuente] (https://raw.github.com/twitter/bootstrap/master/less/popovers.less). Tendría que escribir su propia función '.border-radius()' y agregar las variables apropiadas. – Blender

Respuesta

7

Puede personalizar su correcta descarga en el sitio de arranque de twitter (here). Con el fin de obtener el CSS solo para el popover, simplemente seleccione eso y desmarque todo lo demás, que le permitirá descargar tanto las clases regulares como las responsivas usadas solo en el popover.

+1

No estaba al tanto de eso. ¡Gracias! – HPWD

+0

No estoy seguro de lo que pasó, pero cuando volví e intenté de nuevo, pude hacerlo funcionar. – HPWD

+1

@dlackey ¿Problemas con la caché? A veces todo lo que se necesita es una actualización. Aunque te sugiero que vayas a través de la ruta de descarga personalizada, de esa manera adquirirás todas las clases requeridas (incluso aquellas usadas por los complementos de JavaScript para los efectos). –

Cuestiones relacionadas