Agregue una pequeña superposición al contenido de la página, al igual que los efectos en el iPad, agregando información adicional a los elementos de la página.
Dependencias de complementos
El cuadro emergente depende del complemento de información sobre herramientas, por lo que el complemento de información sobre herramientas debe cargarse primero.
Función de adición selectiva
Para las consideraciones de rendimiento, la API de atributos de datos de información sobre herramientas y componentes emergentes se agregan opcionalmente, lo que significa que debe inicializarlos usted mismo.
Se requieren configuraciones adicionales cuando se utilizan cuadros emergentes en grupos de botones y grupos de cuadros de entrada
Cuando el cuadro de inmediato se usa junto con el grupo .BTN o el grupo de entrada, debe especificar el contenedor: la opción 'Body' (consulte la documentación a continuación) para evitar los efectos secundarios no deseados (por ejemplo, cuando aparece el cuadro emergente, los elementos de página que cooperan con ella pueden volverse más ondulados o disminuidos).
Al usar cuadros emergentes en elementos de página prohibidos, debe agregar un elemento adicional para envolverlo
Para agregar un cuadro emergente a un elemento desactivado o. Disable, envuelva el elemento de página que debe agregarse al cuadro emergente en un <div>, y luego aplique un cuadro emergente a este elemento <Div>.
1. Casos estáticos
4 Opciones opcionales: disposición superior, derecha, inferior e izquierda.
Segmento de código
.bs-exame {border-color: #dd; Border-Radius: 4px 4px 0 0; ancho fronterizo: 1px; Shadow de caja: ninguno; margen-izquierda: 0; margen-derecha: 0; estilo fronterizo: sólido; } .BS-EXample-POPOVER .POPOVER {posición: relativo; Pantalla: bloque; flotante: izquierda; Ancho: 240px; margen: 20px; }<h1> 3. Caja emergente </h1> <div> <div> <div> </div> <h3> Popover Top </h3> <div> <p> SED POSUERE CONSECTETUR EST en Lobortis. Aenean UE Leo Quam. Pellentesque Ornare sem lacinia quam venenatis vestibulum. </p> </div> </div> <div> <div> </div> <h3> popover derecho </h3> <div> <p> sed posual consectur est en lobortis. Aenean UE Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venenatis. </p> </div> <div> <div> </div> <h3> Popover Right </h3> <div> <p> SED POSUERE CONSECTETUR EST en Lobortis. Aenean UE Leo Quam. Pellentesque Ornare sem lacinia quam venenatis vestibulum. </p> </div> </div> <div> <div> </div> <h3> Popover Bottom </h3> <div> <p> Sed Posuere Consecture Estt en Lobortis. Aenean UE Leo Quam. Pellentesque Ornare sem lacinia quam venenatis vestibulum. </p> </div> </div> <div> <div> </div> <h3> popover izquierdo </h3> <div> <p> sed posual consects estet en lobortis. Aenean UE Leo Quam. Pellentesque Ornare sem lacinia quam venenatis vestibulum. </p> </div> </div> </div> </div> </div>
Efecto de vista previa
Fragmento de código:
<a href = "javaScript: void (0)" id = "a_pop" data-placation = "fondo" contente de datos = "El viento y la lluvia son como pasar tiempo para ponerse al día con el caballo blanco. Todavía estamos manteniendo el sueño en su palma joven. ¿Estamos en conjunto las nubes en las lágrimas de verano? se desvian de todo el mundo, el viento y iluminan los copos de nieve que soplan nuestro cabello. Una vez dijo que no debe separarse y estar juntos para siempre, y ahora quiero preguntar si es solo un dicho infantil, los años inocentes no pueden soportar engañar a los jóvenes. Te estaré a la altura. La fuerte nieve, por favor, no borre las huellas de nuestro ser juntos. La fuerte nieve no puede borrar las marcas que nos damos. Esta noche, la hierba está separada y la noche brillante de la luna le enviará miles de millas para esperar a que llegue el viento de otoño ".
<strong> JS Inicialización: </strong> <script type = "text/javaScript"> $ ("#a_pop"). Popover (); </script>Efecto de vista previa:
Tenga en cuenta que cuando se especifique una colocación, preste especial atención a los problemas de dirección. Debido a que el cuadro emergente comienza a aparecer con el centro del elemento del evento de gatillo, es probable que se sobrescriba y no se pueda mostrar todos.
El atributo HREF de etiqueta en el código debe especificarse como JavaScript: void (0) para eliminar el efecto de enlace.
Cuatro instrucciones:
Código
<a href = "javaScript: void (0)" id = "a_pop1" data-placation = "left" data-content = "El viento y la lluvia son como pasar tiempo para ponerse al día con el caballo blanco. ¿Sigue manteniendo su sueño en su palma joven? <a href = "javaScript: void (0)" id = "a_pop2" data-placation = "top" data-content = "Dijimos que no deberíamos separarnos y que siempre debemos estar juntos, incluso si somos enemigos con el tiempo, incluso si nos alejamos de todo el mundo, el viento y las copas de nieve soplamos blancos nuestro cabello. ¿Recuerdas cuando dijimos que iríamos al mundo juntos?" data-original-title = "Time to Bound Rain"> superior </a> <a href = "javascript: void (0)" id = "a_pop3" data-placation = "fondo"-content = "El infinito deseos realizados en el midsummer ese año, nos tomamos de la mano y nos tomamos turnos para cruzar el río. palabras." Data-Original-title = "Time to Hervir Rain"> Lower </a> <a href = "javascript: void (0)" id = "a_pop4" data-placle = "data-content =" Los años inocentes no pueden soportar a los jóvenes. Esta noche, la hierba deja la luna brillante y le envía miles de millas para esperar a que el viento de otoño se eleve en el próximo año. $ ("#a_pop2"). Popover (); $ ("#a_pop3"). Popover (); $ ("#a_pop4"). Popover (); </script>Efectos de vista previa;
2. Opciones
Las opciones se pueden pasar a través de propiedades de datos o JavaScript. Para el atributo de datos, debe poner el nombre de la opción después de datos, por ejemplo, datos-animation = "".
Aplicar propiedades de datos a un solo cuadro emergente
Para un solo cuadro emergente, puede especificar opciones por separado a través de la propiedad de datos, como se muestra arriba.
3. Método
$ (). Popover (Opciones)
Inicializa el cuadro emergente para un conjunto de elementos.
.popover ('show')
Muestra el cuadro emergente.
$ ('#elemento'). Popover ('show')
.popover ('escondite')
Esconde el cuadro emergente.
$ ('#elemento'). Popover ('escondite')
.popover ('alternar')
Mostrar u ocultar la caja emergente.
$ ('#elemento'). Popover ('Toggle')
.popover ('destruir')
Esconder y destruir el cuadro emergente.
$ ('#elemento'). Popover ('destruir')
IV. Eventos
$ ('#mypopover'). on ('hidden.bs.popover', function () {// haz algo ...})Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior se trata de este artículo. Espero que sea útil para todos aprender y dominar el cuadro emergente de arranque.