Bootstrap4 Tutoriales básicos

Bootstrap4 Escucha de desplazamiento Bootstrap4 Cuadro de alerta

Bootstrap4 Cuadro emergente

El control de cuadro emergente es similar al cuadro de información, que se muestra después de hacer clic en el elemento con el ratón, pero a diferencia de este, puede mostrar más contenido.

Cómo crear un cuadro emergente

Agregando 'data' al elemento-toggle="popover" Vamos a crear un cuadro emergente.

El contenido de la propiedad 'title' es el título del cuadro emergente, data-La propiedad 'content' muestra el contenido de texto del cuadro emergente:

<a href="#" data-toggle="popover" title="título del cuadro emergente" data-content="contenido del cuadro emergente">Haga clic en mí varias veces</a>

Atención: Los cuadros emergentes deben escribirse en el código de inicialización de jQuery: luego llame al método popover() en el elemento especificado.

Los siguientes ejemplos pueden utilizarse en cualquier lugar del documento para los cuadros emergentes:

示例

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Ejemplo de cuadro emergente</h2>
　　<a href="#" data-toggle="popover" title="título del cuadro emergente" data-content="contenido del cuadro emergente">Haga clic en mí varias veces</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

Prueba aquí ‹/›

Especificar la ubicación del cuadro emergente

Por defecto, el cuadro emergente se muestra en el lado derecho del elemento.

Se puede utilizar 'data':-Se utiliza la propiedad 'placement' para establecer la dirección de visualización del cuadro emergente: 'top', 'bottom', 'left' o 'right':

示例

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Ejemplo de cuadro emergente</h2>　<br><br><br><br><br><br>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="top" data-content="Contenido">Haga clic aquí</a>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="bottom" data-content="Contenido">Haga clic aquí</a>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="left" data-content="Contenido">Haga clic aquí</a>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="right" data-content="Contenido">Haga clic aquí</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

Prueba aquí ‹/›

En el botón se utiliza:

示例

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Ejemplo de cuadro emergente</h2>　<br><br><br><br><br><br>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"　data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	　　Popover en la parte superior
	</button>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"　data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	　　Popover en la derecha
	</button>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"　data-placement="bottom" data-content="Vivamus
	sagittis lacus vel augue laoreet rutrum faucibus.">
	　　Popover en la parte inferior
	</button>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"　data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	　　Popover en la izquierda
	</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

Prueba aquí ‹/›

Cerrar cuadro emergente

Por defecto, el cuadro emergente se cerrará después de hacer clic en el elemento especificado nuevamente, puede usar data-propiedad trigger="focus" para configurar la cerradura del cuadro emergente al hacer clic en la región externa del elemento:

示例

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Ejemplo de cuadro emergente</h2>　<br>
　　<a href="#" title="Cancelar cuadro emergente" data-toggle="popover"　data-trigger="focus" data-content="Haga clic en otro lugar del documento para cerrarme">Haga clic aquí</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

Prueba aquí ‹/›

Advertencia:Si desea implementar el efecto de mostrar y ocultar al pasar el ratón sobre el elemento, puede usar data-trigger atributo, y configure el valor de "hover":

示例

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Ejemplo de cuadro emergente</h2>　<br>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-trigger="hover"　data-content="Algunos contenido">Mueve el ratón aquí</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

Prueba aquí ‹/›

Bootstrap4 Escucha de desplazamiento Bootstrap4 Cuadro de alerta